rebugged <insert pompous tag line here>

I dislike default. Default is easy, and will always work. But accept it, default is boring.

Let’s see how to spice up your web server a little bit. If you want to see how our server is going to look like after we make the changes, click the demo link below.

Demo ~ Download Source

Basically what we are going to do is to add a Header file and a ReadMe file for our directory listing page. The header file is a text file that is rendered above the content list in a directory and ReadMe is displayed at the bottom. To add the Header and ReadMe, do the following:-

1. Open your httpd.conf file

The httpd.conf file is usually located in the /etc/apache2 directory. Open this file, or open your virtual hosts file (usually a file called 000-default) located inside /etc/apache2/sites-enabled/

2. You should see a lot of stuff like the following:-

DocumentRoot /home/Dev/Server
<Directory />
    Options FollowSymLinks
    AllowOverride All
</Directory>

<Directory /home/Dev/Server>
    Options Indexes FollowSymLinks MultiViews
    AllowOverride All
    Order allow,deny
    allow from all
</Directory>

3. Find your virtual host

(the folder where your website files are stored) and add the following two directives there.

    HeaderName /.ServerFiles/HEADER.html
    ReadmeName /.ServerFiles/NOTICE.html

.ServerFiles is a folder inside my webserver root. Notice the “.” (dot) in front of the folder name. As you know, files and folders starting with “.” are hidden in Linux.

So I just created a hidden folder inside my webserver root folder and added two files html files in it HEADER.html and NOTICE.html.

After adding the Header and ReadMe directives, my host defenition looks like this:-

<Directory /home/Dev/Server>
    Options Indexes FollowSymLinks MultiViews
    AllowOverride All
    Order allow,deny
    allow from all
    HeaderName /.ServerFiles/HEADER.html 
    ReadmeName /.ServerFiles/NOTICE.html
</Directory>

4. And add Header and ReadMe to style your server!

You can download and use the Header and ReadMe file I’m using here or see how the server will look like if you use my Header and ReadMe.

You can use pretty much any kind of HTML, CSS and Javascript in these files. You can even load jQuery there and do some of that pretty fancy effects there. However, try to keep it light.