Colophon

This page covers the nuts and bolts of how the site works. People often ask what stack I use, so here’s the full setup.

The site is generated with Jekyll and served from a VPS at Hetzner. The theme is hand-rolled, lightweight, and built for fast builds and minimal overhead. Traffic is routed through Bunny CDN which handles global caching and keeps latency low.

Table of contents

Build workflow

All content is written locally using my own home-grown CMS, Hyde. Once I’m happy with a post, I trigger a build script that handles the full deployment workflow:

  1. Fetches post statistics from Mastodon
  2. Syncs the source code to a private repo on GitHub as a backup
  3. Builds the site using Jekyll
  4. Pushes the new build to the server via SFTP
  5. Clears the Bunny CDN cache so new content is served instantly

Here’s a diagram of what the architecture of my setup looks like (I know, I’m fantastic at art):

colophon diagram

Why I built my own CMS, Hyde

Hyde started as a small experiment to make writing posts easier. I wanted a local tool that let me focus on the content without juggling front matter, filenames, and image handling. It grew into a simple CMS that fits the way I work. It is not fancy, but it means I can write, organise, and publish quickly, which is exactly what I need.

Here’s a demo of Hyde in action:

Performance philosophy

I prefer to keep this site as fast and lightweight as possible. That is one of the main reasons I use a static site generator. Pages are simple HTML with minimal JavaScript, images are optimised before publishing, and the layout stays intentionally clean so the browser has very little work to do.

The goal is a site that loads quickly everywhere and does not get in your way as you read.

Design

The design of this site has evolved a lot over the years. I enjoy tweaking and improving it, and being nostalgic, I’ve kept a full design history for anyone who wants to see how things have changed.

The goal of the current design is a mostly brutalist look with a hint of whimsy to keep things interesting. I like the simplicity of the layout. There are a few features here and there to help readers, but I try to keep the focus firmly on the content.

Design choices

No website is completely unique. Every design draws inspiration from things the creator has seen, whether that’s deliberate or not. This site is no different.

The font stack uses General Sans as the primary typeface, followed by a local fallback stack from Modern Font Stacks using the Neo-Grotesque set.

The colour palette for the light theme is my own creation, and I think it works well with the overall look and feel of the site:

  - #2A2A2A

  - #D3D3D3

  - #FAFAFA

  - #EEEEEE

  - #0D47A1

  - #E3F2FD

  - #FFB84D

  - #90CAF9

  - #B71C1C

  - #FFEBEE

  - #1B5E20

  - #E8F5E9

  - #4A148C

  - #F3E5F5

For dark mode, I use the Nord theme (thanks to Pete Moore for the recommendation). The palette provides a clean, calm contrast to the light version:

  - #D8DEE9

  - #2E3440

  - #88C0D0

  - #1B222C

  - #3B4252

  - #434C5E

  - #DCEFF8

  - #4C566A

  - #B84A58

  - #2A1B1D

  - #A3BE8C

  - #202D20

  - #B48EAD

  - #2B2230