How I moved my blog to Gatsby

February 06, 2019

What

I just migrated my blog Rope and Tire to use Markdown and React using Gatsby.

Why Gatsby

As a React developer, the idea of having a blog written in React is appealing — I can maintain and experiment on my blog. And using this fancy new thing—Gatsby appeals to my inner neophile.

My blog used to be hosted on Wordpress. While quite good, I have longed for something simpler, easy to edit. And I was irritated with plugins.

Why Markdown

  • Simplicity and Portability of plain text files
  • Rich formatting
  • Easy to read with formatting
  • Easy to learn syntax
  • Can be easily converted to HTML

I’ve always wanted to become a power-user of Markdown. Best way to become a power-user, that I know of, is to use it.

How did I move my blog

On egghead.io, I saw this course on building a blog with react and markdown using Gatsby. I coded along with the course for an introduction.

Then I threw it all out, and used this tutorial on codeburst.io to build my blog. I used the gatsby-starter-blog for a quick scaffold, and the theme theme-de-young as a starting point for my customizations.

I then had to figure a way out to import my wordpress posts. Peter Akkies has a great tutorial on how to do this. After importing, I had to spend a bit of time cleaning up relative urls, converting http to https, updating the markdown file headers with the correct tags.

Another link I kept referring to how to update this gatsby blog from your phone

Deployment

Today’s landscape of CI/CD using Github/Bitbucket and Netlify/now.sh is quite amazing. I wanted to try it out, and to reduce hosting on my shared web space at webhostinghub.com.

With this in mind, I created a new private repo on Bitbucket and uploaded my code here. Then on to integrating my repo on bitbucket with Netlify. This tutorial on codeburst.io, which we followed earlier, has instruction on how to set-up a Netlify account.

The final step is to point the netlify instance to your custom domain. All we do then is git push origin master. And your blog is updated.

Tags: React, web-development

Suprada Urval's blog.