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 were styled when I loaded the same page in Chrome.
@@ -67,18 +68,18 @@
Of course there is.
<link rel="stylesheet" href="css/defaults.css?2"/>
+<link rel="stylesheet" href="css/defaults.css?v=2"/>
As I’m requesting the file via http, I can append a query. Awesome. Not awesome enough though. I’m too lazy to edit this line of code 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.
Automating query insertion
#!/usr/bin/env bash
COMMIT="$(git rev-parse HEAD)"
-sed -i "s/css?=\w*/css?${COMMIT}/g" index.html
+sed -i "s/css?v=\w*/css?${COMMIT}/g" index.html
Let’s talk about what’s happening here:
COMMIT="$(git rev-parse HEAD)" gets the commit id from Git and assigns it to the variable $COMMIT.
Then, sed -i "s/css?=\w*/css?${COMMIT}/g" index.html does a find and replace in the file index.html. The regular expression css?=\w* matches ‘css?=’ plus any number of contiguous alphanumeric characters (everything until the next quote mark) before replacing these alphanumeric characters with the commit id. The flag -i tells sed to edit the file in place. The g tells it to perform the operation on the whole file.
Now, whenever we push a new commit, any CSS imports in index.html will be changed to something like this:
<link rel="stylesheet"
-href="css/styles.css?=ab184410c10c1adfb8b85b03b316f72b"
+href="css/styles.css?v=ab184410c10c1adfb8b85b03b316f72b"
/>
Now I just need to add the build script to my Jenkinsfile…
stage('build'){
@@ -93,7 +94,7 @@
Tags:
diff --git a/public/posts/index.html b/public/posts/index.html
index eb601dd..d6c0ea7 100644
--- a/public/posts/index.html
+++ b/public/posts/index.html
@@ -6,6 +6,7 @@
Posts | Coding with Andrzej
+
@@ -29,7 +30,7 @@
- Coding with Andrzej
+ Coding with Andrzej