Make Your Own Apache Web Server From Scratch

Apache is an open source and free software for creating web servers. It accounts for running almost 40% of the websites on the internet. Servers do the job of serving content to users and therefor the name a ‘Web Server’.

When someone enters a domain name (eg: google.com) into their browser, the server sends the requested files (HTML, CSS, etc) to the browser. After this, the browser then renders these files so that you can see the website that you were looking for.

In this post Let’s try building our own Apache webserver from scratch! This is going to be fun 🙂

Prerequisites

Before we install Apache and start making our web server, we need a computer to install it onto. Why? Because we can’t keep our own computer turned on all the time and keep it connected to the internet. For that we will use a hosting server.

Digital Ocean

First, go and create an account on Digital Ocean. We then need a cloud server (droplet in digital ocean) which will cost you $5/month on the basic plan.

But don’t worry, we got you covered. Using the link below you get a free $100 credit for 60 (new users). You might be asked for your credit card to verify that you are a legit user. Digital Ocean is a great platform for hosting your websites very fast. So if you ever want to create a website with full control, you can use digital ocean paid plans.

Get free digital Ocean credits (affiliate link)

Setting Up Digital Ocean

If you have finished creating your account, you can now get yourself a cloud server. A cloud server is a virtual server that you can access remotely using an SSH.

Read more about cloud servers here.

  • Choose the basic plan for now with $5/month option
  • For authentication choose option Password. Although SSH is better and more secure we will use Password for now since setting up SSH is out of the scope of this tutorial.
  • After that click ‘create droplet’ in the bottom screen

That’s it! You now have a cloud server which you can access from anywhere around the world with a computer having an internet connection!

Installing Apache

Now that we have set up our own cloud server, let’s install apache on it.

  • Find your newly created server’s IP address. (ipv4 as shown below.) and copy it.
  • Open terminal/bash or Command Prompt on windows. You might need to install other software to use ssh on your device. Try typing ssh on your terminal and hit enter to see if it’s installed or not.

Follow this tutorial if you have trouble using SSH

  • In your terminal enter the following command:
    ssh [email protected]<ip address you copied>
  • You will be prompted to enter the password which entered while creating the virtual server.
  • Enter the following commands (don’t include the $)

$ sudo apt-get update
$ sudo apt-get install apache2

This will update our system OS (Ubuntu).

Setup Directory Structure

Let’s create the directories required for our Apache server to serve content from. Apache will look into this document root and server the required files to the user.

$ sudo mkdir -p /var/www/example.com/public_html

This will create all folders (var, www, example.com, public_html). The public_html folder contains all of the content. Notice example.com. You can use any domain you want here. For this tutorial, you can use example.com too without purchasing a paid domain (We will make the browser to open our website when we search for example.com)

Creating HTML Files

Let’s now create an HTML that will act as the home page for our website.

$ nano /var/www/example.com/public_html/index.html

After executing this you can enter your HTML code here. For now, let’s just use this template I made that also uses Bootstrap.

<!DOCTYPE html>
<html>
<head>
	<!-- CSS only -->
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

	<!-- JS, Popper.js, and jQuery -->
	<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
	<title>Example</title>
</head>
<body>
	<nav class="navbar navbar-expand-lg navbar-light bg-light">
	  <a class="navbar-brand" href="#">Navbar</a>
	  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
	    <span class="navbar-toggler-icon"></span>
	  </button>

	  <div class="collapse navbar-collapse" id="navbarSupportedContent">
	    <ul class="navbar-nav mr-auto">
	      <li class="nav-item active">
	        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
	      </li>
	      <li class="nav-item">
	        <a class="nav-link" href="#">Link</a>
	      </li>
	      <li class="nav-item dropdown">
	        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
	          Dropdown
	        </a>
	        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
	          <a class="dropdown-item" href="#">Action</a>
	          <a class="dropdown-item" href="#">Another action</a>
	          <div class="dropdown-divider"></div>
	          <a class="dropdown-item" href="#">Something else here</a>
	        </div>
	      </li>
	      <li class="nav-item">
	        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
	      </li>
	    </ul>
	    <form class="form-inline my-2 my-lg-0">
	      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
	      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
	    </form>
	  </div>
	</nav>
	<div class="jumbotron">
	  <h1 class="display-4">Hello, world!</h1>
	  <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
	  <hr class="my-4">
	  <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
	  <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
	</div>
</body>
</html>

Now copy past this code into the terminal using Ctrl/Command+Shift+V. Save this with Ctrl + S or Command + S on Mac. To exit the editor use Ctrl/Command + X.

Create New Virtual Host File

Virtual Host files specify the configurations of our virtual host servers. You can create multiple websites with different domains on the same cloud server with different Virtual Host files.

First, we want to duplicate the default Virtual Host config file that Apache provides us with. Then we will modify it to match our Virtual Host website.

$ cp /etc/apache2/sites-available/000-default.conf /etc/apache2/sites-available/example.com.conf

This command will duplicate the 00-default.conf into example.com.conf file. The newly created conf file will act as the Virtual host config file for example.com.

Now let’s edit this file to match our domain names.

$ sudo nano /etc/apache2/sites-available/example.com.conf

The file will look something like this (removing all comments):

<VirtualHost *:80>
    ServerAdmin [email protected]
    DocumentRoot /var/www/html
    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>

We now need to make few changes into this file.

First let’s add the ServerName and ServerAlias Properties like this:

ServerName example.com
ServerAlias www.example.com

These tells Apache which all domain names it should consider. example.com is the original and www.example.com acts as an alias which will send the same content on example.com.

Now let’s change the Document root to match our document root for example.com.

DocumentRoot /var/www/example.com/public_html

Change the line with DocumentRoot to match like this (your domain can be here instead of example.com)

Enabling Our Website

Now let’s enable our website. This will notify Apache to look at these new conf files and therefor creating our Virtual Host.

sudo a2ensite example.com.conf

That’s it! Your website is live and running.

Now a final thing to do. Since example.com is not registered domain or isn’t owned by me, searching for it will give another website. So let’s tweak our computers settings to view example.com in the browser.

On Mac or Linux edit your local hosts file like this:

$ sudo nano /etc/hosts

Do not remove anything in here. Just add these lines in the end and save and exit (Ctrl/Command + S and Ctrl/Command + X).

<IP address of cloud server> example.com

The IP address is the same as we used while using SSH.

Now search for https://example.com in your browser and you will see this page popping up!

Congrats! You have just created your own Apache server and deployed a working website. (Although this won’t work on other computers unless you use a real domain and change its DNS settings to match your server IP)

Leave a Reply