S3 + CloudFront Directory Browser for Open Source Developers

Apache-style directory browsing for Amazon S3 folders served through CloudFront.

This project exists for people who want the beautiful old-web workflow:

Upload a file → refresh the folder URL → the file appears

No VPS. No Apache server. No cron job. No generated index.html pages. No static-site generator required.

This is especially useful for beginners, unemployed people learning AI/open-source software development, indie builders, teachers, students, and anyone who needs a simple public file drop while learning AWS fundamentals.

What it gives you

A public URL like this:

https://8k.art/beta/

can automatically display files from:

s3://www.8k.art/beta/

The generated page includes:

• Apache-like directory listing
• Parent Directory link
• folders and files
• file sizes
• last modified dates
• clickable sort headers
• file/folder icons
• long filenames without truncation
• SEO-friendly trailing-slash redirects
• robots/canonical metadata
• a footer explaining that the files are hosted on Amazon S3 and delivered through CloudFront

Live examples

https://8k.art/beta/
https://8k.art/_docs/
https://8k.press/images/

Files in this starter kit

8k-art-directory-browser.txt                         Public copy / readable source
lambda-edge-directory-browser/index.mjs              Lambda@Edge directory browser
cloudfront-function-headers/allow-all-cors-and-inline-text.js
                                                     Optional CloudFront Function for UTF-8/CORS/source display
policies/lambda-edge-trust-policy.json               Trust policy example
policies/s3-list-prefix-policy-example.json           S3 ListBucket policy example
QUICKSTART-FOR-BEGINNERS.html                           Step-by-step beginner setup
DEPLOYMENT-CHECKLIST.html                               Deployment checklist
TROUBLESHOOTING.html                                    Common fixes
LICENSE.txt                                           MIT license

The two pieces

1. Lambda@Edge directory browser

This runs on the CloudFront Origin Request event.

It detects approved folder URLs such as /beta/, calls Amazon S3 ListObjectsV2, and returns an HTML directory listing.

2. Optional CloudFront Function for headers

This runs on the CloudFront Viewer Response event.

It helps browsers display source files inline, for example:

.php -> text/plain; charset=utf-8
.md  -> text/markdown; charset=utf-8

It also adds CORS and UTF-8 headers.

Beginner mental model

Think of Amazon S3 as a giant folder full of files.

Think of CloudFront as the fast public front door.

Think of Lambda@Edge as a tiny helper that says:

> “If someone asks for a folder, I will ask Amazon S3 what is inside and draw a nice directory page.”

Configuration

Open lambda-edge-directory-browser/index.mjs and edit this block:

const BROWSABLE_PREFIX_CONFIGS = [
    {
        prefix: "beta/",
        bucket: "www.8k.art"
    },
    {
        prefix: "_docs/",
        bucket: "www.8k.art"
    },
    {
        prefix: "images/",
        bucket: "www.8k.press"
    }
];

Each entry means:

Public URL folder prefix → Amazon S3 bucket

Example:

{
    prefix: "downloads/",
    bucket: "my-public-bucket"
}

means:

https://your-site.example/downloads/

lists:

s3://my-public-bucket/downloads/

Why this is useful for open source work

Open source projects often need a place for:

• beta builds
• nightly builds
• examples
• screenshots
• documentation
• changelogs
• helper scripts
• AI model notes
• research artifacts
• ZIP archives
• public work-in-progress folders

A traditional Apache VPS can browse folders automatically. Amazon S3 cannot do that by itself through CloudFront. This project gives you the missing piece.

Safety

Only add prefixes you want the public to browse.

This project intentionally uses an allow-list. It will not browse your entire bucket unless you explicitly configure it that way.

License

MIT. Use it. Adapt it. Teach with it. Improve it.