Blog Refresh 2025
Background
I got really busy, and my blog has been on the backburner for way too long. While there were things I wanted to share and write about, finding the time and motivation was tough. I really missed writing for my blog, so I am excited to be back. I hope to get my momentum going again with renewed enthusiasm and a fresh start.
One aspect of my original blog that can be improved is the PageSpeed score for mobile, which ranges from 68 to 86 out of 100, depending on the page. As a perfectionist, I find this less-than-ideal score somewhat undesirable. While I am generally satisfied with the blog, which I have designed from scratch, I feel it's time for a refresh as the Static Site Generator (SSG) used is not being actively maintained. This time, I am aiming to achieve a perfect (or near-perfect) PageSpeed score.
The Hunt
To avoid spending too much time and effort on optimisation, I began by shortlisting SSGs with near perfect PageSpeed scores, through putting their homepages to the test. While this might not be the fairest or most accurate way to benchmark and compare them, I just need a quick indication that it's possible to achieve a near perfect score, and it's ok if there are false negatives due to bloated homepages.
From the list of JavaScript SSG in Jamstack, I have identified 2 promising ones.
Comparison
Now that I am down to the final two, I then proceed to do more PageSpeed tests with their templates, and Eleventy appears to be more consistent in scoring perfect (or close to) PageSpeed scores. The official starter project for Eleventy, Eleventy Base Blog had a perfect score, or in Eleventy's lingo, "Four Hundos Lighthouse score", whereas the Simple Blog theme for Lume scored 73 for Performance which is around the range of my original blog.
So the choice is clear: starting at the destination is far easier than beginning from afar, struggling to figure out the path (whether it even exists). While the latter can be a fun journey of discovery, trying to push boundaries, there are better things that I can spend my time on, than to reinvent the wheel. So standing on the shoulders of giants is the wiser choice, I just need to ensure that my changes do not cause a drastic drop in the PageSpeed Score. And even if it does, identifying the root causes will be straightforward, just a matter of comparing the changes, and then fixing them either by further optimisation or reverting.
Keep in mind that this is not an apples to apples comparison, and the performance difference between both may stem from Lume Simple Blog’s additional features, such as its search functionality which looks pretty cool (shown below) and commenting system.
As I have not taken an in-depth analysis regarding the contributing factors to the lower performance score, just take it as a casual observation. To each his own, for now, let me be obsessed with PageSpeed scores, and embrace minimalism.
Workarounds
While those additional features can make a blog look more polished, and perhaps enhance the user experience (UX), it does not necessarily mean that readers will lose access to these functionalities if they are omitted. As always, in life (whether it's web development or everything else), there are alternatives.
Search
To search within a website, users can simply use the site: search operator, which works for most search engines, as long as the pages are crawled and indexed. For example,
keywords site:example.com
Dark/Light Mode Toggle
For reading preferences (customising colour theme, font size and spacing, etc), there are plenty of options and most browsers these days comes with reading mode, which reformats the page into a distraction-free layout with adjustable fonts, spacing, and themes (light/dark/sepia). An example of Firefox Reading Mode is shown below.
As I want to focus more on creating content, I will just reuse my existing blog design, which has only a default light mode theme. Designing the dark mode isn’t a priority, but I might revisit this someday when I have more time.
Aside from the design aspect, this feature is actually quite straightforward to implement. It might not be obvious that Eleventy Base Blog comes with both dark and light mode colour scheme, as it does not provide a manual dark mode toggle button. Instead, it automatically switches between dark and light mode based on the user's system/browser preference, using the prefers-color-scheme media query.
There is another Eleventy starter project, Polyglot Tech Blog, which provides the Dark/Light Mode Toggle button while also having the perfect "Four Hundos Lighthouse score". It uses JavaScript to toggle the dark mode CSS class, and you can refer to its code file, theme.js for further details.
Commenting System
Although implementing a commenting system is not a top priority at the moment, I have done some preliminary research and discovered an interesting solution called utterances. It leverages GitHub Issues to manage blog comments, offering a lightweight approach to integrating comments into a website.
A significant drawback of enabling comments is the challenge of managing bot-generated content and spam. However, by leveraging third-party platforms like GitHub, for user registration and commenting, simple bots that indiscriminately spam every form they encounter can be filtered out effectively.
While GitHub is well-suited for a tech-focused blog, platforms like Mastodon can also be utilised, as demonstrated by the demo page of Lume Simple Blog.
In the meantime, readers are welcome to contact me via email with any thoughts or feedback they may have.
Hosting
For hosting, I was looking to move away from Amazon S3 in favor of modern hosting solutions that deliver superior developer experience through intuitive interfaces, seamless integration, and streamlined workflows.
Eleventy's documentation provides a helpful list of deployment options, and since I prefer not to manage additional accounts, Cloudflare Pages and GitHub Pages stand out as ideal choices because I already have existing accounts with them.
While both platforms offer free plans, Cloudflare Pages provides more features — most importantly, support for server-side 301 redirects. This functionality is crucial for preserving link equity (or "link juice"), which helps maintain search engine rankings during URL structure updates, site migrations, or domain changes.
The redirects are stored "as code" in a plain text file called _redirects using simple and straightforward syntax, as shown below
[source] [destination] [http redirect code?]
Final Thoughts
Overall I am happy with Eleventy Base Blog, the clean and minimalist design provides a solid starting point that I can easily build upon and customise to suit my needs.
As I launch my new blog, my original blog will be preserved and remain accessible at https://v1.voidst.one
I am pleased to have accomplished what I set out to achieve, while fully acknowledging that this success is not mine alone. I am deeply grateful for the community's effort in maintaining and continually improving Eleventy.
- ← Previous
TISC 2021 Writeup - Next →
Tic-Tac-Toe with React, Redux, Rust - Part 1