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:
- Exporting data and images from my old Ghost blog.
- Using this data in Gatsby.
- Create an index and blog post pages.
Exporting existing data
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
Using this data with Gatsby
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 and 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 gatsby-config.js:
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 posts, tags, etc.
Creating an index page
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.
Creating pages for posts
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 /src/templates/post.js.
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.