<p>I pushed some changes incorporating images for the first time (I know – very swish, very modern), and everything seemed to be working just fine, but when I loaded the production site… in Firefox, the images were not styled. Stranger still, they <em>were</em> styled when I loaded the same page in Chrome.</p>
<p>The experienced computer touchers amongst you will be saying “this is obviously a cache problem”, and you’re right, it is obviously a cache problem. Pressing <code>CTR + SHIFT + R</code> (which forces Firefox to clear the cache and do a full reload) proved this thesis, and solved the immediate problem for me, on my machine. But what about other people’s machines? <strong>I needed to cache-bust.</strong></p>
<p>Post-processors such as Tailwind use fancy ‘fingerprinting’ techniques for this, but I want something simpler than that for this project. Something I can code myself, without losing sight of what’s happening under the hood.</p>
<p>The best way to deal with the caching problem is to tell the browser not to cache our HTML in the first place. Yes, this is kind of (100%) cheating, but c’mon bro, it’s just one little HTML file — browsers only cache those because most websites these days are glorified SPAs where the HTML rarely changes.</p>
<p>I can stop the HTML getting cached by by adding the following meta tag, in this case to <code>index.html</code>.</p>
<p>That’s all well and good, but what I really need is for the browser to recognize my CSS as a new file and load it anew from the server. I could change the file name whenever I want to bust the cache, but this would get tedious very quickly. What’s more, as far as Git is concerned, I’d be deleting the CSS file and writing a new one with every deployment. Surely there’s a better way?</p>
</span></span></code></pre></div><p>As I’m requesting the file via http, I can append a query. Awesome. Not awesome enough though. I’m too lazy to do this every time I push a commit, and, being human, I’ll probably forget at a critical moment. This can only mean one thing. It’s time to bash (🤣) out a quick build script.</p>
<p><code>COMMIT="$(git rev-parse HEAD)"</code> gets the commit id from Git and assigns it to the variable <code>$COMMIT</code>.</p>
<p>Then, <code>sed -i "s/css?=\w*/css?${COMMIT}/g" index.html</code> does a find and replace on <code>index.html</code>. The regular expression <code>css?=\w*</code> matches ‘css?=’ plus any number of contiguous alphanumeric characters (everything until the next quote mark, basically) before replacing these alphanumeric characters with the commit id. The flag <code>-i</code> tells sed to edit the file in place. The <code>g</code> tells it to perform the operation on the whole file.</p>
<p>There’s just one thing bugging me: surely I do actually want the CSS to be cached <em>sometimes</em>. Caching exists for a reason, and I don’t want to sacrifice performance. Maybe I can modify the build script so that it only updates the CSS imports when the CSS files have changed… Sounds like a topic for another blogpost…</p>
