Rebuilding my blog for 2021


Nafis / January 03, 2021

5 min read––– views

2020 has been a wild ride. For everyone. As a cool guy over the web meticulously summarized in a few sentences -

Bootstrap 5 was released, Angular added a new Date Picker. A bunch of stuff caught on fire. Vue 3 was released. Beirut exploded. React suspense left us in suspense. Murder Hornets. SpaceX used Web Components... Elon got hacked. Lambdas started supporting containers, Kubernetes dropped Docker. Slack sold out to Salesforce, AI learnt how to code...

Coming out of 2020 (alive and intact 🙏) I decided that I would share my knowledge through my blog in 2021. So, like a good dev, I felt the burning urgency to rebuild my blog, with all the cool technologies that I love. In this article, I'd like to give an overview of what technologies I chose, why I chose them, and summarize the whole process. While there's no science to starting a new project, planning is the de facto requirement. Starting out, I really wanted 3 things for my blog:

  1. It should load fast and feel fast, so must be performant
  2. It should be cool to look at and interact with - so must have good design and animations
  3. It should be easy to add new blog posts

And that's it, simple enough, heh? Spoiler alert: it's not...

Choosing the Perfect Tech Stack

Well, maybe not. I don't think the "perfect" tech stack even exists, still one can try :)

The first requirement is a big one - the site should be fast, performant and most importantly, should load really fast. However, this requirement is also relatively easier to tackle. Esp. in 2021, when JAMStack is more prevelant than ever. But the question is, which framework/approach to use, because there are plenty, and all try to solve the same pain points in slightly different ways. In the JS world alone, we have quite a few popular ones:

  • Next.js
  • Gatsby
  • Nuxt.js
  • Vuepress
  • Gridsome

All of these are great, but I have way more affinity towards Next.js than any other on the list 😇 After all, it provides:

  1. Automatic Image Optimization
  2. Good I18n support
  3. Built-in Analytics
  4. Zero config - Automatic compilation + bundling + code splitting
  5. SGG + SSR + ISG
  6. Typescript support
  7. Fast Refresh
  8. File-system Routing
  9. Serverless functions - API routes
  10. Built-in CSS support

On top of these, it offers all the flexibility of React so anyone can leverage all the custom hooks and components of the React ecosystem. The community support and adoption is huge, and this framework is used (and contributed to) by some of the biggest tech companies of the world. Of all the frameworks I've used, Next.js provides the best Developer Experience (DX), and I'm yet to find something better.

Gatsby would come (somewhat) close in the React space, but not quite there. IMO, there's no reason to choose Gatsby over Next.js esp. when:

  1. You can't do dynamic pages (properly)
  2. You must use graphql to load in data
  3. You have to rely on plugins for basic stuff

However, there are some other pretty good ones like

  • Hugo
  • 11ty
  • Jekyll

In terms of building speed, Hugo is the fastest amongst all SSGs. The average build time for a whole site is less than 1 sec. The best thing about Hugo is that unlike other SSGs, it's completely framework-free. So only the bare minimum gets shipped to the client. Nothing fancy like React or Vue. However a few downsides for me:

  1. Hugo has it's own templating syntax - which is all fine and good, but needs to be mastered.
  2. No way to add simple serverless functions
  3. Can't use all the React animation libraries I'm familiar with (obviously 😅)

Honestly, this is just me being way too nitpicky about Hugo, I think it's a great one for building blogs, and the 2 downsides I mentioned could easily be tackled: 1. by spending a weekend or two in digging thru the docs, 2. Using some 3rd party service or frameworks

So, despite the advice of a dear friend, (who's also a devout Hugo fan + has a strong enminity with the Javascript ecosystem), with Next.js I went! :D Mostly because of the architecture, DX, and the React community support.

Moving on...

Good Design

You see, I don't really do design. I might have a good design eye, but I design like crap. And try to avoid designing like crazy. In order to acheive this goal, I knew that I had to use some kind of UI framework/library that takes care of a few things for me:

  • Typography
  • Spacing (margin and padding)
  • Scale
  • Layout
  • Color Modes (after all, I 💘 dark mode)
  • Responsiveness

I did my fair share of research. And in all those frameworks I tried out, TailwindCSS always came out victorious. It is probably the only one out there that takes of all these things (and a whole lot more) while also being:

  1. Production-ready
  2. Minimalistic
  3. Widely used
  4. Easy to use (and definitely no overriding) - who got time to fight with a framework 😅

Deciding to use it was the best idea ever. The more I used tailwind, the more I loved it. Highly recommend this framework to anyone reading this. If you've heard of Tailwind, but haven't used it because you think it's just another bootstrap, then this post might change your mind.


Framer Motion MDX Typescript

# Comments and Feedback


Subscribe to the boring interesting newsletter

If you enjoy learning new stuff, you should consider joining my newsletter 😇. Get emails from me about development 👩‍💻, tech 🤖, and other (un)opinionated matters 🤓. My newsletter includes early access to new/upcoming posts and sneak peek into special goodies. No spam ⛔, & you can unsubscribe at any time 🎉