Migrating from Ghost to Gatsby

Last Year …

To learn about Cloud last year, and to work on a couple of personal projects, I set out to run Ghost on a Google Compute Engine VM. I like the Casper theme, and the CMS is top-notch. The problem was getting it into production. I had to:

• Spin up a VM, configuring boot and content disks
• Create docker-compose files that allowed Ghost to run in a Docker image with content saved on a mapped drive
• Configure nginx to use LetsEncrypt certificates for SSL
• Front the VM instance with a CloudFlare CDN

I eventually got a version of buster to generate static content and moved production hosting to Github Pages (so I didn’t have to pay to run a VM all the time), but this is still a lot to maintain.

I finally learned Gatsby…

I get paid to work in React and GraphQL, so it seemed about time for me to learn about Gatsby. If you’re not a developer, the learning curve is really steep. Forget about it. If you are a developer, and you’re already familiar with React and GraphQL, it’s pretty cool! There’s a lot I like. But it does require work out-of-the-box to get it to look and work the way you want.

How I migrated content

1. Bootstrap your Gatsby site. After trying several starters, I went with Novela by Narrative because it’s pretty, it expects content in a way that I like, and it uses a Gatsby “theme”, which means less code in my blog repo.
2. Export from Ghost: Log in to the admin, go to Settings -> Labs -> Export your content, and get a JSON of all your content.
3. Explode the JSON into Markdown files. There are several tools out there for this:
   • ghost-to-gatsby does a great job of creating folders for content, but won’t convert HTML to markdown. I was left with a lot of “undefined” in all my content files.
   • ghost-to-md does a stellar job of turning the HTML into markdown content. However, it leaves each post in its own file, so I had to do a little batch processing to get this into the folders that Novela expects, and to tweak the front matter.
4. Put it all in a GitHub repo
5. Head over to Netlify, authenticate with your GitHub creds, and create a “New Site from Git”, and you have a CI publish integration running in a matter of seconds.

Some thoughts

Netlify is incredible. They don’t even ask for a credit card! I have used a lot of cloud services, and few are as easy to use and as useful.

I’m still figuring out Gatsby. I can’t stress enough that you will have to write code to make your site do what you expect. Gatsby is a phenomenal framework, and I like many of the things it is opinionated about, but it still leaves a lot of the heavy lifting up to you.

I’m still learning styled components. Yeah, I know, the “cool kids” have been on this train for a few years now, but the way I see them used in a bunch of the Gatsby starters mixes data model and view a bit too much for me. It’s a step better than inlining styles, but after spending years relying on CSS frameworks like Bootstrap and Material, I have come to expect that styling is better done way-outside my view components.

Component shadowing is way cool. Shadowing is a very powerful way to extend a theme, and a great topic for another post.