DEV Community

Cover image for How to host a web page with Apache
Florence Okoli
Florence Okoli

Posted on • Edited on

How to host a web page with Apache

Deploying websites on cloud servers has become a standard practice due to its scalability, flexibility, and accessibility. This article delves into the process of hosting a custom web page on Amazon Web Services (AWS) using Apache as the web server and Ubuntu as the operating system.

Table of Contents

  1. Introduction
  2. Set up EC2 Instance
  3. Install Apache webserver
  4. Deploy your custom web page.
  5. Conclusion

- Introduction
The Apache web server is like a reliable backbone that confidently handles the traffic powering websites and applications worldwide. Its versatility goes beyond simply hosting web pages. It is a powerhouse of features designed to keep your online presence secure, performant, and easily customizable.
In other words, Apache is a widely used open-source web server software that serves web content over the internet with key functionalities such as HTTP protocol handling, content delivery, virtual hosting among others. Apache is also highly compatible with various operating systems (e.g., Linux, Unix, Windows)
This article provides a detailed guide on how to host your custom web page with Apache.

Let's begin!

- Set up EC2 Instance
Log in to your AWS console. On the search bar, type in EC2. On the EC2 dashboard, scroll down and proceed to launch an instance.

EC2 Launch

Choose a name for your EC2 instance
EC2 launch page

Proceed to select your AMI(Amazon Machine Image). For this article, we will select the Ubuntu AMI.

Ubuntu AMI

Scroll down to generate your key pair. We need it to be able to connect to the terminal. If you already have a key pair, you can use it at this point.

Key pair generation

Let's create a key pair. Choose a name for your key pair, select the key pair type and proceed to create it.

Create key pair

On the security group settings, set the SSH, HTTPS and HTTP to allow traffic from anywhere and also from the internet.

Security group

Leave every other setting on default and proceed to launch your instance.
Once the EC2 instance has been launched successfully, you will see 2/2 checks passed underneath the status check.

Next, click on the instance ID

Instance ID

And connect via the EC2 Instance Connect. 
See the images below

EC2 connect

Ec2 Instance connect
Take note of the public IP address.

- Install Apache Web Server
Once you have connected and are in the terminal, run this command first to update your packages and dependencies.
sudo apt update
Isudo apt update

Next, install apache2.
sudo apt install apache2 -y

The "-y" flag in the command above instructs the package manager to proceed with the installation without asking for confirmation. In other words, it bypasses the user's input during installations.

Image description

- Deploy your custom web page
i. Let's install git since we will be cloning a Github repo for this article.
sudo apt install git

Install git

ii. Create a directory. This directory will be the location where you clone your Github repo. I'm using Florence as my directory, you can use any name of your choice.

mkdir Florence

mkdir Florence

Let's change our directory to the one we just created.
cd Florence/

cd Florence/

iii. Let's initialize git in the Florence directory.
git init

git init

iv. Let's clone our GitHub repository. This is the link to my GitHub repository.

See the image below on how to copy the link.

Github repo

To clone the GitHub repo
git clone https://github.com/WendyOkoli/AltSchool-Assignment-3

Github repo clone

iv. Let's create another directory but this time the directory will store web server files like index.html, index.css, etc.
To do this, let's run this command
sudo mkdir /var/www/FlorenceOkoli
Whatever name you choose to call your directory, please note that the '/var/www/'should be in it for it to achieve the purpose of storing web server files.

/var/www/FlorenceOkoli

v. Let's copy the content of our 'Florence' directory into the one we just created.
sudo cp -R ./* /var/www/FlorenceOkoli

copy content

Here's a breakdown of the command:

sudo: This stands for "superuser do". This command allows you to run other commands with administrative (root) privileges. It's necessary for commands that change system settings or modify system files, like this one.

cp: This is the command to copy files and directories.

-R: This option tells cp to copy directories recursively, meaning it will copy all the files and subdirectories within any directory you specify.

.*: This is a wildcard that matches all files and directories in the current directory.

/var/www/FlorenceOkoli: This is the destination directory where the files and directories will be copied.

vi. Let's create a new file named FlorenceOkoli.conf
sudo touch /etc/apache2/sites-available/ForenceOkoli.conf

Create empty conf file
The command sudo touch /etc/apache2/sites-available/FlorenceOkoli.conf creates a new empty file named FlorenceOkoli.conf in the /etc/apache2/sites-available/ directory.
This is the first step in setting up a new web page with Apache.

vii. Let's create a copy of the default Apache site configuration file and name it FlorenceOkoli.conf.
To do this, let's run the command below
sudo cp /etc/apache2/sites-available/000-default.conf /etc/apache2/sites-available/FlorenceOkoli

copy 000-default.conf file to the .conf file

viii. Now that the FlorenceOkoli.conf file has been created, let's edit it to add the configuration of our new site.

sudo nano /etc/apache2/sites-available/FlorenceOkoli.conf

Edit the file

Your conf file should look exactly like the image below. Edit the DocumentRoot to be /var/www/name of your conf file

Conf file

Save your file and exit.

ix. Enable the FlorenceOkoli.conf file and disable the 000-default.conf file

First, enable the FlorenceOkoli.conf file
sudo a2ensite FlorenceOkoli.conf

Then disable the 000-default.conf file
sudo a2dissite 000-default.conf

a2ensite & a2dissite
When these commands are run, it enables the site in the FlorenceOkoli.conf file and disables the site in 000-default.conf file.

To activate these new configurations in the conf file, run this command:

sudo systemctl reload apache2

systemctl reload apache2

Finally, on your web browser where you have the displayed Apache web page, reload it and you will see your custom web page displayed. 
If you used my GitHub repo, the output of your web page should look like the image below:

WP web page

As soon as you are done following this guide, please terminate your EC2 instances to avoid incurring costs from AWS. Let the images below guide you on how to terminate your instance.

Go back to your console where you have your instance ID. Expand the Instance state box, click on terminate instance and follow the prompt.

Instance termination

Instance termination

Once this is done, you will find a pop-up like the image below to show that your instance has been successfully terminated.

Instance termination complete

- Conclusion

Congratulations on successfully hosting your custom web page using Apache on AWS! In this guide, we covered the essential steps to set up an EC2 instance, install an Apache web server, and deploy a custom web page. By leveraging cloud infrastructure and open-source tools like Git and Apache, you've created a scalable and accessible platform for showcasing your web page.

Remember to terminate your EC2 instance to avoid unnecessary costs. Follow the provided steps to gracefully shut down your resources and manage your AWS environment efficiently.

I encourage you to explore further with Apache and AWS, experiment with different configurations, and customize your web hosting setup to meet your specific needs. Your feedback is valuable to me- please feel free to share your thoughts and experiences with this guide. I'm here to assist and improve based on your insights.

Thank you!

Top comments (0)