New year, new website
January 3, 2022
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...
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.
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:
- Next.js: "The React framework for production"
- Tailwind CSS: A utility-first CSS framework
- React Markdown: For rendering markdown content (i.e. the blog posts)
- Vercel: For making web deployments easy
The source code is available on GitHub in a new repo.
Overall, I'm excited with the new changes & hope to post more regularly in the new year. Here's to a fresh start!