Migrating from Ghost to Gatsby

Jan Martin Borgersen
May 7th, 2020 · 2 min read

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.

More articles from Jan Martin Borgersen

Running Ghost on Google Compute Engine with Docker and Nginx

This post is about how I got Ghost running on a Google Compute Engine VM using Docker and Nginx. This powers this blog now, along with a…

May 4th, 2019 · 5 min read

ReactJS+GraphQL+Relay Performance on Facebook.com

Excellent talk about performance in a ReactJS+GraphQL environment from the Facebook team. Building the New facebook.com with React, GraphQL…

May 4th, 2019 · 1 min read
© 2003–2020 Jan Martin Borgersen.
Stock photography from Unsplash.
Built with Gatsby. Hosted with Netlify. Theme based on Novela by Narative.
Link to $https://github.com/razorborgLink to $https://www.linkedin.com/in/jborgersen/