Skip to content

A starter template to build lightning fast websites with Ghost & Gatsby

License

Notifications You must be signed in to change notification settings

uiuxworks/gatsby-starter-ghost

 
 

Repository files navigation

Gastby Starter Ghost

A starter template to build lightning fast websites with Ghost & Gatsby

Demo: https://gatsby.ghost.org

 

gatsby-starter-ghost

 

Installing

# With Gatsby CLI
gatsby new gatsby-starter-ghost https://github.com/TryGhost/gatsby-starter-ghost.git
# From Source
git clone [email protected]:TryGhost/gatsby-starter-ghost.git
cd gatsby-starter-ghost

Then install dependencies

yarn

 

Running

Start the development server. You now have a Gatsby site pulling content from headless Ghost.

gatsby develop

By default, the starter will populate content from a default Ghost install located at https://gatsby.ghost.io.

To use your own install, edit the .ghost.json config file with your credentials. You can find or your contentApiKey in the "Integrations" screen in Ghost Admin.

Because of how Gatsby/GraphQL work, at least 1 copy of every object/field must exist in Ghost for things to function correctly. That means you must have at least 1 post, author, tag, etc - with every single field populated - for the queries to work properly.

As a shortcut, you can download and import this 👉🏼 data-stub.json - which will automatically populate all the required fields, and then be excluded from the Gatsby build.

 

Deploying with Netlify

The starter contains three config files specifically for deploying with Netlify. A netlify.toml file for build settings, a /static/_headers file with default security headers set for all routes, and /static/_redirects to set Netlify custom domain redirects.

To deploy to your Netlify account, hit the button below.

Deploy to Netlify

Content API Keys are generally not considered to be sensitive information, they exist so that they can be changed in the event of abuse so most people commit it directly to their ghost.json config file. If you prefer to keep this information out of your repository you can remove this config and set Netlify ENV variables for production builds instead.

Once deployed, you can set up a Ghost + Netlify Integration to use deploy hooks from Ghost to trigger Netlify rebuilds. That way, any time data changes in Ghost, your site will rebuild on Netlify.

 

Optimising

You can disable the default Ghost Handlebars Theme front-end by enabling the Make this site private flag within your Ghost settings. This enables password protection in front of the Ghost install and sets <meta name="robots" content="noindex" /> so your Gatsby front-end becomes the source of truth for SEO.

 

Extra options

# Run a production build, locally
gatsby build

# Serve a production build, locally
gatsby serve

Gatsby develop uses the dev config in ghost.json - while Gatsby serve uses the production config.

 

Copyright & License

Copyright (c) 2013-2019 Ghost Foundation - Released under the MIT license.

About

A starter template to build lightning fast websites with Ghost & Gatsby

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 83.9%
  • CSS 16.1%