Skip to content
A πŸ“± responsive theme for Nginx Fancyindex module πŸ”§. Minimal, modern and simple. β˜€ Light & 😎 Dark themes. Comes with a search form πŸ”Ž, aims to handle thousands of files without any problems πŸ“‚
CSS HTML JavaScript
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.


Type Name Latest commit message Commit time
Failed to load latest commit information.
Nginx-Fancyindex-Theme-dark Should fix #12 May 1, 2018
Nginx-Fancyindex-Theme-light Should fix #12 May 1, 2018
screenshots Done Feb 9, 2018
.gitignore Done Feb 9, 2018 Added examples, a LICENSE.txt, and a better file. Jun 28, 2016
LICENSE Better: include this old version of jquery locally ... Mar 6, 2017 Update May 29, 2018
_config.yml Better: include this old version of jquery locally ... Mar 6, 2017
fancyindex.conf Fix #10 Mar 19, 2018


A responsive theme for Nginx Fancyindex module. Minimal, modern and simple. Comes with a search form, aims to handle thousands of files without any problems.

The fancyindex module can be found here (by @aperezdc).


Demonstration of the Light theme:

Demo #5


  1. Make sure you have the fancyindex module compiled with nginx, either by compiling it yourself or installing nginx via the full distribution (paquet nginx-extras).
  2. Include the content of fancyindex.conf in your location directive (location / {.....}) in your nginx config (usually nginx.conf).
  3. Move the Nginx-Fancyindex-Theme-light/ and/or Nginx-Fancyindex-Theme-dark/ folder to the root of the site directory.
  4. Restart/reload nginx.
  5. Check that it's working, and enjoy!
  6. A new feature is the automatic inclusion of and file from the current directory (if any), as shown in the example above. It uses JQuery and ShowDown.js, it is not so cleanly written but it works perfectly! I wanted this feature as I have it for Apache (see this project).


A standard config looks something like this (use -light for the default light theme, or -dark for a dark theme):

fancyindex on;
fancyindex_localtime on;
fancyindex_exact_size off;
# Specify the path to the header.html and foother.html files, that are server-wise,
# ie served from root of the website. Remove the leading '/' otherwise.
fancyindex_header "/Nginx-Fancyindex-Theme-light/header.html";
fancyindex_footer "/Nginx-Fancyindex-Theme-light/footer.html";
# Ignored files will not show up in the directory listing, but will still be public.
fancyindex_ignore "examplefile.html";
# Making sure folder where these files are do not show up in the listing.
fancyindex_ignore "Nginx-Fancyindex-Theme-light";
# Maximum file name length in bytes, change as you like.
# Warning: if you use an old version of ngx-fancyindex, comment the last line if you
# encounter a bug. See
fancyindex_name_length 255;

If you want to conserve a few more bytes in network transmissions enable gzip on the served assets.

# Enable gzip compression.
  gzip on;

  # Compression level (1-9).
  # 5 is a perfect compromise between size and CPU usage, offering about
  # 75% reduction for most ASCII files (almost identical to level 9).
  gzip_comp_level    5;

  # Don't compress anything that's already small and unlikely to shrink much
  # if at all (the default is 20 bytes, which is bad as that usually leads to
  # larger files after gzipping).
  gzip_min_length    256;

  # Compress data even for clients that are connecting to us via proxies,
  # identified by the "Via" header (required for CloudFront).
  gzip_proxied       any;

  # Tell proxies to cache both the gzipped and regular version of a resource
  # whenever the client's Accept-Encoding capabilities header varies;
  # Avoids the issue where a non-gzip capable client (which is extremely rare
  # today) would display gibberish if their proxy gave them the gzipped version.
  gzip_vary          on;

  # Compress all output labeled with one of the following MIME-types.
  # text/html is always compressed by gzip module

  # This should be turned on if you are going to have pre-compressed copies (.gz) of
  # static files available. If not it should be left off as it will cause extra I/O
  # for the check. It is best if you enable this in a location{} block for
  # a specific directory, or on an individual server{} level.
  # gzip_static on;

Reference: H5BP Nginx Server Config


Showing a list of files (without search):

Demo #2

Filter a list of files (with search):

Demo #1

Filter a list of directories (with search):

Demo #3

Filter a list of directories (with search) -- Dark theme:

It also shows the automatic inclusion of file and file.

Demo #4

Include HEADER and README files automatically:

Another demo:

Demo #6

πŸ“œ License ? GitHub license

MIT Licensed (file LICENSE). Β© Lilian Besson, 2016-18.

Maintenance Ask Me Anything ! Analytics

ForTheBadge built-with-swag ForTheBadge uses-js ForTheBadge uses-html ForTheBadge uses-css ForTheBadge uses-badges ForTheBadge uses-git

You can’t perform that action at this time.