This page summarizes how I built this site. I wrote it in a declarative style similar to how I would write an AI prompt. While I did use AI in planning the site architecture and implementing some JavaScript, I did not use it for writing this article.

Philosophy

The website should be clean and fit for purpose. Avoid trendy frameworks like React, which would be overkill here. Any JavaScript should progressively enhance the site (i.e., the site should work without JavaScript, but feel free to optimize if JavaScript is enabled). Do not over-engineer or over-design. The site should be able to host my photos, their metadata, and occasional articles.

I am open to static site generators. This site uses Hugo to build. I previously used Astro, but for one person it doesn’t make sense (Astro is better for mutliple or non-technical contributors).

Technology

Prefer open source software and plain old HTML and CSS. Minimize JavaScript. Use Python scripts and AI to format and extract metadata from my photos—sharp for generating multiple sizes, ExifTool for aperture and shutter speed data, and AI image understanding for my photosʼ alt-text (TODO: group photos by tags and display metadata in a gallery view).

Original photoProcessingStorageHugo(this site)sharp(resize)ExifToolAI ImageunderstandingR2SQLite800w.webp1920w.webpmetadataalt text

Store the image metadata in SQLite. Export it to JSON for Hugo to easily ingest. Use D2 for the diagram. Keep text content in Org (.org) format, not Markdown (.md).

I chose SQLite instead of manually editing the JSON files in case I want to add metadata fields later. I prefer Org to Markdown because Markdown cannnot agree on one spec, whereas Org has one, time-tested standard (and I use Emacs).

Gallery implementation

Laziy load the thumbnails just outside of the viewport as the user scrolls right. Use the browser’s sessionStorage to remember the scroll position when a user clicks on an image (so they are returned to the same spot in the gallery when clicking the back button).

Deployment and analytics

Host the site on Fly.io. Use Cloudflare for photos (R2 bucket) and CDN to distribute the site. Parse the server-side logs for anonymous analytics; do not use client-side or JavaScript to track visitors.

Design

Land somewhere between motherf—ing website and better motherf—ing website. I.e., give it just enough CSS not to bore the reader but not too much to distract them, either. Add a touch of green in a nod to Hawaii, where I spent some happy years.

Use tasteful system fonts; do not download external ones. The site should load fast and look reasonably good.