lkhrs.com Version 6

You know what the best thing a blog is for? Writing about changes to the blog.

New design

I created a new design for the site using SASS and Bootstrap. Hugo provides an official module to easily add Bootstrap to your site without the use of npm.

Home page screenshot

Using Bootstrap

I really enjoyed working with SASS and Bootstrap. The last time I used this combo was in 2012-2013, and it’s improved a lot since then.

There’s a bit of a learning curve when going from Tailwind to Bootstrap, because Tailwind provides a lot of responsive sizing classes, and Bootstrap doesn’t have anywhere near as much.

However, Bootstrap does come with RFS, which was originally made for resizing font sizes (hence the name), but now covers most unit values.

RFS is super cool, because it means I can worry a lot less about sizes across resolutions, whereas with Tailwind I had to set size classes for each breakpoint.

That said, there’s still going to be cases RFS doesn’t cover and you’ll have to either use Bootstrap’s built-in sizing classes for that specific property or write your own. I only had to manually set sizes for a handful of things though, whereas with Tailwind I was constantly toggling my browser’s responsive design mode and fixing sizes.

Dark mode was a real challenge with Bootstrap though - I had to do a lot of overrides.

Optimization

My favorite part!

There’s still a lot I need to do, but the big thing was optimizing Bootstrap.

CSS and JS

In development, I was originally looking at a 200kb CSS file, and now I’ve got it down to about 130kb by disabling some Bootstrap modules I don’t need.

MJJ6BGpS

In production though, after minification and Brotli compression, it’s a 16kb file. Much better!

71mS1MHa

My homepage weight went from 293.1kb to just 34kb, and that’s without PurgeCSS.

I couldn’t get PurgeCSS to work in deployment. For some reason on both CloudFlare Pages and Vercel, it runs but the output appears to be blank, as I’m left with a mostly empty CSS file. Building my site locally with hugo or hugo -e production gives me the correct file though, so I’m not sure what’s going on. I spent too many hours tweaking environment variables and other attempted fixes, so I’m going to leave it out for now. It only saved me about 3kb on this site though.

I disabled some JS modules too, and I’m really surprised at the 103kb -> 5kb size difference between development and production. I only use JS right now for the menu on mobile, and I plan on removing it entirely soon.

I’m debating on inlining my styles like Jim Nielsen did, but that’s a 16kb file that wouldn’t be cached by the browser on each page. Maybe it doesn’t matter at that file size, and I should just inline them anyway.

Images

The most frustrating part, and I still have a lot more time I need to spend on this. Currently I have Markdown images optimized in WebP format using Hugo’s render-image Markdown hook, but I’m not liking the output quality.

Next I need to optimize cover images on posts, and I want to do a DRY (Do not Repeat Yourself) setup, where both the render-image template and the cover image template use the same image processing logic. I’ve been struggling to find an existing setup like that in other Hugo themes.

New pages

I’ve added a /uses/ page to my site. I also want to add a few more pages:

The music page is something I’m super excited about.

Updated old content

I went through and cleaned up some WordPress formatting cruft on a lot of ancient posts I had, and did some tagging. This was a chore I’ve been putting off since I moved off of WordPress last year.