Apache File Directory

The basic Apache file directory page, as a simple HTML page.

Key Features • Download • How To Use • Support • Contributing • Changelog • Credits & Contributors

Key Features

• Basic file directory view.
• Name, modified date, size and description fields.
• Folder and file links.
• Icons for folders, links, text files, compressed files and unknown files.
• Compatible with all web servers and websites.
• Cross platform.

Download

You can download the source code to modify the code and create your own file directory page.

You can also access the production version the website, available on all platforms, here.

How To Use

To clone and run this website, you'll need Git installed on your computer. If you would rather not use Git, you can just download the code from GitHub above. From your command line:

# Clone this repository
$ git clone https://github.com/willtheorangeguy/Apache-File-Directory.git

# Go into the repository
$ cd Apache-File-Directory

# Run the webpage
$ index.html

You can also pull the Docker image from GitHub Packages. From your command line:

# Pull image
$ docker pull ghcr.io/willtheorangeguy/apache-file-directory:main

# Run container
$ docker run -d -p 8000:80 ghcr.io/willtheorangeguy/apache-file-directory:main

# Now, navigate to localhost in your browser to see the webpage

However, if you want to edit the file directory and make it your own, follow the steps below:

Basics

1. Line 6: Update the directory placeholder text between the <title> tags with the actual directory name. This will be the title of the webpage.

<title>Index of /directory</title>

2. Line 12: If this is a directory inside of another directory, remove the comments (<!-- and -->).

<!--<tr><td valign="top"><img src="icons/back.gif" alt="[PARENTDIR]"></td><td><a href="../">Parent Directory</a></td><td>&nbsp;</td><td align="right">&nbsp;</td><td>&nbsp;</td></tr>-->

3. Line 12, Column 88: Change the ../ with the actual link to the folder above, or leave it as ../ to use a relative path rather than an absolute one.

<tr>
  <td valign="top"><img src="icons/back.gif" alt="[PARENTDIR]" /></td>
  <td><a href="../">Parent Directory</a></td>
  <td>&nbsp;</td>
  <td align="right">&nbsp;</td>
  <td>&nbsp;</td>
</tr>

4. When you have customized the title, and added folder and file listings following the tutorials below, save the files and upload them to your web server.
5. You're all set!

Adding Folders

<tr>
  <td valign="top"><img src="icons/folder.gif" alt="[DIR]" /></td>
  <td><a href="folder/">folder</a></td>
  <td align="right">YYYY-MM-DD HH:MM</td>
  <td align="right">-</td>
  <td>&nbsp;</td>
</tr>

• Replace the folder placeholder value (between the <a>...</a> tags) with the real name of the folder.
• Replace the folder/ (between the href="..." tag) link with the actual link to the folder.
• Replace the YYYY-MM-DD HH:MM placeholder date with the date the folder was last modified. Leave the space behind the date!
• Replace the - placeholder with the the size of the folder.
• Replace the   placeholder with a description if you would like, or leave it as it is to just show a blank space.
• Add more of these rows as necessary.

Adding Files

This tutorial shows how to add basic file listings to the Apache File Directory page, but you can also add links, compressed files and unknown files. See the Support section below to add these!

<tr>
  <td valign="top"><img src="icons/text.gif" alt="[TXT]" /></td>
  <td><a href="text.txt">Textfile.txt</a></td>
  <td align="right">YYYY-MM-DD HH:MM</td>
  <td align="right">1.10K</td>
  <td>&nbsp;</td>
</tr>

• Replace the Textfile.txt placeholder value (between the <a>...</a> tags) with the real name and file extension of the file.
• Replace the text.txt link (between the href="..." tag) with the actual link to the file.
• Replace the YYYY-MM-DD HH:MM placeholder date with the date the file was last modified. Leave the space behind the date!
• Replace the 1.10K placeholder with the the size of the file.
• Replace the   placeholder with a description if you would like, or just leave it as it is to just show a blank space.
• Add more of these rows as necessary.

Support

Further customization options for different types of files and folder structures can be found in CUSTOMIZATION. More documentation is available in the Documentation and on the Wiki. If more support is required, please open a GitHub Discussion or join our Discord.

Contributing

Please contribute using GitHub Flow. Create a branch, add commits, and open a pull request.

Please read CONTRIBUTING for details on our CODE OF CONDUCT, and the process for submitting pull requests to us.

Changelog

See the CHANGELOG file for details.

Credits

This software uses the following open source packages, projects, services or websites:

GitHub	W3C	W3Schools	Apache
Web - Plans	Web - Donate	Web - Pro	Web - Donate

Contributors

• @willtheorangeguy - Sponsor on PayPal

You may also like...

• Running Calculator - A running speed calculator for any unit of distance.
• PyWorkout - A minimal CLI to keep you inspired during your workout! Easily used and customized, with support for multiple workout plans, different muscle groups and video workouts.
• PyAvatar - Easily display all of your creative avatars to keep them consistent across websites.

License

The website code in this repository is created by the Apache HTTP Server Development Team and owned by the Apache Software Foundation. The HTTP server is released under the Apache License 2.0, and this project follows those licensing guidelines.

This project is licensed under the Apache License 2.0 - see the LICENSE file for details. See the Privacy Policy and Terms and Conditions for legal information.