Cachebuster

Posted on: 20th March 2021

I have been mucking around in my stylesheet a lot. Though Firefox has been kind enough to load the new style after two or three refresh, Webkit based Qutebrowser/Nyxt aren’t that understanding. They really love my nginx expiry settings.

# Expires map
map $sent_http_content_type $expires {
	default 	off;
	text/html	epoch;
	text/css	max;
	~image/ 	max;
}

I had to find a versioning system for the CSS file so that new versions would trigger fetching the latest stylesheet at the user end. Internet search took me to two plugins that claimed to handle the versioning of assets but they messed up my installation instead. Now the Jekyll installation on my machine spews up a lot of warnings before starting up, which is a problem for another day, but I found another painless way to bust the cache. Bryan Schuetz had written this incredibly smart cache buster which takes the md5 hash of the stylesheet sass file and appends it to the stylesheet name. The hash will change only if there’s any change in the sass file thus avoiding unnecessary cache bust at every build.

All I had to do was create a _plugins folder in the root of my blog directory, copy his cachebust gem, change the path of the sass file location in the gem (mine is under _sass) and edit the _layouts/default.html to append the md5 hash variable bust_css_cache to the stylesheet name like this.

<link rel="stylesheet" href="/assets/css/{{ 'styles.css' | bust_css_cache }}">

That’s it. No more stale stylesheets.

Day 96 - Join Me in #100DaysToOffload

tags: 100daystooffload jekyll blog css