Rebuilding with Gatsby

A few months back, I launched the latest iteration of this website. A lot has happened since the launch in both the world and my personal life. This is the overdue launch post. I took the opportunity to revisit some old blog posts, journal entries, and social media content. As much as I have supposedly changed throughout years, the key theme remained the same. I’m still struggling with the same challenges and emotions. I'm still flawed mostly the same ways. Some say people can't change for the better. Could that be true?

It has almost become a pattern that every two or three years this website gets a redone. I have no intention for it to become another place where the only topic is itself (App.net anyone?). Still, this rebuild is interesting to share.

Although the website has had a minimalist design since its inception, multiple aspects could benefit from a modern rethink. There were three things jumped out to me the most: font choice - Source Sans Pro was a good font but I had a strong preference these days for websites using system fonts; the font sizing was on the smaller side; and the spacing wasn’t nearly generous enough. In addition, I long wanted to add footnote popover and a dark mode.

The previous version was built with Hugo. Besides providing an extremely fast build time, Hugo took care of most of the common needs such as content management and pagination out of box. However since I didn't take the time to fully grasp Hugo and especially its templating engine, I always had a sense of uneasiness. This time, I wanted better control over the code and just like before, performance and accessibility were my top priorities alongside a clean look.

Gatsby was already on my radar during last rebuild. I picked Hugo because I found a Hugo template better suited my needs. Since I wanted more control over the code, it mattered less now what Gatsby templates I could find. I chose Gatsby for that it has a good reputation, is well maintained, and has an active community. Gatsby uses React for templating and GraphQL for data querying. They are great gateways for me to stay connected with the JavaScript community.

The actual building process was already a little blurry. I remember choosing not to use Gatsby theme because that would involve publishing my own npm package. It was a bit counterproductive to maintain a package that would most likely be used by a few if not just one. Plus I was confident I could structure the codebase so that the content and the site would have a clear domain separation. Open-sourcing the website satisfied my wanting for making it a community project. I opted for using a starter instead. Maybe because the starter was originally built a while back, I found in it many practices to be challenged. I ended up removing lots of overloaded dependencies and changing almost every aspect of the code. Nevertheless, it gave me a solid ground to start with along with Gatsby’s official documentation and guides.

The new design was refreshing. Dark mode was beautiful and activated following system setting. Footnote popover was finally there and looked in place on different screen sizes. Yet I couldn’t bring myself to release the new website. Inconsistencies still popped up across browsers and devices. There was always one more design tweak I could make. The code could always use more refactoring and cleanup. After some more procrastination, I knew I had to stop or I’d never launch it. I just needed one more reason to convince myself. I told myself, if Lighthouse gave the website decent scores, I’d launch it.

So I pushed the button. I knew I would find new issues from time to time. I also knew this website would evolve over time as it was supposed to. I was happy it was out there.

Is Gatsby the perfect choice for a personal website like this? The answer is probably no. Something like Jekyll is a lot more straightforward and has a much better chance at not having the code going outdated instantly (the JavaScript world moves fast). I may very well choose Jekyll for the next time but that doesn’t matter — I had a lot of fun building using Gatsby and I’m quite happy with the result.

Though can't be definitive, I want to attempt at answering the question in the beginning: if I can make this website a little better every a few years, I choose to believe we can ourselves too.