Wilcox Development Solutions Blog

Moving the blog to Gatsby

July 03, 2020

I finally did it: I moved this blog to Gatsby

This blog has made its second transition: first, from MovableType to Wordpress, then from WordPress to GatsbyJS.

This is a simple blog, and while it has some history, it’s one developer, posting infrequently, with no real comments and - really - no real reason to have it dynamically hosted on Wordpress.

I found GatsbyJS to be an excellent place to migate to:

  1. It comes with excellent Markdown rendering
  2. It was a big enough project to try out workflows around a new text editor I was trying out
  3. I had used Gatsby before and liked it

The migration requirements

Couple of requirements here:

  1. I was done with Wordpress. I wanted to download my data from my Wordpress host, extract it to markdown files and be done. (Gatsby can act as a frontend for the Wordpress API, apparently, but this wasn’t where I wanted to go).
  2. Can’t break permalinks into the blog.

Migrating Content

Content ported over VERY easily. Did need to make a tweak to the wordpress-exporter to also include the days in the URLs, to keep the permalinks working.

Beyond that, the basic page template was done. Some Gatsby fiddling to get the home page and the tag pages working correctly, and boom.

Hosting

I also moved hosts, moving away from my Wordpress provider.

I chose AWS Amplify: a relatively high level out of the box Amazon service that hosts not just static content by serverless APIs too.

Theoretically I could pull together the pieces of Amplify, using lower level AWS pieces, but that extra time always stopped me in the past. It’s a hobby project: if I can focus on just the parts I want to focus on (writing blog content, not maintaining devops scripts to scaffold the blog itself), so much the better.

Amplify has a feature where it will auto build Git branches pushed to repos hosted on Github, Bitbucket or CodeCommit. This actually seems to not directly use AWS CodeBuild, although I know it must under the hood. None of my knowledge about CodeBuild setup, or viewing build results, translated over. This means I do have to log into the Amplify console during my deploy process.

On the other hand, I have everything set up so that I can make a blog post without Gatsby being installed on the machine I’m typing on: commit a markdown file in the proper location, branch/pull request, which triggers a preview build in Amplify, look at the generated site, done done.

(I worked hard on my codebuild build status scripts, but for naught here.)

As a testament to Amplify, I was able to deploy the blog, to Amplify, in 45 minutes while half asleep one night. (Counting calendar time waiting for DNS to propagate).

Conclusion

With a reasonable knowledge of React and some Gatsby documentation off the internet, I was able to re-create my blog’s styling, import content from Wordpress, and deploy. In fact, that latter step was even easier in real life than it was in the documentation!