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:
- The styling was very difficult to modify – it was nearly 3000 lines of CSS in a single file, with many duplicated colours and styles.
- 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.
- I rewrote the CSS using Tailwind CSS, because Tailwind is great.
- Tailwind’s generated CSS is automatically pruned using PurgeCSS as part of a PostCSS workflow to keep file sizes down.
- The layout looks roughly the same as before, but I’ve made a lot of small tweaks.
- Dark mode using the new
prefers-color-schememedia query and the Solarized colour scheme.
- The full FontAwesome icon set has been replaced with a custom font from IcoMoon that only contains the icons used in the website.
- Yes, I went a bit overboard with performance.
- I replaced the Fancybox lightbox with a customized Flickity implementation.
- This allows for nicer fullscreen interactions, image carousels, and best of all – no jQuery.
- I replaced the highlight.js client-side code syntax highlighting with Hugo’s compile-time highlighting.
- The theme now uses Hugo’s built-in bundling and minification for CSS and JS files.
- Image hosting+transformation+optimization is now handled by Cloudinary
- 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.
- Generated HTML is automatically formatted using Prettier.
- CSS is automatically linted using Stylelint.
- There are new shortcodes for images, email obfuscation, card elements…
- Site search is now done with DuckDuckGo instead of Google.
- The elaborate social sharing functionality has been removed, because my target audience is technical people who would rather just copy a URL.
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.