February 6, 2019

Ghost as an headless CMS for Gatsby

Ghost as an headless CMS for Gatsby

I've used Ghost in the last new years for the Fabricademy website, but until recently I didn't realize it could be a good fit for managing content, having an external frontend app serving the content.

A quite interesting solution is using Gatsby + Ghost starter.

What you get is the flexibility of Gatsby for static sites written in React plus the nice Ghost CMS admin.

Setup is really easy:

- install ghost somewhere if you don't have already. I'm not sure which version is supported but the latest works

- setup an integration on your ghost install and generate an Content API key

- follow the instructions on the Gatsby ghost starter then edit the `ghost.json` file with your content api key

How it works

The Gatsby build process fetches all posts, tags and authors from the ghost instance, making them available as sources for the react templates.

The Gatsby production build is a static site including all the content. So I can run this on the Gitlab CI and setup a web hook from ghost (same form used to generate the api key) and update the site any time I publish on Ghost.

The starter includes a Casper like theme which is a good base for customizing.

I plan to update the Fabricademy site to use something like this. I already explored few alternatives including Cloudcannon and Forestry.io but they feel a bit of a hack compared to a db-based cms.

Check out this post the Gatsby blog for more details on the integration with Ghost.