This website

Since 2006 I’ve had a personal website; though I think I’ve spent 10x as much time writing blog engines or themes as I have writing blog posts! It took me a long time to settle on a platform where I feel I can be productive without having to fiddle around too much with content management.

Technology

This hugo powered website is optimised to load lightning fast using:

• a bs4 + tinycss2 based script to inline CSS/JS + tree-shake CSS and substitute class names
• a selenium script to annotate images below the fold for lazy-loading
• html-minifier (which uses clean-css and UglifyJS)
• optipng, jpegoptim and svgo for originals
• webp images
• no frameworks
• caching rules
• a global CDN + static host

I write articles with neovim, validate with VNU validator, spellcheck with typos, lint with eslint, stylelint and proselint. All automatic, of course.

Theme features

• Audio player
• Video player
• Highly responsive blog cards
• Featured star system
• Hero cover images
• HTML and PDF optimised CV generation
• Image scaling and compression (webp/jpg)
• Gallery support
• Tag intersection system
• First-class code embed highlighting/download support
• Active table of contents
• Fully responsive design, with focus on typography and readability
• Horizontal nav bar, panning support for mobile
• Article GUIDs RSS feed articles for persistent IDs
• Nix derivation for reproducible builds
• Automatic slug synchronisation from title, with redirect resolution

Post-processor features

• Audio player spectrogram + waveform generation
• Video player automatic poster generation
• Automatic relocation of footnotes to end of section
• Single page bundling, tree shaking, and minification
• Automatic below-the-fold lazy loading
• 400% A+ score on Google Lighthouse
• Automatic image metadata cleaning
• Video/audio codec validation
• Broken link checking (internal always, external on demand)
• Linting of spelling/grammar
• Header linking
• Validation of HTML/CSS/JS
• LaTeX maths rendering
• Automatic inlining of images based on heuristics (SVG and rasterised)

My CV is generated from a YAML template using Hugo and LaTeX with Jinja2. Optimised for file size with ghostscript, cleaned with exiftool and qpdf.

This website and CV is built as a nix derivation.¹

How I blog

1. Set main headers/sections
2. Collect photos and screenshots, often using the favorites feature on iOS
3. Automatically insert them into the article with a script²
4. Organise images to sections
5. Write a section at a time, any order

• I try to tell a story
• I use a lot of multimedia (images, video, audio)³
• I try not to indulge every rabbit hole, instead linking out to other articles
• I keep tangents or comments within footnotes
• I make heavy use of validators and linters to keep the quality high
• I tend to write 5mins to 1hr a day, for a week or so for a typical article⁴
• I try to make the articles easy to replicate so they’re useful to others
• I follow POSSE principles (publish on your own site, syndicate elsewhere)

History

• 2005-2006: Microsoft Frontpage based self-hosted, hosted from ADSL
• 2007: Dreamweaver / PHP based custom websites, hosted from ADSL
• 2007-2009: PHP based custom websites written with Geany, hosted from ADSL
• 2012-2016: Custom SPA blog engine with client-side markdown parsing. Bad for SEO! Hosted on a VM.
• 2016-2017: Ghost with default theme, hosted on a VM. Supplementary aggregator to mix blog posts from multiple sources.
• 2017-2019: Hugo with default Ananke theme, hosted on a VM
• 2019-2020: Hugo with Mediumish theme, heavily stripped back, hosted on a VM

Since 2020, this website is made from scratch with hugo with a focus on typography, quality UX and SEO. Anything off-the-shelf or modified never quite felt right.

Projects

Writing a blog post is a great way of finishing a project. It forces me to conclude, limit scope and have something to show for it.

I publish when I feel I have innovated, solved a problem or spent time trying to understand something.