Host Ghost CMS as a Static Website - Using Gatsby Ghost Template

I love Ghost CMS for creating content, and it is a personal favorite of mine. In this article, I'll show you how to use Ghost as a Dynamic backend for Creating and Writing content. In the end, I'll show on how to convert the content to a blazing fast static site using Gatsby.

These are the steps which we will be executing in order to host a static site built from Ghost CMS.

1. Install Ghost Locally, configure, and publish Articles.
2. Create a new Gatsby Static Site
3. Connect Gatsby with Ghost Backend
4. Test and Generate a Static Site for hosting.

Install Ghost Locally

Requirements

1. Nodejs > 14.15.0 ( Install Via NVM )
2. NPM & Gatsby CLI

mkdir ghost-local && cd ghost-local
# Switch Node Version if you have nvm
nvm use v14.17.0
npm install ghost-cli@latest -g
ghost install local

A successful install should have the following message.

✔ Checking system Node.js version - found v14.17.5
✔ Checking current folder permissions
✔ Checking memory availability
✔ Checking free space
✔ Checking for latest Ghost version
✔ Setting up install directory
☲ Downloading and installing Ghost v4.12.1 > Installing dependencies > [5/5] Building fresh packages...
✔ Downloading and installing Ghost v4.12.1
✔ Finishing install process
✔ Configuring Ghost
✔ Setting up instance
✔ Starting Ghost

Ghost uses direct mail by default. To set up an alternative email method read our docs at https://ghost.org/docs/config/#mail

-----------------------------------------------------------------------------------

Ghost was installed successfully! To complete setup of your publication, visit:

    http://localhost:2368/ghost/

To view installed sites , use ghost ls command.

 ghost ls
┌─────────────┬──────────────────────────────┬─────────┬───────────────────────┬────────────────────────┬──────┬─────────────────┐
│ Name │ Location │ Version │ Status │ URL │ Port │ Process Manager │
├─────────────┼──────────────────────────────┼─────────┼───────────────────────┼────────────────────────┼──────┼─────────────────┤
│ ghost-local │ ~/personal/shanmukhsista.com │ 4.12.1 │ running (development) │ http://localhost:2368/ │ 2368 │ local │
└─────────────┴──────────────────────────────┴─────────┴───────────────────────┴────────────────────────┴──────┴─────────────────┘

Visit localhost:2368 to view the site.

Time to Check In ( Recommended )

The directory in which Ghost was installed acts as the root for all local content development. It's a good idea to check it in a private git repository.

Keeping this Folder Checked in / Backed Up will help in generating the static site every time content is added / updated.

Create a New Static Site

Now that ghost has been setup on a local machine, it's time to host it on the internet.

Clone a Site Template

# Create a new Directory. This is where the output of your site will reside.
gatsby new static-site https://github.com/TryGhost/gatsby-starter-ghost.git
cd static-site

Connect Gatsby with Ghost Backend

Our static Site will be pulling content from the Ghost that was installed locally. This requires a new API Integration.

Navigate to http://localhost:2368/ghost/#/integrations to generate a new API Key.

Upon Generation, an API key and a URL should be visible.Copy these keys for the next step.

Update API keys for the Static Side Project

Navigate to the static site folder, and open the file .ghost.json file. Replace the apiUrl and contentApiKey that was just generated.

This is the part where we tell Gatsby to pull content from GHOST.

{
  "development": {
    "apiUrl": "http://localhost:2368",
    "contentApiKey": "xxx"
  },
  "production": {
   "apiUrl": "http://localhost:2368",
    "contentApiKey": "xxx"
  }
}

Test & Deploy

Test by Executing the command below.

gatsby develop

Build a Static Site for Hosting

The last step is to build our site and generate static Assets. This allows us to host the site on any of the following :

SITEURL=https://site.com gatsby build

Gatsby should be able to compile and Build a final website available in public directory. Copy all files here to a static site hosting space.

1. Google Firebase Hosting
2. GCS Hosting
3. Netlify
4. DigitalOcean
5. Github Pages

Or any other provider that has static site hosting supported.