Behind every tool there's a problem. Wordpress was a problem so the tools were static site generators. With the help of templates you generate a directory of static files and host it wherever you like.

There's no denying the fact that Hugo has got everything that a static site needs. But I like React and while working on my Photos Portfolio, I found Gatbsy extremely exciting. This weekend, I thought of an interesting challenge for myself—how might I, with the least amount of effort, set up and running my blog on Gatsby.

I started with moving the contents of the blog from Hugo to Gatsby. It was easier than expected. I started with first changing the format of the markdown files from TOML to YAML because as of now Gatsby plugin only supports YAML. I used the built in conversion tool. In terminal move to content directory and run this command:

<br/>hugo convert toYAML<br/>

Instead of writing the themes from scratch, I picked up the most popular starter called gatsby-starter-blog and I added my styles on the top of it. I also followed this guide to create custom pages that automatically generates slugs.

Gatsby makes things like Animating the page dead simple. All I did was use the gatsby-plugin-transition-link plugin and wrapped the components in TransitionLink tag. I still have to work on improving the performance and figure out how to use Gatsby's in-built Img tag in all the post images to leverage the lazy loading with blur-up effect. However, for now I am quite happy with the progress.