What's this?

This is the fifth iteration of my blog. (and hopefully a consistent one this time). I've finally decided to settle on using Gatsby for my main site and blog. I have been doing this for the last 4 years, rewriting entire site from scratch, spend weeks on redesign, deploy it and then forget about it.

But not this time!

I've actually done a great deal of planning this time around on how I'd want to make my blog/website.

Why do I need a blog?

Short answer, to write down stuff so that future me can refer to it easily.

Long answer, I've spent close to a decade in the IT industry, working on multiple domains, different tech stack, solving various challenges. I feel like I should start documenting and journalizing things, for my own self as well as for folks out there on the internet.

I also really need to improve my technical writing skills. It's inconsistent, erratic and sometimes the grammar just doesn't make any sense. The only way to fix it is to write more. So here I am, writing more stuff.

Choosing the tech stack

My old blog was driven by Ghost CMS, self-hosted on a $5 Digital Ocean Droplet, with custom domain and SSL from Let's Encrypt. Ghost is a great tool. It provides a perfect WYSIWYG minimal Medium-esque editor. It has a great support for drag-and-drop stuff and a lot of content types. Furthermore, it really did let you focus on content and not the tooling part. Us developers love to spend 99% of time on configuring the tooling/build system and the remaining 1% on thinking, we could've used another tool for that.

That's actually where Ghost worked for me, I just ran the Docker image on the Ubuntu server, configured SSL and access to the server, and started writing content. If all was so good with Ghost, then why did am I breaking up with Ghost? Well, a couple of reasons, actually.

Ghost as a product (which I used for well over 3 years) was moving in a direction which I personally did not like.
Maintaining the Ghost site became a chore. I had to constantly update the core Ghost packages, and other external packages which had vulnerabilities reported. This, coupled with making sure that the server was secure by rotating access keys, and such tasks started becoming a nightmare to maintain.
My website and blog were running on different servers, so double the cost. I've spent ~$500 in server costs and additional in domain renewal post expiry 🤷🏽‍♂️. I mean, you never know when that domain name will be useful for an idea which you thought about at 3am when going to the loo.

Merging Website and Blog

I spent a couple of weeks trying to figure out the "Perfect" tech stack for my blog and website. One of the main requirement for me was to have a single website which would serve as a blog too. My existing website was built using Angular 9. It had routing in place, all styles were isolated, and each unit was built of components. So I had to figure out a way to add blog to the Angular app and call it day.

I looked at ngx-markdown as a possible solution to render markdown in the Angular app. Initial experiments seemed promising. But I soon hit a roadblock on generating dynamic pages, based on templates. The code became messy real quick, and I knew there had to be a better way to do this.

Enter Static Sites

The Angular app was a single page application. Because it was a simple website with just a couple pages, it was blazing fast. But it still did include all the Angular vendor *.js files required to bootstrap the application. This is when I encountered the term static sites. These are basically web apps which have all HTML and other content generated at build time and ready to be served from any web server.

Great, so this meant, I could get rid of the constantly running server, and use Firebase Hosting for the static apps. Now to select the framework.

React and Gatsby

After a bit of R&D, I finally decided to settle on using Gatsby. Some of the points which I considered were

Gatsby is written in React, so building the site from scratch was a great way to understand React.
One of those, "It has a plugin to do that" ecosystem. I could fairly easily write most of the core implementation, but since Gatsby has a rich ecosystem of plugins, it made my life easier.
Data source agnostic. Data could be from a local md file, or a remote repo dedicated to content. And using GraphQL for querying data felt natural, instead of making n-REST calls to get stuff to render on page.

It wasn't all rainbows and unicorns though. Gatsby's developer mode was a nightmare to work with. If you've never used Gatsby before and decide to start creating an advanced site with blog capabilities, you are bound to be taken for a ride.

I spent countless hours trying to figure out getting the Markdown to load, make sure all the pages work even if a data source failed, and other bunch of stuff. But the end result was, satisfying. I now have a website and a blog, which is hosted on Firebase, SSL and all the works.

Journey ahead

Let's hope I'll be consistent this time around on posting stuff. I'll start slow, and see where things go.

If you like what you read, I'll be posting more stuff, so stick around.