Photobox

A static site script that generates web albums from directories of images and videos. Built with 11ty.

Local setup

Open siteData-example.json, save as siteData.json. Edit the properties with your information. theme can be set to light, dark, or system.
Run npm install
For video processing, confirm you have homebrew installed, and use it to install ffmpeg via brew install ffmpeg.

Add folders of images to src/album-assets/, where each folder follows the YYYY-MM-DD-Album-Name format (there are some examples in the repo).
Export your images to these folders as high-resolution JPGs. Images are output in alphabetical order, so YYYY-MM-DD-HH-MM-SS.jpg gives you the most reliable sorting by original capture time. Exiftool and a shell script are useful here if your local photo software doesn't give you enough flexibility.
Within an album, you can insert text headings wherever you want. These require a YYYY-MM-DD- prefix: a file named 2020-05-01-Hiking-in-the-Alps.txt will render as a Hiking in the Alps heading (and a jump link) just above the images/videos that follow it alphabetically. You can also add secondary text in the contents of the text file.
To hide an album from the sidebar navigation, include -[hidden] at the end of your album directory title.
If you've included .mov files in your albums, run npm run video to process those videos into 720p files. This may take a while.
Run npm run start to view your site at http://localhost:3000. Note that the first run with many albums may take a long time to build, since 11ty's image plugin needs to generate 3 optimized files for every original.

Run npm run build to generate the site pages and optimized images.
To build the site files and process videos, run npm run build-all.
Your site builds to the /dist directory. You can then sFTP the contents to your web server, or use rsync via npm deploy. If the latter, store your deploy path in an .npmrc like this:

deploy_path = [email protected]:/var/www/photos.example.com/html/