I've been kicking around the idea of porting my blog to Gatsby. It's not that I'm unhappy with my current blog set up, it's more of an excuse to play with Gatsby. If you haven't heard of Gatsby, it's a React based static site generator that creates blazing fast websites.
In this post we will cover:
My blog is currently powered and hosted by Ghost. Ghost's admin tools make it really easy to get an export of your blog's underlying data. The only thing that was a bit suboptimal was having to email their support team to get an export of the images used on my blog.
Ghost's export data format is JSON based. It contains a bunch of data we won't need. Here's what the export looks like:
Inner JSON content removed for brevity
One of the reasons I'm excited to try out Gatsby is that it uses GraphQL, but before we can start querying data we must first import this data into something Gatsby can use. Luckily Gatsby ships with
gatsby-transformer-json which reads in JSON files.
I decided to break up the JSON export into multiple files. I extracted
posts_tags into their own JSON files. This is so that we can have a bit more flexibility when query and filter this data.
Now all you have to do is configure Gatsby to read in these JSON files. Configuration is very simple, just tell Gatsby where to find the files by adding this to your
Here's where I ran into a small issue. The export from Ghost uses numbers as ID's. Gatsby expects all ID's as strings. Now there are many ways to handle this, I ended up forking Gatsby and forcing it to convert any non-string IDs to a string: https://github.com/brookslyrette/gatsby/commit/50570fc9028297f1e508bf03da38f9c8f85bb922.
Now you should be able to query your data using Gatsby's built-in GraphiQL browser. You'll have root objects for
If you are using any sort of Gatsby starter project you'll already have a file called
pages/index.js. Any file in
pages will get converted to a static page by Gatsby. Let's update this page to query our data and list all blog posts.
Now if you navigate to http://localhost:8000 you'll see a page listing every post in the data set.
Now we can create the pages for each post. Unlike our index file, these are dynamically created based on our data. We'll use
createPages from Gatsby's Node API.
createPages will be called after initial sourcing, transformation of nodes and creation of the GraphQL schema is complete. Now we can update
gatsby-nodes.js to query all posts and create pages using a template called
The data exported from Ghost contains the markdown for each post. All we need to do is pass that content to
markdown-to-jsx to render a post.
Clicking on any article now will show you a nicely formatted blog post.
There we go, my Ghost blog is more or less working on Gatsby. There are however a bunch of outstanding items to be dealt with. Embedded scripts such as Gist's and Expo Snacks aren't being rendered, we need to add some paging to the homepage etc. Stay tuned for future posts as I add features and explore Gatsby.