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.
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
- 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.
It’s optimised to load lightning fast using:
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 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.
Phew! That was dense technobabble!
- Set main headers/sections
- Collect photos and screenshots, often using the favorites feature on iOS
- Automatically insert them into the article with a script
- Organise images to sections
- 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