Static Assets Index Generator

---

| |

A lightweight, blazingly fast static site built with Astro that automatically generates beautiful, styled directory listings (similar to Nginx autoindex) for your local files.

Instead of relying on server-side modules to display directory structures, this project scans your asset folders at build time and generates static index.html files for every single directory and subdirectory.

✨ Features

• Zero JS by Default: Outputs pure, fast static HTML and CSS with minimal JavaScript.
• Recursive Scanning: Automatically discovers all subdirectories and generates indexes for them at build time.
• Smart Sorting: Folders are always listed first, followed by files. Both are sorted alphabetically with full locale/Unicode support for Chinese, French, and other languages.
• Breadcrumb Navigation: Easily trace back to parent directories or the root with intuitive navigation.
• File Type Indicators: Clear Material Design icons to distinguish between directories and files.
• Material Design 3 Theme: Modern dark theme with consistent design language.
• Static & Fast: Pre-rendered pages ensure lightning-fast load times and can be hosted anywhere.
• README Rendering: Automatically detect and render README files in the directory, and can be manually folded.

🛠️ Tech Stack

• Framework: Astro - The web framework for content-driven websites
• Runtime: pnpm / Node.js
• Build Logic: Node.js fs and path modules via getStaticPaths
• Styling: Custom CSS with Material Design 3 design tokens

🚀 Getting Started

Prerequisites

• Node.js 24+ (LTS recommended)
• pnpm (recommended) or npm/yarn

Installation

1. Clone the repository:

   git clone https://github.com/yonzilch/saig.git
   cd saig

2. Install dependencies:

   pnpm install

📦 Development & Build

Development Server

Run the development server for live preview with hot reloading:

pnpm dev

Note: The dev server will dynamically generate pages on the fly, which is great for previewing your styling and layout changes.

Adding Your Files

Important: All files you want to index must be placed inside the public/ directory. Astro treats files in public/ as static assets and copies them directly to the build output without processing them.

Simply move your folders (e.g. audio/, image/, video/, css/, js/ and so on) into the public/ folder:

saig/
├── public/
│   ├── audio/
│   │   ├── song1.mp3
│   │   └── song2.mp3
│   ├── image/
│   │   ├── avatar.avif
│   │   ├── avatar.jpg
│   │   └── avatar.webp
│   ├── video/
│   └── ...
└── src/
    └── ...

Production Build

Build the static site for production:

pnpm run build

This command will:

1. Scan the public/ directory recursively.
2. Generate index.html files for the root and every subdirectory (e.g., dist/image/index.html).
3. Copy all your actual assets into the dist/ folder.

The built site will be available in the dist/ directory.

🌐 Deployment

Once built, the dist/ folder contains your complete static website. You can serve it using any static file server:

• Nginx: Point your root directive to the dist/ directory.
• Caddy: Run caddy file-server --root dist
• GitHub Pages / Cloudflare Pages / Netlify: Set the build output directory to dist.
• Any Static Host: Upload the contents of dist/ to any static hosting service.

📁 Project Structure

saig/
├── public/                  # Your static assets (images, videos, etc.)
│   ├── audio/
│   ├── image/
│   └── video/
├── src/
│   ├── pages/
│   │   ├── [...path].astro  # Dynamic route for directory listings
│   │   └── index.astro      # Root page
│   └── styles/
│       └── global.css       # Global styles with Material Design 3
├── astro.config.mjs         # Astro configuration
├── package.json
├── README.md
└── ...

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Astro - For the amazing web framework
• Material Design - For the design system inspiration
• Nginx autoindex - For the original concept