Customising Apache Directory Listing

Home 📂 Blog Posts

Published at: 2018-09-10 03:13:39 +0000

You can use Apache directory listing to quickly get a good web site going. Especially if you need to share some documents with coworkers, everything in the directory is automatically made available through a web browser. We are going to look at how to customise the appearance of Apache directory listing to fit the common requirements you may have. It should look something like this:

Screen Shot 2018-09-10 at 12.49.59 pm_compressed.png

First, setup the directory you want to show:

        <Directory /var/www/html>

You can make your own header that appears at the top of every page instead of the "Index of $X" title.

Make a file in the directory such as "HEADER.shtml".

You will likely want to include the file path of the request as the title, we can do that with an include tag.

So for example:

Welcome to the INTERNET<br />

<h1>Index of <!--#echo var="REQUEST_URI" --></h1>

Now you can add this file as the header using the HeaderName directive. You also want to remove this shtml file from the directory index so you need a IndexIgnore directive. Also you need to turn on shtml and include processing, so you need to add the Includes Options, set shtml to be a html type and turn on INCLUDES output filtering for shtml. Here is how you do all that:

        <Directory /var/www/html>

                HeaderName /HEADER.shtml

                IndexIgnore HEADER.shtml

                Options +Includes

                AddType text/html .shtml

                AddOutputFilter INCLUDES .shtml

Pretty straight forward.

Next, Apache directory listing gives you the option of adding Descriptions to files. To do this we use the AddDescription directive.

                AddDescription "Bird Photos" birds

                AllowOverride FileInfo

Next, we also have the option of inserting additional tags into the header of the html documents Apache generates. I like to use this to set the viewport, to make the web page look nice on mobile web browsers (by default it is very wide, this makes the page only as wide as the phone screen width).

                IndexHeadInsert "<meta name='viewport' content='width=device-width'>"

Finally we can include external links in the directory listing by using a little redirect trick. Say we want a link bird photos to show up in the directory listing, we make an empty file in the directory using touch (i.e. touch birds) then we add a Redirect so it will send the user somewhere else instead.

        Redirect permanent /birds

You can also set custom HTTP headers on the whole directory or individual files in the directory. Here we are going to set robots noindex for the status.txt file.

                <Location /status.txt>

                        Header set X-Robots-Tag "noindex"


That's all! Enjoy your cool Apache web site.

Generated by Max Space