Logo

New year, new website

January 3, 2022

Introduction

After 7 years on GitHub Pages, it's time for a change! The tech stack for this website has been completely overhauled.

Out with the old...

Previous website on GitHub Pages

The previous version of this site was hosted on GitHub Pages & used the following tech stack:

  • Jekyll: A static site generator
  • Bootstrap: A UI framework that comes with pre-styled components
  • GitHub Pages: For hosting & deployment

The biggest advantage at the time was how quickly I could get blog posts created & get the overall site up & running. However, I started to run into the following limitations:

  • As web tools advanced, using Liquid templating began to feel dated.
  • Bootstrap was a good choice to build UI quickly, but as I wanted to add more customization, it felt like I was fighting the framework.
  • Over time, it became less enjoyable to maintain the site & to write posts. Sad.

In with the new...

Over the last year, Next.js, TypeScript, & Vercel have been part of my professional web development workflow. So, I was eager to use them as the building blocks for the next iteration of this website.

For styling, I opted for Tailwind, which is a utility-first framework. It provides a lot of helper CSS classes that are easy to put together to build out custom components. It also makes it very easy to support light & dark mode.

New website in light mode

New website in dark mode

React Markdown is used to render the blog posts. This was the most challenging part of the migration. The original Markdown files also included raw HTML, which I'd like to avoid moving forward. So, there was some manual labor involved to sanitize the posts. Besides raw HTML, all other content have been preserved.

In summary, here's a list of the new tech stack components:

The source code is available on GitHub in a new repo.

Conclusion

Overall, I'm excited with the new changes & hope to post more regularly in the new year. Here's to a fresh start!