Reilly Wood

I spent a few weeks in August rewriting this website, and as promised here are the deets. The source code is available here under the MIT license.

Background

When I initially put this website together in January 2018, I used Julio Pescador’s Hugo port of the Future Imperfect theme. I’d heard good things about Hugo, I wanted to write blog posts in Markdown, and it was a good-looking theme that required minimal additional setup. It served me well for over a year, but a few things kept bothering me:

1. The styling was very difficult to modify – it was nearly 3000 lines of CSS in a single file, with many duplicated colours and styles.
2. The theme relied on a lot of JavaScript libraries: jQuery, highlight.js, Fancybox, Skel…
   1. My simple static website was serving up hundreds of kilobytes of largely unnecessary scripts. As someone who grew up using a dialup modem, this offended me.

My goal was to rewrite the Hugo theme for extensibility and performance, and I figured it would take maybe a week. Of course, it took about 3 times that.

Major Changes

1. I rewrote the CSS using Tailwind CSS, because Tailwind is great.
   1. Tailwind’s generated CSS is automatically pruned using PurgeCSS as part of a PostCSS workflow to keep file sizes down.
   2. The layout looks roughly the same as before, but I’ve made a lot of small tweaks.
2. Dark mode using the new prefers-color-scheme media query and the Solarized colour scheme.
3. I rewrote the side-menu JavaScript because it used jQuery extensively.
4. The full FontAwesome icon set has been replaced with a custom font from IcoMoon that only contains the icons used in the website.
   1. Yes, I went a bit overboard with performance.
5. I replaced the Fancybox lightbox with a customized Flickity implementation.
   1. This allows for nicer fullscreen interactions, image carousels, and best of all – no jQuery.
6. I replaced the highlight.js client-side code syntax highlighting with Hugo’s compile-time highlighting.
7. The theme now uses Hugo’s built-in bundling and minification for CSS and JS files.
8. Image hosting+transformation+optimization is now handled by Cloudinary
   1. I strongly considered using Netlify Large Media, but the requirement to use Netlify for continuous deployment scared me away – I want to avoid vendor lock-in.
9. Generated HTML is automatically formatted using Prettier.
10. CSS is automatically linted using Stylelint.
11. There are new shortcodes for images, email obfuscation, card elements…
12. Site search is now done with DuckDuckGo instead of Google.
13. The elaborate social sharing functionality has been removed, because my target audience is technical people who would rather just copy a URL.

Inspiration

Tom MacWright’s explanation of how he optimized his personal website was a major inspiration, and Carlos Bueno’s Mature Optimization Handbook helped curb the worst of my tendency toward premature+unnecessary optimization. My former coworker Colin Bate helped with ideas – check out his Develop.cheap newsletter for great recommendations.