Hosting your static website in a linux virtual machine

To host a website on a linux virtual machine is fairly simple. The website hosted will be available on the internet publicly as long as our Linux virtual machine is running.
In this tutorial, we'll be hosting a HTML template from tooplate.com, feel free to use your custom made HTML documents.

Prerequisites

Vagrant: This tutorial assumes a working knowledge of vagrant and how to automate creating virtual machines using Vagrantfile

Step 1. Create a virtual machine

Creating an ubuntu virtual machine

We'll be using spox/ubuntu-arm box image to setup our ubuntu virtual machine.

Navigate to your project directory and create the Vagrantfile with the following command.

vagrant init spox/ubuntu-arm

or copy and paste the Vagrantfile below.

Now, the Vagrantfile is created and can be edited through vim editor.

vim Vagrantfile

# -*- mode: ruby -*-
# vi: set ft=ruby :

# All Vagrant configuration is done below. The "2" in Vagrant.configure
# configures the configuration version (we support older styles for
# backwards compatibility). Please don't change it unless you know what
# you're doing.
Vagrant.configure("2") do |config|
  # The most common configuration options are documented and commented below.
  # For a complete reference, please see the online documentation at
  # https://docs.vagrantup.com.

  # Every Vagrant development environment requires a box. You can search for
  # boxes at https://vagrantcloud.com/search.
  config.vm.box = "spox/ubuntu-arm"

  # Disable automatic box update checking. If you disable this, then
  # boxes will only be checked for updates when the user runs
  # `vagrant box outdated`. This is not recommended.
  # config.vm.box_check_update = false

  # Create a forwarded port mapping which allows access to a specific port
  # within the machine from a port on the host machine. In the example below,
  # accessing "localhost:8080" will access port 80 on the guest machine.
  # NOTE: This will enable public access to the opened port
  # config.vm.network "forwarded_port", guest: 80, host: 8080

  # Create a forwarded port mapping which allows access to a specific port
  # within the machine from a port on the host machine and only allow access
  # via 127.0.0.1 to disable public access
  # config.vm.network "forwarded_port", guest: 80, host: 8080, host_ip: "127.0.0.1"

  # Create a private network, which allows host-only access to the machine
  # using a specific IP.
  config.vm.network "private_network", ip: "192.168.33.10"

  # Create a public network, which generally matched to bridged network.
  # Bridged networks make the machine appear as another physical device on
  # your network.
  config.vm.network "public_network"

  # Share an additional folder to the guest VM. The first argument is
  # the path on the host to the actual folder. The second argument is
  # the path on the guest to mount the folder. And the optional third
  # argument is a set of non-required options.
  # config.vm.synced_folder "../data", "/vagrant_data"

  # Provider-specific configuration so you can fine-tune various
  # backing providers for Vagrant. These expose provider-specific options.
  # Example for VirtualBox:
  #
  config.vm.provider "virtualbox" do |vb|
  #   # Display the VirtualBox GUI when booting the machine
  #   vb.gui = true
  #
  #   # Customize the amount of memory on the VM:
     vb.memory = "1024"
  end
  #
  # View the documentation for the provider you are using for more
  # information on available options.

  # Enable provisioning with a shell script. Additional provisioners such as
  # Ansible, Chef, Docker, Puppet and Salt are also available. Please see the
  # documentation for more information about their specific syntax and use.
  # config.vm.provision "shell", inline: <<-SHELL
  #   apt-get update
  #   apt-get install -y apache2
  # SHELL
end

Creating a centos virtual machine

We'll be using geerlingguy/centos7 box image to setup our cento7 virtual machine.

PS: For M1 users, I recommend you use jacobw/fedora35-arm64 instead of the above mentioned box image.

Navigate to your project directory and create the Vagrantfile with the following command.

vagrant init geerlingguy/centos7

Now, the Vagrantfile is created and can be edited through vim editor.

vim Vagrantfile

or copy and paste the Vagrantfile below.

# -*- mode: ruby -*-
# vi: set ft=ruby :

# All Vagrant configuration is done below. The "2" in Vagrant.configure
# configures the configuration version (we support older styles for
# backwards compatibility). Please don't change it unless you know what
# you're doing.
Vagrant.configure("2") do |config|
  # The most common configuration options are documented and commented below.
  # For a complete reference, please see the online documentation at
  # https://docs.vagrantup.com.

  # Every Vagrant development environment requires a box. You can search for
  # boxes at https://vagrantcloud.com/search.
  config.vm.box = "jacobw/fedora35-arm64"

  # Disable automatic box update checking. If you disable this, then
  # boxes will only be checked for updates when the user runs
  # `vagrant box outdated`. This is not recommended.
  # config.vm.box_check_update = false

  # Create a forwarded port mapping which allows access to a specific port
  # within the machine from a port on the host machine. In the example below,
  # accessing "localhost:8080" will access port 80 on the guest machine.
  # NOTE: This will enable public access to the opened port
  # config.vm.network "forwarded_port", guest: 80, host: 8080

  # Create a forwarded port mapping which allows access to a specific port
  # within the machine from a port on the host machine and only allow access
  # via 127.0.0.1 to disable public access
  # config.vm.network "forwarded_port", guest: 80, host: 8080, host_ip: "127.0.0.1"

  # Create a private network, which allows host-only access to the machine
  # using a specific IP.
  config.vm.network "private_network", ip: "192.168.33.10"

  # Create a public network, which generally matched to bridged network.
  # Bridged networks make the machine appear as another physical device on
  # your network.
  config.vm.network "public_network"

  # Share an additional folder to the guest VM. The first argument is
  # the path on the host to the actual folder. The second argument is
  # the path on the guest to mount the folder. And the optional third
  # argument is a set of non-required options.
  # config.vm.synced_folder "../data", "/vagrant_data"

  # Provider-specific configuration so you can fine-tune various
  # backing providers for Vagrant. These expose provider-specific options.
  # Example for VirtualBox:
  #
  config.vm.provider "virtualbox" do |vb|
  #   # Display the VirtualBox GUI when booting the machine
  #   vb.gui = true
  #
  #   # Customize the amount of memory on the VM:
     vb.memory = "1024"
  end
  #
  # View the documentation for the provider you are using for more
  # information on available options.

  # Enable provisioning with a shell script. Additional provisioners such as
  # Ansible, Chef, Docker, Puppet and Salt are also available. Please see the
  # documentation for more information about their specific syntax and use.
  # config.vm.provision "shell", inline: <<-SHELL
  #   apt-get update
  #   apt-get install -y apache2
  # SHELL
end

Required components to host the website in our Vagrantfile

1. IP Address to access the website: config.vm.network "private_network", ip: "192.168.33.10"
2. Optional assign a dynamic IP Address to the virtual machine: config.vm.network "public_network"
3. Hosting our website might need an extra amount of RAM, other than the default memory provided.

config.vm.provider "virtualbox" do |vb|
  #   # Display the VirtualBox GUI when booting the machine
  #   vb.gui = true
  #
  #   # Customize the amount of memory on the VM:
     vb.memory = "1024"
end

With the above configuration, we're ready to start the virtual machine.

Start the VM:

vagrant up

Log into the VM:

vagrant ssh

To provide the highest level of privilege, we need to login as the root user.

sudo -i

Step 2. Installing required packages, inside our VM.

Hosting our packages would require a couple of packages installed in our VM.

Run the command below, to install of them at once.

For ubuntu machine;

sudo apt install apache2 wget unzip -y

For centos machine;

yum install httpd wget unzip -y

P.S. httpd in centos is equivalent apache2 o ubuntu machine.

1. httpd: Apache web-server that hosts our website in the virtual machine.
2. wget: An http package to download our template from tooplate.com
3. unzip: This package is required because our template will be in .zip format, and needs to be extracted.

With the installation complete, the apache2 web-server has been automatically started by ubuntu, systemctl status apach2 to confirm. For centos machines, we can start our service by running the following command systemctl start httpd.

we could also enable the service, so that it comes up at boot time systemctl enable httpd

Access the default IP Address assigned to the VM:

ifconfig

result:

Access the IP Address in the browser, and the following default web page, would show up.

Download and extract the html directory into virtual machine.

Server data of our VM is located in the /var/www/html directory, this is where html files can be saved and served on the browser.

Step 1. Navigate to /tmp directory and download the zip file.

wget https://www.free-css.com/assets/files/free-css-templates/download/page285/cial.zip

Step 2. Extract the directory and copy it's content into /var/www/html.

Extract the document;

unzip cial.zip && cd html

Copy the content into /var/www/html

sudo cp -r * /var/www/html

Restart apache2/httpd and reload the browser

systemctl restart httpd

Reload the browser tab with your VM IP Address.