Colophon

Updated

This page gives an overview of all the tools and technologies behind this website. If you’d like to know why I built it, I wrote a blog post all about that.

It’s liberating to write blog content in Markdown.
It’s liberating to write blog content in Markdown.

Content management

This website is generated using the static site generator Hugo. This means I get to write my posts in flat files - in Markdown - and store them alongside my images. All my content is neatly organised in Git, which I store in a private Github repository (private because of my draft posts).

I then run hugo and it applies my templates to the content and spits out a fully formed website. It also automatically resizes my images based on how the images are used in my content.

With this setup, I get to use the command line to build and publish, and I get to change and control absolutely every line of code that gets published. This all makes my little heart very happy.

The gallery is just another content type with its own specialised display templates. If you want all the juicy details, I wrote a blog post about how I built it.

Design & styles

For my Hugo templates, I wanted to take a mostly purist approach without big bloaty frameworks. I’ve used semantic HTML and native CSS, with Erik Meyer’s CSS Reset as a baseline. I’ve tried to use as few classes as possible (partly as a rebellion against my first version of the site, which used BEM and therefore had an obscene amount of classes).

Syntax highlighting uses Catppuccin Latte and Frappe for Chroma.

GLightbox provides the lightboxes. It’s very simple to set up and works wonderfully for my purposes. Crucially, it’s written in native JS.

Front-end isn’t my dev specialism, but it’s fun to tinker with it - like the old days of the web!

Typefaces

The main text of the site is Turnip by David Jonathan Ross. Isn’t it great?

Icons

The majority of the icons around the site, including the scissors in the logo (✄), are Unicode characters. The Instagram, Ravelry and RSS logos in the footer are no-attributions SVGs.

Tooling

  • Languages: Markdown, TOML, Go for Hugo templating, raw HTML, raw JS, CSS with SASS, and a handful of bash scripts. Keeping it simple!
  • Static site generator: Hugo.
  • Webhost: Krystal. I picked them because they’re UK based and seem like good people.
  • Repo: GitHub (images in LFS).
  • Deployment: Manually triggered from the command line, using rsync via bash scripts.
  • IDE: Either Webstorm or vim depending on the context.
  • Analytics: GoatCounter, who are privacy-friendly.