ghost developer

Using Ghost as a headless CMS

Investigations into using Gatsby to build a static site version of my Ghost CMS blog using the services of Netlify and Render.

Shaun Wilde
a lady in 1920's costume

In a previous post I described how I investigated hosting ghost for free using Heroku and how this will allow me to potentially pull data from Ghost and build it into a static site which I can also get hosted for free (or at least a lot cheaper than what I am currently paying). I did spend some time investigating various site scrapers that would pull the ghost content directly and build a static site and though I could get these (mostly) working locally I couldn't find anyway to run them simply/cheaply in the cloud so that I could automate the process and make the effort of getting the scraper work properly worth it.

Ghost however refers to itself as a headless CMS and so I thought that I'll look into what the community is doing in this space and this is how I came across Gatsby and the deployment/hosting platform called Netlify, as I had a few false starts I'll describe how I got it to work.

Installing and running Gatsby

First download the Gatsby CLI tool using npm and then prepare the starter project that is pre-configured to pull data from Ghost via its API.

npm install -g gatsby-cli
gatsby new gatsby-blog-ghost https://github.com/TryGhost/gatsby-starter-ghost

This will create a folder called gatsby-blog-ghost and inside it will be, after a little configuration, all that is needed to build a static site from the Ghost platfrom.

  1. From the Ghost admin portal create a custom integration
  2. Update the production entry in `.ghost.json` (found in the gatsby-blog-ghost folder) with the supplied API key and API URL
  3. Test the settings work by and navigating to the supplied URL e.g. http://localhost:9000

gatsby build gatsby serve

The downside

The default theme is a not really to my liking and if I want my disqus and algolia integrations then I'll need to do some work on the theme, once I have found one that I like.

Automating the Gatsby build using Netlify

To get Netlify to build and host the blog requires us to push the Gatsby folder created earlier to an online git repository site such as Github and then configure Netlify to build the site from that repository.

  1. Create a private repository on github and add the remote to the git repository in gatsby-blog-ghost and push all changes.
  2. Using Netlify, create a "new site from git" and select the private repository. Netlify will immediately start building your site (and will do so on any change to that repository) and deploy it to the configured netlify.com site.
  3. Automate Netlify to rebuild on ghost site changes by configuring a webhook (Settings/Build & Deploy) and then adding that webhook to the integration created in Ghost to be called when "Site changed (rebuild)".

Now what we have is a static site that will always rebuild whenever the blog is updated whether it be due to changes in content or theme.

Configuring the Netlify site to run as a subdomain

I has some initial issues getting this to work with my Cloudflare DNS as it felt like I had to move my DNS to Netlify and I didn't want to do that, however after some trial and error I managed to get this to work and now the Heroku hosted Ghost site is now being rendered using Gatsby as a subdomain of my main site.

Automating the Gatsby build using Render

This is virtually identical to using Netlify to build and deploy.

  1. Create a private repository on github and add the remote to the git repository in gatsby-blog-ghost and push all changes.
  2. Using Render, create a "New Web Service" and select the private repository. Render will identify the repository as a Gatsby site and set some defaults and then once confirmed will immediately start building your site (and will do so on any change to that repository) and deploy it to the configured render.com site.
  3. Automate Render to rebuild on ghost site changes by configuring a webhook (Settings/Deploy Hook) and then adding that webhook to the integration created in Ghost to be called when "Site changed (rebuild)".

Now what we have is a static site that will always rebuild whenever the blog is updated whether it be due to changes in content or theme.

Configuring the Render site to run as a subdomain

This felt like it was a lot easier than configuring Netlify but this could also because I was now more familiar with the overall DNS configuration in Cloudflare and now the Heroku hosted Ghost site is now being rendered using Gatsby as a subdomain of my main site.

Summary

I think Gatsby may be the way to go here as I think just a little bit of theme-ing will be a lot simpler than getting a static scraper to work and then finding somewhere to host it.

Your feedback is appreciated