Transitioning a blog from an older toolchain to something new is always a bit challenging and also exciting. Of course, the excitement is a big driver for trying the new platform. It also gives an opportunity to re-think the blog with a fresh approach. My blog was already dormant for last 2 years, partly because of the blogging-platform, being busy with client work and life in general.

Finally with Gatsby, I got a renewed sense of motivation to rebuild my blog and put new life into it. Here’s how I approached it.

Introduction

I’ve been blogging since 2005 and have tried a variety of platforms, in this order:

• Blogger
• Windows LiveSpaces
• Wordpress
• Octopress
• Ghost (brief experimentation)
• Hugo

Every time I made the switch, I always found something that would improve my blogging experience. The big switch was from Wordpress => Octopress where I had to move all my posts from MySQL to a set of Markdown files. That in itself was ground-breaking for me. The whole idea of a statically-generated-website was revolutionary, when I first encountered it in 2010-2011. It felt great as I didn’t have to manage any database and didn’t need any special LAMP stack setup to locally build a blog.

Yet another transition that I distinctly remember is the switch to Hugo. The big driver there was speed and it was really phenomenal. Octopress used a ruby toolchain and was inherently slow. The Go-lang based Hugo was blazing fast with fast HTML previews of markdown. The real-time live-preview mode of Hugo was pleasing and that allowed me to blog for sometime before the excitement died down again.

Now that most of my work is around React, GraphQL and general Mobile/Web App development, Gatsby felt like a natural fit and easy to adopt. After playing around for a week or so, I was so blown away by the possibilities, it became imperative for me to rebuild my blog.

Why Gatsby?

This is 2018 and the front-end world is ablaze with technologies like React, GraphQL, Styled Components and few other supporting libraries.

I know that’s a very React-centric view, but hey, this is about Gatsby, which is all React anyways :-)

I am using these daily and totally love the Developer eXperience (DX). If all this goodness seeps into a blogging platform, there will definitely be some head-turning. Gatsby does make that happen.

It gives you an app-like development experience with all the things you come to expect when building a React App. Gatsby takes your React components, infuses it with data coming from a GraphQL API and then bakes it all into a static website. That is only part of the story.

When you launch the website, you get a fully hydrated React App. Note, this is not just a static website anymore. It’s a full blown React App. What this really means, is that you can build React Apps with Gatsby, which start life as a static website!

Ain’t that powerful?!

Re-thinking the blog

Typography This was initially a pure drawing-board exercise where I focused on the essential qualities of my blog. One quality was abundantly clear: typography. Picking the right font-combination, sizes, styles was important to make the text stand out legibly. Luckily in case of Gatsby there was a typography package that seemed to do most of what I wanted. It even has a nice demo page for viewing various themes. I went with the irving theme, which fit my taste pretty well. After a bunch of tweaks to font-sizes, colors, I had the various text elements look just right.

Take a look at the Theme Page that shows off all of these elements.

Colors Once I settled on the type, the next task was to identify a color palette. This was done with chroma-js. I established a theme palette and made sure it was used consistently across various components. This was an iterative process, which became really fluid with the live-reload capability of Gatsby.

Component styling And finally the styling of various React components on the Home page, Archive, and About Me pages was done with Styled Components. I made sure the typography and colors were picked from the type and palette definitions, as discussed earlier.

Some interesting details

• To move the blog away from Hugo and bring it into the Gatsby mould required some restructuring. This was mostly renaming of some folders and moving around files to be more local to the post. In Hugo, I was keeping some files in the static folder just to make the build work correctly. All of that changed and became much simpler as all the post related content got co-located. The total migration from Hugo ==> Gatsby took 2 weeks, most of it being in the nights
• Switched to Netlify for hosting, because its simple. I was using Firebase earlier where I had to build the files myself and then upload to firebase. In case of Netlify, it automatically monitors my github repo and builds upon a commit. What is cool about Netlify is that it offers this service for free, provides SSL via Let’s Encrypt and also offers deploy previews of branches. If you haven’t tried out these features, I encourage you to take a look.
• One downside to Styled Components is that you lose auto-completion inside the tagged-template-literals. I am a heavy WebStorm User and luckily there is a plugin that brings this functionality back. Saved my day!
• Based on the migration I had to do from v1 to v2, I also made a quick contribution to the docs. The Gatsby team was too kind in making me a maintainer 🙏.
• Used Prettier for auto-formatting when I saved the .js, .jsx, .md files.

Custom TOC plugin for remark

As part of the migration, I had to write a custom plugin for remark called gatsby-remark-toc. There was one already existing (with exactly the same name!) but did not satisfy my needs. My version takes a different approach and allows you to inject a TOC wherever you want in your Markdown.

This is done using the `@toc` inline-code marker. For example, below is an injected TOC block with a custom title. As you can see the options to the plugin are passed via JSON.

`@toc{"title": "Example of an injected TOC"}`

This gives the control back to the author of the post and they can choose where to show the TOC. The other plugin always puts it at the top, which is not what I wanted. I plan to open-source this soon.

What’s next?

• Use TypeScript instead of JavaScript. Did try it earlier but was failing for some weird issue. Will revisit this again.
• Add more client-side micro-interactions
• Add banner images for posts
• Allow custom styling for posts with a headless React Component, similar to React Helmet.