gatsby-theme-try-ghost
v2.0.2
Published
A Gatsby theme for building flaring fast blogs from headless Ghost CMS.
Downloads
90
Maintainers
Readme
gatsby-theme-try-ghost
A Gatsby theme plugin for creating blogs from headless Ghost CMS.
Turn your Ghost blog into a flaring fast static website. This Gatsby theme is a frontend replacement of the Ghost handlebars engine featuring the standard Ghost Casper skin and functionality. All content is sourced from a headless Ghost CMS.
Variants 🔥
Favor Next.js over Gatsby? Head over to next-cms-ghost!
Tutorials ✨ 🆕
Check out the Tutorials for practical guides on using this project.
Demo
Play with the Demo to get a first impression.
Features
- Ghost Casper look and feel
- Feature & inline images with lazy-loading and blur-up effect 🚀🚀 🆕
- Infinite Scroll ✨
- Featured posts pinned on top 🆕
- Sticky navigation headers
- Hover on author avatar
- Styled 404 page
- SEO optimized
- Fully responsive
- Advanced routing 🆕
- Composable and extensible
- Incremental build enabled 🚀 🆕
Performance
Plugins
Additional features can be integrated by installing Gatsby themes or plugins. The following plugins have been tested to work with gatsby-theme-try-ghost
:
| Name | Version | Description |
| -------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ |
| gatsby-theme-ghost-dark-mode
| | Dark mode toggle 🌗 |
| gatsby-rehype-ghost-links
| | Rewrite CMS links from absolute to relative |
| gatsby-rehype-inline-images
🆕 | | Lazy-loading inline images with blur-up |
| gatsby-rehype-prismjs
| | Syntax highlighting with PrismJS |
| gatsby-theme-ghost-contact
| | Contact page |
| gatsby-theme-ghost-commento
| | Commenting system with Commento |
| gatsby-theme-ghost-toc
🆕 | | Table of Contents |
| gatsby-theme-ghost-members
🆕 | | Member Subscriptions |
| gatsby-plugin-ackee-tracker
| | Site tracking with Ackee |
| gatsby-plugin-google-analytics
| | Site tracking with Google Analytics |
Installation
Head over to the starter repo to get up and running quickly!
If you want to add this blog theme to an existing site, follow these instructions:
Install the blog theme
yarn add gatsby-theme-try-ghost # or npm install gatsby-theme-try-ghost --save
Add the following configuration to your
gatsby-config.js
file// gatsby-config.js module.exports = { plugins: [ { resolve: `gatsby-theme-try-ghost`, options: { siteConfig: { siteUrl: `https://your-bog.com`, postsPerPage: 3, siteTitleMeta: `Gatsby frontend powered by headless Ghost CMS`, siteDescriptionMeta: `Turn your Ghost blog into a flaring fast static site with Gatsby`, shortTitle: `Ghost`, siteIcon: `favicon.png`, backgroundColor: `#e9e9e9`, themeColor: `#15171A`, gatsbyImages: true, // Overwrite navigation menu (default: []), label is case sensitive // overwriteGhostNavigation: [{ label: `Home`, url: `/` }], }, ghostConfig: { development: { apiUrl: "https://your-ghost-cms.com", contentApiKey: "9fcfdb1e5ea5b472e2e5b92942", }, production: { apiUrl: "https://your-ghost-cms.com", contentApiKey: "9fcfdb1e5ea5b472e2e5b92942", }, }, //routes: { // // Root url for Ghost posts and pages (optional, defaults to `/`) // basePath: `/blog`, // // // Collections (optional , default: []) // collections: [{ // path: `speeches`, // selector: node => node.primary_tag && node.primary_tag.slug === `speeches`, // }], //}, }, }, ], };
Update siteConfig
In the configuration shown above, the most important fields to be changed are
siteUrl
,siteTitleMeta
andsiteDescriptionMeta
. Update at least those to fit your needs. Also make sure yourfavicon.png
can be found in folderstatic
of your working directory.Ghost Content API Keys
Change the
apiUrl
value to the URL of your Ghost CMS site. Next, update thecontentApiKey
value to a key associated with the Ghost CMS site. A key can be provided by creating an integration within Ghost Admin. Navigate to Integrations and click Add new integration. Give the integration a name and click create.Advanced Routing
You can define a
basePath
that is added to all routes, effectively moving all routes one level down. Collections are distinct groups of posts that get an entry point atcollections.path
. Permalinks are best configured inroutes.yaml
of the Ghost CMS.
Running
Start the development server. You now have a Gatsby site pulling content from headless Ghost.
gatsby develop
Ensure headless mode of Ghost CMS
For best SEO results it is strongly recommended to disable the default Ghost Handlebars theme front-end by selecting the Make this site private flag within your Ghost admin 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.
Contributions
Special thanks go to the following contributors: jem, tobimori and Torqu3Wr3nch.
PRs are welcome! Consider contributing to this project if you are missing feature that is also useful for others. Explore this guide, to get some more ideas.
Credits
This project would not be possible without the great Gatsby, Ghost, React, GraphQL, Node and the JavaScript eco-system in general. This project started from a fork of gatsby-starter-ghost
, but has evolved to a different, independent project.
Copyright & License
Copyright (c) 2020 styxlab - Released under the MIT license.