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.
- Install Ghost Locally, configure, and publish Articles.
- Create a new Gatsby Static Site
- Connect Gatsby with Ghost Backend
- Test and Generate a Static Site for hosting.
Install Ghost Locally
Requirements
- Nodejs > 14.15.0 ( Install Via NVM )
- 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.
- Google Firebase Hosting
- GCS Hosting
- Netlify
- DigitalOcean
- Github Pages
Or any other provider that has static site hosting supported.
Top comments (0)