Skip to content
My home on the world wide web.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

This website runs on Jekyll. Here are some things that I've slowly built-out that might also help you.

Running the thing

  1. Clone the repo
  2. Install Jekyll
  3. cd into the repo
  4. Run bundle exec jekyll serve


Things I've added onto or tweaked from the standard Jekyll theme, layouts, includes, etc.

Image optimisation

I'm using ImageKit to host all my images and video. There are more hoops than simply putting them in an assets folder on this repo, but the advantages make it worth the effort:

  • Faster Jekyll build times as the largest files are just referenced
  • Images and video can be stored at full-resolution and then served dynamically (e.g. 80% quality, max-width 1800px for desktop)

Navigation item selection

Source. An item from the top-most <header><nav></nav></header> will be dimmed if that item's page is active. E.g. if the '/notes' page is active, then the 'Notes' navigation item will be dimmed.

I built this out 'dumb' as some of the other options are a bit heavy-handed.

Email encoding

Source. I use to display my real email address whilst also making it difficult for bots to scrape. Not sure how it works—I'll guess I'll keep an eye on the spam levels.

Open Graph smartness

Source. Takes the leg-work out of nicely-formatted Twitter, iMessage, or Facebook shares from your website. The jekyll-seo plugin is a little too basic for my needs.

Prettify URL slugs

Source. Removes the post date from the URL. E.g. becomes

Extensive favicon format

Source. A lightweight format that covers most browser and OS implementations and formats.

Responsive iframe elements

Source. Simple styling 'normalisers' for embeds from Vimeo, YouTube, Twitter, etc.

Custom 404 page

Source. Use existing post layout for a nicer 404 page. Example.

Lazy-loaded images

Source. Get your non-essential images to load only when scrolled-to. I'm using lzy.js, and then ImageKit to do some fancier progressive-enhancement.

Variable fonts

Source. I'm currently using the lovely Inter typeface by Rasmus Andersson.

You can’t perform that action at this time.