DEV Community

Shanmukh Sista
Shanmukh Sista

Posted on • Originally published at shanmukhsista.com on

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

Enter fullscreen mode Exit fullscreen mode

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/

Enter fullscreen mode Exit fullscreen mode

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 │
└─────────────┴──────────────────────────────┴─────────┴───────────────────────┴────────────────────────┴──────┴─────────────────┘

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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"
  }
}
Enter fullscreen mode Exit fullscreen mode

Test & Deploy

Test by Executing the command below.

gatsby develop

Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)