Moving a one-page site to Hugo without losing its calm

For a long time this site was a single HTML file. That was fine until I wanted a second page — and then a third.

Why Hugo

I wanted something that would still build in ten years. Hugo is a single binary, has no dependency tree to rot, and renders the whole site in milliseconds.

no node_modules
templates are plain HTML with a little logic
content stays in Markdown files I can read anywhere

Keeping the design intact

The original page had grown three layers of overrides fighting each other. Before moving anything, I collapsed them into a single set of design tokens:

:root {
  --bg: #161616;
  --ink: #ececec;
  --muted: #8f8f8f;
  --accent: #e9a46a;
}

Every colour on the site now comes from those few lines.

One accent, chosen by the reader

The accent colour is a CSS custom property. A tiny inline script applies the reader’s saved choice before the first paint, so there is no flash of the default colour.

What I’d do differently

Start with the content model, not the templates.

I rewrote the project front matter twice before it felt right. Deciding which fields exist — and which don’t — is most of the work.

Light mode, maybe. Or maybe not.

Why Hugo

Keeping the design intact

One accent, chosen by the reader

What I’d do differently

Next