Host Ghost CMS as a Static Website  - Using Gatsby Ghost Template
Tags: gatsby, ghost, cms, personalblog
Published: 2021-08-19 23:27:53

---
title: Host Ghost CMS as a Static Website  - Using Gatsby Ghost Template
published: true
date: 2021-08-19 01:12:32 UTC
tags: Gatsby , Ghost , CMS, PersonalBlog
canonical_url: https://shanmukhsista.com/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](http://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](http://localhost:2368/ghost/#/integrations) to generate a new API Key.

![](https://shanmukhsista.com/content/images/2021/08/Screen-Shot-2021-08-18-at-5.24.34-PM.png)

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

![](https://shanmukhsista.com/content/images/2021/08/Screen-Shot-2021-08-18-at-5.29.37-PM.png)

### 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.