Cache busting with GitHub Actions

Chris Coyier brought up the perennial problem of cache busting on websites lacking a build step the other week on Shop Talk Show (and blogged about it, too)—and rightly commented that everyone & their dog has their own cache busting solution. Well I've got a dog & a cache busting solution too.

Modern JavaScript frameworks, and frameworks with asset pipelines (like Rails) usually come with cache busting built in. That is, when a new bundle is built, the framework will automatically add (usually) a querystring to the <link> tag that imports that bundle—which tells your browser that the bundle has changed and to re-download the bundle from the server.

<link rel="stylesheet" href="/style.css?v=12345" />

However, if you don't have a build step—if you're using PHP, for instance, where that <link> tag is generated afresh on every page load—then busting your assets becomes a little bit more complicated.

Chris's solution is to put a magic string in his template, and then leverage Buddy, his deployment platform, to run a find & replace on the template, swapping out his magic string for the number of the current deployment

<!-- This... -->
<link rel="stylesheet" href="/style.css?v={{{VERSION}}}" />

<!-- ...becomes this -->
<link rel="stylesheet" href="/style.css?v=5" />

However! Buddy starts at $75/mo, and I don't have that kind of dough. Luckily for me and you, you can do almost the exact same thing with GitHub Actions.

I already use GitHub Actions for an extremely simple deployment pipeline on most PHP applications: 1) SSH into the VPS, 2) cd into the right directory, 3) run a git pull and composer install. Bada-bing bada-boom.

Once your action is running on your server, you can use sed to do the find & replace for you; GitHub exposes the action run number in its environment variables. The hard part is just chaining it all up.

name: Deploy to labs

on:
	push:
	branches: main

jobs:
	deploy:
	name: Deploy
	runs-on: ubuntu-latest
	steps:
		- name: Set version string
			uses: appleboy/[email protected]
 			with:
 				host: ${{ secrets.HOST }}
 				username: ${{ secrets.USERNAME }}
 				key: ${{ secrets.KEY }}
 				port: ${{ secrets.PORT }}
 				script: cd ${{ secrets.DIRECTORY }} && grep -rl '{{{VERSION}}}' ./templates | xargs sed -i 's/{{{VERSION}}}/${{ github.run_number }}/g'

I'll assume that you have other jobs running on GitHub Actions, but hopefully the above is clear: I'm using appleboy/ssh-action to SSH into my VPS (with the credentials in secrets), then cding into the right directory, grepping only the files that contain the magic string ({{{VERSION}}}), and then using sed to swap out the magic string with the current run number.

Pretty nifty!