The Palos Publishing Company

Follow Us On The X Platform @PalosPublishing
Categories We Write About

Auto-generate index pages for folders

Written by

Bernardo Palos

in

Auto-generating index pages for folders is useful for improving navigation, SEO, and user experience on a website. Below is a guide to help you automatically generate index.html pages (or similar) for folders using different approaches depending on your environment.

1. Using Node.js Script (Dynamic Web Project)

You can use a simple Node.js script to traverse folders and generate index.html files.

Step-by-Step:

Install required packages:

bash
npm init -y
npm install fs path

Create generateIndex.js:

js
const fs = require('fs');
const path = require('path');

function generateIndex(dir) {
  const files = fs.readdirSync(dir, { withFileTypes: true });

  let html = `<html><head><title>Index of ${dir}</title></head><body>`;
  html += `<h1>Index of ${dir}</h1><ul>`;

  files.forEach(file => {
    const name = file.name;
    const url = encodeURIComponent(name);
    if (file.isDirectory()) {
      html += `<li><a href="${url}/">${name}/</a></li>`;
      generateIndex(path.join(dir, name)); // recurse
    } else if (name !== 'index.html') {
      html += `<li><a href="${url}">${name}</a></li>`;
    }
  });

  html += `</ul></body></html>`;

  fs.writeFileSync(path.join(dir, 'index.html'), html);
}

const rootDir = path.resolve(__dirname, 'your-folder-path'); // Update this
generateIndex(rootDir);

Run the script:

bash
node generateIndex.js

2. Using Python Script (For Static Site Projects)

Python is ideal for batch generation of index files in folder structures.

python
import os

def generate_index(directory):
    items = os.listdir(directory)
    items.sort()
    lines = [f"<h1>Index of {directory}</h1><ul>"]

    for item in items:
        if item == 'index.html':
            continue
        item_path = os.path.join(directory, item)
        if os.path.isdir(item_path):
            lines.append(f'<li><a href="{item}/">{item}/</a></li>')
            generate_index(item_path)
        else:
            lines.append(f'<li><a href="{item}">{item}</a></li>')
    lines.append("</ul>")

    with open(os.path.join(directory, 'index.html'), 'w') as f:
        f.write("n".join(lines))

root = 'your-folder-path'  # Update this path
generate_index(root)

3. Nginx Autoindex (Server-Side Approach)

If you’re serving content using Nginx, you can enable directory listing:

Update Nginx config:

nginx
location / {
    autoindex on;
    autoindex_exact_size off;
    autoindex_localtime on;
}

Reload Nginx:

bash
sudo systemctl reload nginx

This will serve automatic indexes without the need to generate HTML files manually.

4. Bash Script (For Linux/Unix Systems)

For quick static sites, this bash script will do:

bash
#!/bin/bash

generate_index() {
  local dir="$1"
  echo "<html><body><h1>Index of $dir</h1><ul>" > "$dir/index.html"
  for item in "$dir"/*; do
    [ "$item" = "$dir/index.html" ] && continue
    name=$(basename "$item")
    if [ -d "$item" ]; then
      echo "<li><a href="$name/">$name/</a></li>" >> "$dir/index.html"
      generate_index "$item"
    else
      echo "<li><a href="$name">$name</a></li>" >> "$dir/index.html"
    fi
  done
  echo "</ul></body></html>" >> "$dir/index.html"
}

generate_index "./your-folder-path"

Make it executable and run:

bash
chmod +x generate_index.sh
./generate_index.sh

5. Tools and CMS Plugins

  • Static Site Generators (SSGs) like Jekyll, Hugo, or Eleventy often support index page generation natively.

  • CMS platforms (like WordPress) may allow directory listing through plugins or custom themes.

  • Webpack/Gulp can automate this with plugins like directory-tree.

Best Practices for Index Pages

  • Use meaningful titles and headings.

  • Group content logically (files, subfolders).

  • Add breadcrumb navigation for deep hierarchies.

  • Use relative links to ensure portability.

  • Add metadata for SEO (title, description).

  • Avoid exposing sensitive directories.

By using one of these methods, you can efficiently auto-generate index pages tailored to your environment—whether static, dynamic, or server-rendered.

Share this Page your favorite way: Click any app below to share.
See all the ways to share this page

Enter your email below to join The Palos Publishing Company Email List

We respect your email privacy

Check Out Our Newest Posts we wrote about

Categories We Write About