Earlier on in the year I decided to start a blog. It’s something I had been thinking of doing for a while now and have never really had much content to post about. I finally got out of my head and realized that it’s something I wanted to do because I enjoy it. So off I went.
I got started with a WordPress site and began posting about things I had come across and things I wanted to remember. For the past 6 months WordPress has been great. It’s made blog posting super easy for me as it does what it intends to do, give the write a space to write content easily. Obviously I work in IT, given that this blog is so technology focussed, and becasue of that I have a tendancy to constantly search for something new or a different way to do things. Which has lead me to today and the relaunch of my blog.
I set out to look for a different blogging platform to replace WordPress. I didn’t have any requirements at all seeing as I have very few posts and even less traffic so I started my search. I stumbled across someone who was hosting their blog on github and though this sounded interesting. I started research and quickly fell down the rabbit hole of Jekyll, static sites, and markdown. When I resurfaced I was excited to get stuck in to building my new blog! The journey had begun.
Now, I’m no pogrammer. I don’t write code for a living and I don’t come into contact with it in my day job that much. I do have an interest in it though and am trying to teach myself some syntaxes. I liked the idea of Jekyll and hosting a site on GitHub however the styling left me wanting more. I wanted a nice pretty site after all. I had played around with Bootstrap a little bit so began looking for info about people using Bootstrap with their Jekyll sites when I came across Bulma.io. Quick Plug - Bulma is a Bootstrap alternative. It builds on the 12 column layout of Bootstrap but add little nicities like readable classes and more fluid columns with greater options. To me, Bulma looked like a winner! It was then that I realized that the Bulma docs site was built using Jekyll and was indeed hosted on GitHub. Knowing this, I was able to model most of my blog off the Bulma.io setup. I cloned the docs repo and got to work pulling it apart and adding my own content in there.
About a week in to the dismemberment of the Bulma.io docs site I quickly realized that there was a lot more stuff in here than what I needed for my humble blog. So I blew it all away and started from scratch. This time, only looking to the Bulma source for inspiration and, if I got stuck, a little help with some code. The great thing about this setup (and possibly a sticky point) is that the posts can all be written in Markdown. I say a sticky point becaue it now means I have to remember Markdown syntax - Luckily it’ll also process standard HTML.
So, now I had a new framework (Jekyll + Bulma), I needed to start moving my content over. Mainly a copy/paste excercise. Job done.
I had the new blog up and functioning in a few days and throught to myself, what else can I do with this thing. I knew that I wanted to be sure this blog was built on a ‘mobile first’ type of strategy and Bulma helped with that. However, I wanted to add some additional smarts for mobile users. Things like adding shortcuts to homescreens and push notifications. Back on to the reasearch train led me to Progressive Web Apps. I had heard of these before (I’m an avid Google follower), but never thought of doing it. I figured that now was as good a time as ever. So I set out to turn my humble Jekyll based blog into a Progressive Web App.
I came across a few others who had done similar things, so learning from them I was able to get a Service Worker setup, configured, and being deployed at build - dynamically. Since I have a working Service Worker I now have the ability to have my site added to an Android phone’s homescreen and ‘install’ like a traditional app. The other benefit of this Service Worker is that I can now have a completely offline site! Having a Service Worker is the key to a Progressive Web App. Now that I have one, I can say I have successfully converted my static blog to a PWA.
I was really happy with how the blog now performed, functioned and looked. All that was left was to run some tests with Lighthouse to benchmark my site and make sure it was getting decent metrics and then I could push it to live!
Lighthouse runs tests against your site to gather metrics around Progressive Web Apps, Performance, Accessibility and Best Practice. My initial tests were pretty good around the 80 mark across all metrics (score is out of 100). But I noticed a few places where it could be improved - especially the performance side of things. Thankfully Lighthouse gives you some recommendations on how to fix these issues or blockers.
On of the things I could do to speed up my site was lazy load my images. I found a nice little script that I could add to my build script that would minify my images and create low quality versions of them all so I could display the low quality version first and then with lazyload, bring in the full quality images. With a little CSS I was able to make that look awesome with a blur as well. I really love this look and as soon as that was done, Lighthouse was reporting much higher scores.
This sort of leads me to here an now. I have all my content on the new statically servered blog, It’s now a Progressive Web App, and it performs really well. I’m so happy with how this has come about and have learnt so much in the process of getting this blog together.
Now that it’s all done, I can continue to improve on the capabilities of the blog by adding things like comments, push notifications, Archives, etc. I’ll save that for another day though.
So here it is - my newly designed, built and deployed blog.
If you made it this far, Thank you for reading. 😋