Showing posts for GitHub

• Monday, 8 Aug 2022 9:20 pm

  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/ssh-action@master
   			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!

  Code GitHub