Fast, responsive, self-hosted image gallery. Ships ZERO JavaScript to the client.

Musée (pronounced myu-zay) is a self-hosted photo gallery that ships ZERO client-side JavaScript — and still keeps a true masonry layout with correct horizontal ordering, fully responsive, working even with JS disabled.

The trick: Astro pre-computes the column distribution for every breakpoint at build time, and CSS media queries swap between the pre-rendered layouts. Even the animations are pure CSS. (It started life as a Remix experiment, then got rewritten on Astro — replacing the excellent but Ruby-bound waschinski/photo-stream I used to run.)

[ Live Demo ]

• Zero JavaScript sent to clients
• True masonry layout with horizontal ordering
• Generate image thumbnails
• Compress original images
• Strip image metadata before deployment
• Typescript support
• Statically Generated
• Uses TailwindCSS
• OpenGraph meta tags
• CSS-only animations
• Works with JavaScript disabled
• Captions for images
• Device metadata for images
• Image geo-tag map generation

• gallery.obviy.us
• tarun.photos

Feel free to make a PR to add your own.

1. Install dependencies.

$ bun install

Load your images in the src/assets/images/original directory.

2. Start development server

$ bun run dev

src/assets/images/original/ is gitignored. Keep personal images there, build locally, and push only code changes.

Recovered images named slug__filename.webp keep slug as the public route. Other images get generated stable slugs.

Deployment (for now) is done to Cloudflare Pages. Documentation is available here: https://developers.cloudflare.com/pages/framework-guides/astro/

$ bun run deploy:personal

Musée achieves zero JavaScript by:

• Pre-calculating masonry column distributions at build time for each breakpoint
• Using CSS media queries to show/hide the appropriate pre-rendered layout
• Replacing React components with Astro components
• Moving all date calculations to build time
• Using pure CSS animations instead of JavaScript libraries

Any and all contributions are welcome.

This repository uses the automated semantic-release suite of tools to generate version numbers. All commit messages must conform to the Angular Commit Message conventions.