Cache-busting in Jekyll, GitHub pages blog post

Cache-busting in Jekyll, GitHub pages

Todd Motto

23 Oct, 2016

JavaScript

2 minutes read

I’ve always found updating my blog an interesting feat, however with several million users per year (you crazy cats) cache-busting is something I’ve recently been thinking since rolling out my new blog design. Implementing cache-busting each time I make a change will allow the user’s browser to download the latest assets, therefore I get no image/style/layout breakages until a hard refresh.

Cache-busting assets

This is actually a very simple trick by essentially adding a unix timestamp to asset urls.

For example, here was my stylesheet before implementing cache-busting:

<link href="{{ "/css/main.css" | prepend: site.baseurl }}" rel="stylesheet">

This would then compile and render out this once I made a change to my website:

<link href="/css/main.css" rel="stylesheet">

To add cache-busting, I can simply append the site.now global to the end of my assets, and force it to a unix timestamp:

<link href="{{ "/css/main.css" | prepend: site.baseurl }}?{{site.time | date: '%s%N'}}" rel="stylesheet">

This will then compile and render out the current timestamp everytime I make a change to my blog, as the site is statically rendered on the server upon changing something:

<link href="/css/main.css?1477265627121082292" rel="stylesheet">

At the time of writing this post, that’s what my current blog is displaying. Once I’ve posted this blog (i.e. now, as you’re reading) it will have changed again. This means no hard refreshes for browsers or funky styles being shown if you’re making important site updates.

Using Jekyll’s Sass

Because I’m using _sass as a base folder for my CSS, to tell Jekyll to compile with Sass, everytime I make a style change as well, Jekyll will recompile and redeploy to my website. If you’re using a script (such as gulp-sass for example) then updating styles alone may not work.

About the author

Todd Motto profile picture

Todd Motto

GDE Google Developer Expert

Todd is the Founder of Ultimate Courses. With a passion for Angular, TypeScript and JavaScript, Todd leads the online courses creation and has written hundreds of articles on front-end web development and beyond. He specialises in breaking down complex topics and understands the critical mission of learning new technology fast, comprehensively and the right way.

Love the post? Share it!

Lots of time and effort go into all our blogs, resources and demos,
we'd love it if you'd spare a moment to share them!

Explore our JavaScript courses

Get started today and join over 50,000 developers.