New Default Website with Apache2 – Show your homepage at top of example.com, no tilde

Install the most popular web server in the world, Apache.
Put your homepage on a simple URL, like http://example.com. You don’t need tilde or username (no http://example.com/~tero)
To follow this tutorial, you should know Linux command line interface and have either Linux Live USB or installed Linux. Knowing the idea of client-server model helps. This tutorial has been tested with Ubuntu 14.04 LTS.

Install Apache and Serve a Web Page on Localhost

Open http://localhost with a web browser, such as Firefox. You should get an error message, because the port is closed: there is no deamon listening on http port (80/tcp) on your localhost.
Install Apache. It’s started automatically.

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

Open http://localhost again. You should see Apache welcome page. Well done, that was the first page served by Apache.

Disable the Default VirtualHost – From Hello Page to “404 Not Found” or “403 Forbidden”

In Apache, a VirtualHost is approximately the same as a website. A single Apache installation can serve many VirtualHost.
The welcome page comes from a VirtualHost.
Initally, http://localhost should show you the default welcome page. We want to get rid of it.
Available, but not necessary active sites (VirtualHosts) are in /etc/apache2/sites-available/. Each VirtualHost is defined in a single plain text file.
Enabled sites (VirtualHosts) are symlinks (symbolic links) in /etc/apache2/sites-enabled/. You don’t need to edit these manually. You can enable sites with ‘sudo a2ensite tero.conf’ and disable them with ‘sudo a2dissite tero.conf’.

Create Your New VirtualHost

Create a new VirtualHost. You can call it what you like, as long as it’s a simple name with no special characters and it ends with “.conf”.

$ sudoedit /etc/apache2/sites-available/tero.conf

You can use the existing sites in the same folder as examples. You can use this sample VirtualHost. When you’re done with sudoedit (nano), save it with ctrl-X y enter.

## /etc/apache2/sites-enabled/tero.conf
<VirtualHost *:80>
 DocumentRoot /home/tero/public_html/
 <Directory /home/tero/public_html/>
   Require all granted
 </Directory>
</VirtualHost>

Comment lines start with a hash ‘#’. The whole VirtualHost is inside VirtualHost start and end tags. Notice the slash ‘/’ in the ending tag.
DocumentRoot is the absolute path to the folder that has your HTML files, such as “index.html”. Obviously, use your own home directory instead of mine (‘echo $HOME’).
“Require all granted” in the Directory stanza tells Apache that you allow serving the files. Without it, you just get a 403 Forbidden http status.

Disable the Default, Enable Your VirtualHost

Use a2* convenience commands to add symlinks to sites-enabled/

$ sudo a2ensite tero.conf
$ sudo a2dissite 000-default.conf

Restart the web server, so that is your new configuration is taken into use. Use ‘sudo’! Some Ubuntu versions have a bug that shows you misleading output if you forget sudo, claiming that it’s restarting the server while doing absolutely nothing.

$ sudo service apache2 restart

Open your website http://localhost in your browser. The default website should be gone, but you simply get an error message: “404 Not Found” or “403 Forbidden”. Did you even create a homepage yet?

Create Your Homepage

Our goal is to create a simple, plain text page and see it on http://localhost.
Initially, your web server just gives an error message on http://localhost. If you check your logs, you can see that it’s looking at the right place, but there is nothing there.
You must attempt browse the site first, otherwise there is nothing to log.

$ sudo tail -1 /var/log/apache2/error.log
[..] AH01630: client denied by server configuration: /home/tero/public_html

Or, if you have the folder but your HTML file is not called “index.html”

$ sudo tail -1 /var/log/apache2/error.log
H01276: Cannot serve directory /home/tero/public_html/: No matching DirectoryIndex
(index.html,index.cgi,index.pl,index.php,index.xhtml,index.htm)
found, and server-generated directory index forbidden by Options directive

Or, if you simply copy paste things without reading, you forgot to use your own home directory instead of mine in /etc/apache2/sites-available/tero.conf

$ sudo tail -1 /var/log/apache2/error.log
AH01630: client denied by server configuration: /home/tero

On both cases, you simply create your homepage in the directory. As we’re simply creating a homepage, so we don’t need sudo here – normal user rights are enough.

$ cd

Just plain ‘cd’ is a shortcut for ‘cd $HOME’ – go to your home directory.

$ mkdir public_html/
$ cd public_html/
$ pwd
/home/tero/public_html/

The path should be the same you have defined in your VirtualHost configuration tero.conf.
Create the homepage. Use just plain ASCII text first. By avoiding any HTML, any mistakes that we make are related to server configuration and placement of files, not typos in HTML tags.

$ nano index.html

Write a simple line of text, e.g. “Moi Tero”. Ctrl-X y enter to save.
Browse to your new homepage with a browser, such as Firefox: http://localhost. You should see your homepage here, namely the text “Moi Tero” on white background.
Congratulations! You just installed the most popular web server in the world. And now you can create a homepage as a normal user.

An HTML5 Homepage

HTML5 is the new black you say? Just edit your homepage again ‘nano index.html’ and put the skeleton there

<!doctype html>
<html>
<head>
	<title>Tero's Test Page</title>
	<meta charset="utf-8" />
</head>
<body>
	<h1>Tero's Test Page</h1>
	<p>Let's test UTF-8 with "päivää"</p>
	<p>See you at <a href="http://TeroKarvinen.com">TeroKarvinen.com</a></p>
</body>
</html>

Validate your HTML with http://validator.w3.org.
Gedit is a nice editor if you type a lot of HTML, ‘sudo apt-get -y install gedit’.
Well done, you now have HTML5 homepage on your very own server!

See also:

Karvinen 2012: Short HTML5 page
The World Wide Web Consortium: Markup Validation Service
Apache Software Foundation 2016: Apache HTTP Server Version 2.4 Documentation (Official reference by the makers of Apache)
Apache Software Foundation 2016: Apache HTTP Server Version 2.4 Documentation: Apache Virtual Host documentation
Apache Software Foundation 2016: Apache HTTP Server Version 2.4 Documentation: Upgrading to 2.4 from 2.2, especially Run-Time Configuration Changes
Karvinen 2008: Commands for Admin (sudo, apt-get)
Karvinen 2009: Command Line Basics (pwd, ls, cd, nano…)
Rctgamer3 / Mozilla Developer Network et al 2015: HTTP response codes (200 OK, 300 Moved, 400 Client Error, 500 Server Error)
Updates: Tested from scratch with a fresh Ubuntu 14.04 LTS VM on vagrant, fixed typos found. Fixed a2dismod -> a2dissite, thanks Jesse Lehmonen