Navigate back to the homepage

Ghost Gatsby on Netlify - JAMStack

Rommel Porras
October 27th, 2019 · 1 min read

Want to serve your blog for FREE?

Host your website for FREE in Netlify using Ghost headless CMS and Gatsby JAMStack starter pack. Host your Ghost CMS in your local or deploy it in a production server using AWS, DigitalOcean, Heroku, or GCP.

Prerequisites

  • A GitHub, Bitbucket, or Gitlab account

  • Netlify account – FREE!

  • A domain (you can buy it here Namecheap – optional)

  • Node.js (download the current LTS version v12)

Download Ghost Gatsby JAMStack

1npm install ghost-cli@latest -g
2npm install -g gatsby-cli
NPM install ghost-cli

Start Ghost 3.0 locally

Open the Terminal and go to “ghost” directory.

Type ghost start or ghost install local to it. The Ghost 3.0 CMS located in http://localhost:2368

Ghost install local command
Ghost v3 Admin Page

Integration of Gatsby to Ghost API using Setting’s Integration page

  1. Add custom integration in Setting’s Integration (http://localhost:2368/ghost/#/settings/integrations/) page
  2. Copy API URL & Content API Key in Setting’s Integration page
  3. Replace the URL and key in gatsby-config.js of ghost-gatsby-jamstack/gatsby-starter-ghost/ directory.
  4. gatsby develop to gatsby-starter-ghost folder.
  5. Push your repository to your on Git repository.

Always check the images for more info. Check Ghost-Gatsby-Jamstack Github Repository for more commands in Gatsby and Ghost-CLI.

Ghost v3 Gatsby Integration Key in Admin page 1
Ghost v3 Gatsby Integration Key in Admin page 2
Ghost v3 Gatsby Integration Key in Admin page 3
Ghost v3 Gatsby Integration Key in Admin page 4

Ghost & Gatsby CICD on Netlify

  1. Create a Netlify account in https://www.netlify.com/
  2. Create a Github, Gitlab, or Bitbucket account.
  3. Make a repository in your Git account, ex name: my-blog
  4. Git Push the folder ghost-gatsby-jamstack in your my-blog repository.
  5. Connect your Git account’s repository and branch in Netlify (Github, Gitlab, or Bitbucket)
  6. Wait for your site to be built. ^_^
Ghost Gatsby JAMStack Netlify deployment 1
Ghost Gatsby JAMStack Netlify deployment 2
Ghost Gatsby JAMStack Netlify deployment 3
Ghost Gatsby JAMStack Netlify deployment 4
Ghost Gatsby JAMStack Netlify deployment 5

Congratulations on your new free blog!

Just connect your domain to your Netlify generated URL using Namecheap, AWS Route53, or other DNS providers.

Check Ghost-Gatsby-JAMStack repository for more info.

Join our email list and get notified about new content

Be the first to receive our latest content with the ability to opt-out at anytime. We promise to not spam your inbox or share your email with any third parties.

More articles from DevOps Cycle

Backend Engineer Roadmap

The guide to becoming a knowledgeable backend developer. List of must-have skills for backend developers. This guide has information on what and where to learn a backend-specific skill set.

September 2nd, 2019 · 3 min read

DevOps Engineer Roadmap

A simple guide to becoming a knowledgeable DevOps engineer or other related Ops role. This is a tech stack guide for any other related Ops role.

August 22nd, 2019 · 4 min read
© 2019 DevOps Cycle
Link to $https://twitter.com/devopscycleLink to $https://facebook.com/devopscycleLink to $https://github.com/rommelporrasLink to $https://m.do.co/c/1ba0ac3af2f6