Skip to content
Darmawan Zulkifli

Colophon

How this site is built and why — a static Astro build, self-hosted variable fonts, Firestore counters, and no cookie banner.

10 Sept 2026 2 min read 422 words meta astro performance

This site is a working notebook. It has to load fast on a bad connection, be readable by a crawler without executing JavaScript, and stay cheap to publish to so that writing is never blocked by tooling.

The build

Everything is static. Astro renders every page to HTML at build time. There is no framework runtime at all — I started with React islands for the read counters and the ranked list on the stats page, then took them out when it became clear that rendering one number was costing 58 KB of gzipped JavaScript. Both are plain DOM now.

Most pages ship about 15 KB of JavaScript, nearly all of it Astro’s view transition router. Diagrams are the one exception: pages with a mermaid block pull the renderer in on demand, so the other ninety-odd percent of the site never pays for it. Every page is fully readable with scripting disabled.

Notes are MDX files in the repository. Publishing is a commit. There is no CMS, no database read on the request path, and nothing to log into — which means the friction between having a thought and publishing it is about thirty seconds.

Type

Three families, all self-hosted as latin-subset variable fonts:

FaceRole
Martian MonoData, labels, indices, code
ArchivoHeadings and interface
LiterataLong-form prose

Martian Mono has a width axis, so the same file gives condensed figures in tables and a wider cut for tracked labels. Self-hosting costs about 340 KB cached for a year, and removes a third-party connection from the critical path.

Counters

Read counts live in a single Firestore collection and are spoken to over the REST API — the Firebase SDK never reaches the browser either. A view is one atomic increment, guarded by security rules that permit exactly count + 1 and nothing else, and by a session flag so a reader who navigates back does not inflate the number.

If the write fails, the figure is simply omitted. A counter is not worth an error state.

What is not here

No third-party trackers. The one exception is Google Analytics, which does set its own first-party _ga cookies and runs with IP anonymisation — if that matters to you, a content blocker removes it and nothing on the page breaks.

No newsletter modal. No comment system — replies come by email, which filters for people who actually have something to say.