Step-by-Step Guide: Setting Up Apache2 and Deploying an HTML Template on Ubuntu

This article outlines the process of setting up an Apache2 web server on Ubuntu using Vagrant and deploying an HTML template for a mock finance site. The aim is to provide a comprehensive guide that details the steps involved in configuring a server and deploying a static website in a Linux environment.

Project Overview

The project utilizes Vagrant to initialize and configure a virtual machine (VM), set up Apache2 for serving web content, and deploy a downloadable HTML template. This hands-on experience is intended to enhance understanding of server configuration and web development, serving as a foundation for future projects.

Tools and Technologies

• Apache2: A widely used, open-source web server software that enables the hosting of websites by serving web content to clients over HTTP.


• Vagrant: A tool that automates the creation and management of virtualized environments, allowing for easy setup and destruction of VMs without affecting the host operating system.


• Virtual Machines (VMs): VMs provide isolated environments that replicate physical computers, enabling the execution of different operating systems on a host machine for testing and development.

Steps to Set Up Apache2 and Deploy HTML Template

1. Create Project Folder
   
   Create a folder named C:\vagrant-vms.




2. Navigate and Create Directory
   
   Navigate to the folder and create a directory "finance" in Git Bash:
   
   

cd C:\vagrant-vms

mkdir finance

cd finance

1. Initialize Vagrant
   Run the following command to initialize Vagrant with the ubuntu/focal64 box:
   

vagrant init ubuntu/focal64

1. Edit Vagrantfile
   Open the Vagrantfile for configuration:
   

vim Vagrantfile

Make the following changes in insert mode:

• Uncomment the private IP address line and set it to 192.168.56.22.


• Uncomment the config.vm.provider "virtualbox" do |vb| line.


• Uncomment the vb.memory line (default memory can be increased if needed).
  Save and exit the editor with Esc, :wq.

1. Start the Virtual Machine
   Bring up the VM with:
   

vagrant up

1. Log into the VM
   Log into the VM:
   

vagrant ssh

1. Switch to Root User
   Switch to the root user:
   

sudo -i

1. Change Hostname
   Edit /etc/hostname to set the hostname as finance:
   

vi /etc/hostname

Save and exit (Esc, :wq), then run:

hostname finance

Log out and log back in:

exit

vagrant ssh

1. Install Required Packages
   Install Apache2, wget, vim, zip, and unzip:
   

sudo apt install apache2 wget vim unzip zip -y

1. Start and Enable Apache2
   Start the Apache2 service:
   

systemctl start apache2

Enable Apache2 to start on boot:

systemctl enable apache2

1. Verify IP Address
   Run the following to check the IP address:
   

ip addr show

Copy the IP and check it in a browser to ensure Apache2 is running correctly.

1. Verify Web Root Directory
   Navigate to the Apache2 web root directory:
   

cd /var/www/html/

List the contents to verify the directory where Apache serves files:

ls

1. Download HTML Template
   
   Visit Tooplate.com in a browser and select the "Mini Finance" template. Use Developer Tools (F12) to copy the direct download link visit the Network tab.




2. Download and Unzip Template
   
   Change directory to /tmp and download the template:
   
   

cd /tmp/

wget https://www.tooplate.com/zip-templates/2135_mini_finance.zip

Unzip the downloaded file:

unzip 2135_mini_finance.zip

Navigate into the extracted directory:

cd 2135_mini_finance

ls

1. Copy Files to Web Root
   Copy all files from the template folder to the Apache2 web root:
   

cp -r * /var/www/html/

1. Restart Apache2 Service
   Restart the Apache2 service to apply changes:
   

systemctl restart apache2

1. Check Apache2 and Firewall Status
   Check the Apache2 status:
   

systemctl status apache2

Verify the firewall status:

systemctl status firewalld

Stop and disable the firewall (note: this is not recommended for production):

systemctl stop firewalld

systemctl disable firewalld

1. Access Deployed Template
   Retrieve the IP address:
   

ip addr show

Open the IP in a browser to view the deployed HTML template.

Conclusion

This project provides a comprehensive overview of setting up an Apache2 web server on Ubuntu using Vagrant and deploying an HTML template. Following these steps not only facilitates the understanding of server configuration but also lays the groundwork for further exploration in web development and server management.