draftbox-co / gatsby-attila-theme-starter

A Gatsby starter for creating blogs from headless Ghost CMS.

gatsby-starter-try-ghost

A Gatsby starter for creating blogs from headless Ghost CMS.

Turn your Ghost blog into a lightning fast static website. This Gatsby theme is a front-end replacement of the Ghost Handlebars engine featuring the standard Ghost Casper skin and functionality. All content is sourced from a headless Ghost CMS.

This starter is being used at Draftbox. Get lightning fast, secure front-end for your WordPress or Ghost blog, in 5 minutes or less, without coding. For our fellow devs, we also provide code export feature.

Demo

Play with the Demo to get a first impression.

 

Features

• Ghost Casper skin and functionality
• SEO optimized
• Fully responsive
• Gatsby images
• Styled 404 page
• RSS Feed
• AMP Pages
• Sitemap
• Contact Form
• Subscribe Form
• Social Sharing
• Google Analytics Integration
• Segment Integration
• Disqus Integration
• Composable and extensible

Getting Started

1. Install this starter by running

   gatsby new try-ghost https://github.com/draftbox-co/gatsby-attila-theme-starter

2. Change directory

   cd try-ghost

3. Run

   gatsby develop

   and visit your site at http://localhost:8000.

🧐 What's inside?

A quick look at the top-level files and directories you'll see in a Gatsby project.

.
├── node_modules
├── static
├── .gitignore
├── gatsby-config.js
├── yarn.lock
├── package.json
└── README.md

1. /node_modules: This directory contains all of the modules of code that your project depends on (npm packages) are automatically installed.

2. /static: This directory will contain all of the static files required by theme such as favicon, logo and robot.txt.

3. .gitignore: This file tells git which files it should not track / not maintain a version history for.

4. gatsby-config.js: This is the main configuration file for a Gatsby site. This is where you can specify information about your site (metadata) like the site title and description, which Gatsby plugins you’d like to include, etc. (Check out the config docs for more detail).

5. yarn.lock (See yarn.lock below, first). This is an automatically generated file based on the exact versions of your npm dependencies that were installed for your project. (You won’t change this file directly).

6. package.json: A manifest file for Node.js projects, which includes things like metadata (the project’s name, author, etc). This manifest is how npm knows which packages to install for your project.

7. README.md: A text file containing useful reference information about your project.

Configure

    //siteConfig.js
    module.exports = {
        siteUrl: `https://your-blog.com`, // Do not include a trailing slash!
    
        postsPerPage: 12, //for future use
    
        siteTitleMeta: `Gatsby Starter Ghost CMS`, // This allows an alternative site title for meta data for pages.
        siteDescriptionMeta: `Gastby Starter with Ghost CMS and Casper Skin`, // This allows an site description for meta data for pages.
    
        shareImageWidth: 1000, // Change to the width of your default share image
        shareImageHeight: 523, // Change to the height of your default share image
    
        shortTitle: `Ghost`, // Used for App manifest e.g. Mobile Home Screen
        siteIcon: `favicon.png`, // Logo in /static dir used for SEO, RSS, and App manifest
        backgroundColor: `#e9e9e9`, // Used for Offline Manifest
        themeColor: `#15171A`, // Used for Offline Manifest
    }

In the configuration shown above, the most important fields to be changed are siteUrl, siteTitleMeta and siteDescriptionMeta. Update at least those to fit your needs.

Ghost Content API keys

All content is sourced from a Ghost CMS. If you don't customize the file .ghost.json content is fetched from the demo location at https://cms.gotsby.org. Surely you want to source your own content. Change the keys to match your own Ghost CMS Content API keys:

    {
        "development": {
            "apiUrl": "http://localhost:2368",
            "contentApiKey": "9fccdb0e4ea5b572e2e5b92942"
        },
        "production": {
            "apiUrl": "http://localhost:2368",
            "contentApiKey": "9fccdb0e4ea5b572e2e5b92942"
        }
    }

Deploy

    gatsby build

After completion of the build process your static site can be found in the public/ folder. Copy those files over to your webserver.

Optimizing

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.

Authors

• Arun Priyadarshi (@Gunnerforlife) – Draftbox
• Keyur Raval (@thandaanda) – Draftbox
• Shyam Lohar (@shyamlohar) – Draftbox
• Tanmay Desai (@tanmaydesai89) – Draftbox

Contributions

PRs are welcome! Consider contributing to this project if you are missing feature that is also useful for others.

Copyright & License

Copyright (c) 2020 Draftbox - Released under the MIT license.

gatsby-attila-theme-starter's Issues

Cannot query field "localFeatureImage" on type "GhostPage"

after cloning repo added Ghost 3.0 cms contentApiKey but if gives following error

warn Plugin @draftbox-co/gatsby-theme-ghost-attila is not compatible with your gatsby version 2.24.80 - It requires [email protected]
success open and validate gatsby-configs - 0.094s
warn Plugin @draftbox-co/gatsby-plugin-css-variables is not compatible with your gatsby version 2.24.80 - It requires [email protected]
warn Plugin @draftbox-co/gatsby-theme-ghost-attila is not compatible with your gatsby version 2.24.80 - It requires [email protected]
success load plugins - 0.355s
success onPreInit - 0.025s
success delete html and css files from previous builds - 0.003s
success initialize cache - 0.007s
success copy gatsby files - 0.014s
warn gatsby-plugin-feed was initialized in gatsby-config.js without a title in a feed.
This means that the plugin will use the default feed title, which may not match your use case.
This behavior will be removed in the next major release of gatsby-plugin-feed.
For more info, check out: https://gatsby.dev/adding-rss-feed
success onPreBootstrap - 1.738s
success createSchemaCustomization - 0.011s
success Checking for changed pages - 0.008s
success source and transform nodes - 2.550s
warn Plugin `@draftbox-co/gatsby-theme-ghost-attila` has customized the GraphQL type `GhostPost`, which has already been defined by the plugin `gatsby-source-ghost`. This could potentially
warn Plugin `@draftbox-co/gatsby-theme-ghost-attila` has customized the GraphQL type `GhostPage`, which has already been defined by the plugin `gatsby-source-ghost`. This could potentially
success building schema - 0.392s
info Total nodes: 74, SitePage nodes: 5 (use --verbose for breakdown)
success createPages - 0.041s
success Checking for changed pages - 0.001s
success createPagesStatefully - 0.062s
success update schema - 0.024s
success onPreExtractQueries - 0.003s

 ERROR #85923  GRAPHQL

There was an error in your GraphQL query:

Cannot query field "localFeatureImage" on type "GhostPage".

If you don't expect "localFeatureImage" to exist on the type "GhostPage" it is most likely a typo.
However, if you expect "localFeatureImage" to exist there are a couple of solutions to common problems:

- If you added a new data source and/or changed something inside gatsby-node.js/gatsby-config.js, please try a restart of your development server
- The field might be accessible in another subfield, please try your query in GraphiQL and use the GraphiQL explorer to see which fields you can query and what shape they have
- You want to optionally use your field "localFeatureImage" and right now it is not used anywhere. Therefore Gatsby can't infer the type and add it to the GraphQL schema. A quick fix is to add at least one entry with that field ("dummy content")

It is recommended to explicitly type your GraphQL schema if you want to use optional fields. This way you don't have to add the mentioned "dummy content". Visit our docs to learn how you can define the schema for "GhostPage":
https://www.gatsbyjs.org/docs/schema-customization/#creating-type-definitions

File: node_modules/@draftbox-co/gatsby-theme-ghost-attila/src/templates/pageTemplate.jsx:347:7


 ERROR #85923  GRAPHQL

There was an error in your GraphQL query:

Cannot query field "localFeatureImage" on type "GhostPost".

If you don't expect "localFeatureImage" to exist on the type "GhostPost" it is most likely a typo.
However, if you expect "localFeatureImage" to exist there are a couple of solutions to common problems:

- If you added a new data source and/or changed something inside gatsby-node.js/gatsby-config.js, please try a restart of your development server
- The field might be accessible in another subfield, please try your query in GraphiQL and use the GraphiQL explorer to see which fields you can query and what shape they have
- You want to optionally use your field "localFeatureImage" and right now it is not used anywhere. Therefore Gatsby can't infer the type and add it to the GraphQL schema. A quick fix is to add at least one entry with that field ("dummy content")

It is recommended to explicitly type your GraphQL schema if you want to use optional fields. This way you don't have to add the mentioned "dummy content". Visit our docs to learn how you can define the schema for "GhostPost":
https://www.gatsbyjs.org/docs/schema-customization/#creating-type-definitions

File: node_modules/@draftbox-co/gatsby-theme-ghost-attila/src/templates/postTemplate.amp.jsx:112:7


 ERROR #85923  GRAPHQL

There was an error in your GraphQL query:

Cannot query field "localFeatureImage" on type "GhostPost".

If you don't expect "localFeatureImage" to exist on the type "GhostPost" it is most likely a typo.
However, if you expect "localFeatureImage" to exist there are a couple of solutions to common problems:

- If you added a new data source and/or changed something inside gatsby-node.js/gatsby-config.js, please try a restart of your development server
- The field might be accessible in another subfield, please try your query in GraphiQL and use the GraphiQL explorer to see which fields you can query and what shape they have
- You want to optionally use your field "localFeatureImage" and right now it is not used anywhere. Therefore Gatsby can't infer the type and add it to the GraphQL schema. A quick fix is to add at least one entry with that field ("dummy content")

It is recommended to explicitly type your GraphQL schema if you want to use optional fields. This way you don't have to add the mentioned "dummy content". Visit our docs to learn how you can define the schema for "GhostPost":
https://www.gatsbyjs.org/docs/schema-customization/#creating-type-definitions

File: node_modules/@draftbox-co/gatsby-theme-ghost-attila/src/templates/postTemplate.jsx:371:7

failed extract queries from components - 0.480s

Dependency resolution fails using Node 18 LTS

Using the instructions in the readme, it is not possible to initialise this starter using gatsby new. The following errors are seen.

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/gatsby
npm ERR!   dev gatsby@"2.20.24" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer gatsby@"^4.13.1" from [email protected]
npm ERR! node_modules/gatsby-plugin-mixpanel
npm ERR!   gatsby-plugin-mixpanel@"^3.1.6" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

Using WSL2 on Windows 11, with Ubuntu 22.04. Bare install with python2 and build-essential.