Gatsby Starter Ghost with Simply Theme

A starter template to build lightning fast websites with Ghost (as headless CMS in this case) & Gatsby, using the excellent Simply Ghost Theme. Rewritten from Handlebars theme to React/Gatsby.

Demo: https://gatsby-ghost-simply.netlify.app/

🚀 What is working

Light Mode / Dark Mode
Fast search functionality
Social accounts link
PrismJS syntax highlighting - basic only
Different Home Page variants and Post formats
- Post Format (⚠️ use internal tags and not custom_template field!)
- Layouts Header
  - Header Default
  - Header with DropDown Menu
- Layouts Footer
  - Footer Default
  - Footer Dark
  - Footer Not Menu Secondary
Archive (⚠️ use internal tags and not custom_template field!)
- Authors Page
- Tags Page
Page
- Contact (⚠️ use internal tags and not custom_template field!)
- Kusi Doc for the documentation of your project (⚠️ use internal tags and not custom_template field!)
- 404
- Podcasts Page (⚠️ no need to create the page, just use internal tags on the post)
- Portfolio Page (⚠️ no need to create the page, just use internal tags on the post)
Support for different Languages
Related Articles
Social share buttons support for posts
Previous and next Post
Hamburger navigation menu
Header Transparency
Lazy Loading for feature-images (using gatsby-plugin-image)
Responsive Video
- YouTube
- Vimeo
- kickstarter
- Dailymotion
Resize Image Galleries
Medium style image zoom
GDPR Cookie Consent and Google/Facebook tracking
New Ghost cards (GIF, buttons, NFT, callouts, toggles, quotes, products, audio, video, files, headers)

❌ What is not yet working

Logo Light / Dark Mode
Different Home Page variants and Post formats
- AMP Template
Pagination Infinite Scroll - not for static sites
Comments
Membership features

✏ What could be improved

Move videoResponsive and resizeImageGalleries to build time using some rehype plugin
Convert this from a starter to a proper theme
Extract pretty dates from GraphQL to apply locale to them

🏗 Installing

# With Gatsby CLI
gatsby new gatsby-starter-ghost https://github.com/anarion80/gatsby-ghost-simply.git

# From Source
git clone https://github.com/anarion80/gatsby-ghost-simply.git
cd gatsby-ghost-simply

Then install dependencies

yarn

🏃‍♂️ Running

Start the development server. You now have a Gatsby site pulling content from headless Ghost. You do not need to have original Simply Ghost Theme installed in your Ghost instance, nor have any additional Routes set up there.

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, you will need to edit the .ghost.json config file with your credentials. Change the apiUrl value to the URL of your Ghost site. For Ghost(Pro) customers, this is the Ghost URL ending in .ghost.io, and for people using the self-hosted version of Ghost, it's the same URL used to access your site.

Next, update the contentApiKey value to a key associated with the Ghost site. A key can be provided by creating an integration within Ghost Admin. Navigate to Integrations and click "Add new integration". Name the integration appropriately and click create.

{
    "apiUrl": "https://gatsby.ghost.io",
    "contentApiKey": "9cc5c67c358edfdd81455149d0"
}

Finally, configure your desired URL in siteConfig.js, so links (e. g. canonical links) are generated correctly. You should also update other values in there needed for menu, social sharing and search.

{
    menuDropdown: [
        {
            label: `About`,
            url: `/about`,
        },
        .
        .
        .
    ],
    followSocialMedia: [
        {
            service: `youtube`,
            title: `YOUR_TITLE`,
            url: `YOUR_URL`,
        },
        .
        .
        .
    ],
    searchSettings: {
        key: `YOUR_GHOST_API_KEY`,
        url: `YOUR_GHOST_URL`,
        /* This is optional */
        options: {
            keys: [`title`, `plaintext`],
            limit: 10,
        },
        /* This is optional to perform filtering of the ghost api */
        api: {
            resource: `posts`,
            parameters: {
                limit: `all`,
                fields: [`title`, `slug`, `plaintext`],
                filter: ``,
                include: ``,
                order: ``,
                formats: ``,
            },
        },
    },
}

To use custom post templates, add a particular internal tag to the post (i.e. #custom-post-wide, #custom-kusi-doc, etc).

Demo and the repo is the "maximum version" with all possible types of Home Page variants, Post Templates, Portfolio, Docs, etc. Adjust/remove as needed.

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

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 development config in .ghost.json - while Gatsby build uses the production config.

waxsd100/gatsby-ghost-simply