As you hopefully know apache2 will give you a filebrowser that looks terrible if it cant find an index page (index.html, index.php, or whatever you set it as). This is useful for filesharing, but just looks terrible. The default sorting order is terrible to. We are going to fix all that with prettier icons, and better sorting.

Cool thing too, is the Fancyindexing/file browser feature of apache is read only so noone on the web can edit your stuff. Its also secure. By the way the other alternative to this is making your own php code that will let you browse safely.

Using this:
https://gist.github.com/shamangeorge/6062991

But also check this out:
http://uksysadmin.wordpress.com/2010/11/09/apache-fancyindexing-and-php-5-mod_autoindex/

For indepth info on all of the options we will be using: http://httpd.apache.org/docs/2.2/mod/mod_autoindex.html

Going to go from this:

To this:

I would usually find out why this is happening, but I dont mind it, looks good and also I dont have the time right now, maybe another day.

Steps

So my default config file looks like this, before any edits:

1st Step.

Make a file called /etc/apache2/fancyedits.conf

In that file put this (replace /var/www with the location you want to fancyindex):

NOTE: this will affect everything from /var/www down recursively into it, it will not affect pages that it found an index page on such as index.html, index.php, etc…

NOTE: notice that images are grabbed from fruitopology. We can download all of them, and point them locally.
For example if your picture http://cdn.fruitopology.net/img/icons/type_application.png was here /var/www/index-icons/type_application.png, you could then just say AddIcon /index-icons/type_application.png , all directory names in apache are either absolute from root of the filesystem / or relative from /etc/apache2 or relative from your Directory which in this case is /var/www. For example Directory /var/www is absolute. But these AddIcons and IndexStyleSheet and HeaderName and ReadmeName and FooterName (not included in this example) are relative locations from /var/www so when you see /index-icons/ is actually /var/www/index-icons/. In bonus section I will show you how to download all these pngs and css files into the /var/www/index-icons/ folder. I will also provide with a download link of the files.

 Note: its fine if your missing some files like the HEADER.html and the FOOTER.html file. It will still load. By default those dont exist so its fine that they dont exist, they are optional

More info on HEADER and FOOTER file and where they go in the BONUS material below

2nd Step.

Add in the Include statements to your already working VirtualHost configs. Ill show you the before and after

Here is my Virtual Host config for HTTP (port 50132 instead of 80 for me, I wanted to be hidden) – ill show one for HTTPS (port 443) after this

We are just adding this line to the bottom of the virtual host section:

Before fancyedits was added in (the original file):

Now add the line, to the bottom of the very virtualhost section.

After the edit (I just added the “Include …” line at the bottom):

Also add a comment if you wish

Here is the final HTTPS one (not doing before and after with this as its big):

Now save and exit. If your running both http and https like myself, make sure to edit both default and default-ssl.

3rd step.

Confirm the configs are good:

NOTE: can also do the above with the “service” command or directly with the /etc/init.d/apache2 file or with systemctl (if your using systemd)

BONUS MATERIAL SECTION

This is where you will find variations to the above method. More information and also extra topic on robot.txt and how you can use it to stop search engines from snooping your stuff.

BONUS: If you want to set it up with .htaccess instead of include file.

So if you dont want to use include files. Then skip step1,2 and 3. And just make the following file
/var/www/.htaccess
Im assuming here that your web dir is /var/www

NOTE: all this can also be done with a .htaccess file. Simply put this in the .htaccess file:

BONUS: downloading all of the icons and css files

Here is all of the files that are being downloaded from fruitopology:

You can download them all with wget.

Make a file called /etc/apache2/frtlist.txt with the above content (the list of links)

That will download all of the links (pictures and css) to /var/www/index-icons/

Or just download them from here:

http://ram.kossboss.com/wp-content/uploads/2014/12/index-icons-fruitopology.tgz

Download with wget and extract like so if you want:

Here is the config file for fancyedits.conf if your pics and css are in /var/www/index-icons/ folder:

Here is the config file for htaccess if your pics and css are in /var/www/index-icons/ folder:

BONUS: Using the footer and header file to give more info (also make the background white instead of black)

you can also give more information to your files via /var/www/index-icons/HEADER.html and /var/www/index-icons/FOOTER.html (you have to create these files)

Ya I know its called index-icons and we are putting html and css files… who cares its just a folder name.

Because of these 2 lines in the fancyedits file:

Play around with what you want in the html of those 2 files. Start off with just text like “test-header” in header file and “test-foorter” in footer file.

The Header looks like this:

The Footer looks like this:

Notice how adding HEADER and FOOTER html, changed it from black background to white. Keep that in mind. It has to do with CSS files. Probably need to add it in to the HEADER and FOOTER if I want the black background back.

BONUS: robots file – Stop SearchEngines from Looking thru your files

dont want search engines looking thru your stuff and indexing your files and folders for people to randomly come across:

Add this robots.txt file on the root your indexing page
So for me my browsing starts here /var/www

So make this file /var/www/robots.txt
With this content:

NOTE ABOUT FILE PERMISSIONS: The key is to make sure that apache user or group has at least read access to the files. My robots file has 777 across the board. Its not like anyone can edit it via the Indexing program (its a read only thing)

One thought on “How make apache file browser / indexing prettier – also called FancyIndexing – BONUS – robots stopping search engines

Leave a Reply

Your email address will not be published. Required fields are marked *