How this site is made

This site is plain HTML and CSS, generated by a build script of about a hundred lines. There's no framework. The source is on GitHub, and it's meant to be read.

The build. build.js reads Markdown from content/, passes it through templates that are ordinary JavaScript functions, and writes static files to dist/. A full build takes about a quarter of a second. The local dev server rebuilds on every save and reloads the page, using nothing but Node.

Dependencies. Five, all of them used only while building and none of them sent to your browser: marked for Markdown, plus its footnote and math extensions, KaTeX to turn math into HTML ahead of time, and yaml for the bits of metadata at the top of each file.

JavaScript. One small script, for fun: the tray in the bottom-right corner. In light mode the site is a whiteboard and you get markers; in dark mode it's a blackboard and you get chalk. Draw anywhere, and use the eraser on the handwritten notes in the margin if you disagree with them. Nothing is saved, so a refresh wipes the board. Until you pick something up, the script does nothing at all. The three stars in the homepage margins draw themselves as you scroll down (a few more lines of script), and without JavaScript they're simply already drawn. Everything else is HTML and CSS: the margin notes fold away behind a ✎ on small screens with a checkbox, not a script.

Speed. Pages are a few kilobytes. Images carry their dimensions, so nothing jumps around while they load. In browsers that support it, hovering a link starts loading the next page early (speculation rules), and moving between pages crossfades instead of flashing (view transitions).

Type. Headings are set in Fraunces, with its soft letters turned on. The margin notes are in my own handwriting, made into a font with handwrite, potrace and FontForge. Everything is self-hosted. Body text uses your system's own font, which costs nothing to download.

Analytics. Umami counts page views. It doesn't use cookies or follow you around the web.

Hosting. GitHub Pages, which serves this site the same way it served the Jekyll blog that came before it.