How to setup Ghost with Gatsby

Image from Modern publication with Ghost and Gatsby

We all know that Gatsby is a powerful tool to build websites with React. In-fact, it’s how the Chip website was built.

Gatsby allows us to pull data from anywhere and put it into components and allow us to use this data in our own way. This data pulling is powered by GraphQL.

Gatsby Flow

Ghost is headless CMS that allows the users to maintain the content of the page and also allow creating the pages directly from its admin panel.

Ghost was tightly coupled with three things:-

1. Ember.js
2. Node.js API
3. Handlebar.js

Read more about the coupling here. But recently Ghost has launched its open API so we can access the Ghost likely from anywhere.

Setup Ghost with Gatsby

I assume that Node is installed in your local machine, with a package manager, NPM, or Yarn.

There are three steps to set up a Gatsby project with Ghost:-

1. Setting up Ghost in your local machine
2. Creating a Gatsby project
3. Connecting Ghost with your Gatsby project

1. Setting up Ghost in the local machine

Ghost can be installed in the local machine by ghost-CLI. Use the following command to install this:

$ npm install ghost-cli@latest -g

Now to install ghost, create an empty directory and cd into it and run following command:-

$ ghost install local

Once the install is finished you’ll be able to access your new site onhttp://localhost:2368 and http://localhost:2368/ghost to access Ghost Admin. You can open the Ghost admin in your favorite browser.

2. Creating a Gatsby project

We will simply clone the gatsby-starter-ghost to create our Gatsby project. Run the following command in your terminal:

gatsby new gatsby-start-ghost https://github.com/TryGhost/gatsby-starter-ghost.git

Make sure you have installed the Gatsby-CLI before you run this command. After this, you can run yarn command to install the dependencies and gatsby develop to start your development server. You can see your website at http://localhost:8000

3. Connecting Ghost with your Gatsby project

By default, the content you see at http://localhost:8000 is served by default Ghost install at https://gatsby.ghost.io/. But we want to connect our own local ghost so we can control the content of the site.

First of all open, the Ghost Admin located at http://locathost:2368/ghost

Next, create an account and log in. Then you have to create a custom integration for your Gatsby project.

For this go to http://localhost:2368/ghost/#/settings/integrations and click the Add Custom Integration. Enter the name of your custom integration. After creating this you can see a page like this:-

Image after custom integration

Go to your project directory and replace the value of apiUrl and contentApi field with the value on you see on your page, in both development and production.

Restart your development server and 🎉 😍 you have connected your project with Ghost.

Head into your Ghost Admin and create a new page by clicking at pages and publish it. Let’s say URL of this page is /about-me.

Then finally, restart your development server (again) and go to http://localhost:8000/about-me . Your new page has been published!

Thanks for reading. Further resources and references:-

1. Gatsby+Ghost announcement post

2. Ghost on Jamstack