next-cms-ghost
[
]()
The fastest React frontend for headless Ghost CMS.
Create and publish flaring fast blogs with next-cms-ghost. Powered by the React framework Next.js and content fed by headless Ghost, you'll get a production ready hybrid frontend that combines the best of static and server-rendered sites. Most importantly, your website can be easily distributed globally to be served from the edge. At the same time your content creators can continue to work with the Ghost authoring system they are used to.
🔥 Alternative
Check out Blogody for an integrated solution with all the benefits of this repository included!
✨ Features
Ghost CMS integration
- Supports Ghost `v3` and `v4`
Ghost Casper look & feel
- Infinite scroll
- Fully responsive
- Sticky navigation headers
- Hover on author avatar
- Styled 404 page
- Preview Section in posts
- Sitemap
- RSS feed
- SEO optimized
Extened Casper Styles ✨
- Dark Mode
- Featured posts pinned on top
- Customizable navigation headers
- Zoom images on click to full-screen
- Render GitHub Gists
Images with Next/Images 🚀
- Feature and inline images
- Auto-optimized images
- No content shifts due to consistent placeholders
Advanced Routing
- Auto-detects custom paths
- Configurable collections
Developer friendly
- MIT licenced
- Truly open-source
- Easy to contribute
- Made typesafe with TypeScript
Integrated Plugins
- Member Subscriptions
- Commenting with Commento or Disqus
- Syntax highlighting with PrismJS
- Table Of Contents
- Contact Page with built-in notification service
- Google Analytics
NextJS Features
- Incremental Regeneration
- Support for Preview
🚀 Performance
Scores calculated with Lighthouse 6.4.0.
🏁 Getting Started
git clone https://github.com/styxlab/next-cms-ghost.git
cd next-cms-ghost
yarn
# Development
yarn dev
# Production
yarn build
🌀 NextJS image optimizations
The IMAGE_DOMAINS environment variable must contain a comma separated list of all domains that you use for in-sourcing images. For example:
IMAGE_DOMAINS=res.cloudinary.com,yoursource.imgix.netImage optimization is automatically turned off when deploying to Netlify, because it is currently on supported on Netlify.
🌎 Domain Settings
The SITE_URL environment variable should be set to the public facing URL of your site, in most cases to your custom domain.
| Key | Value (example) |
|---|---|
| SITE_URL | https://www.your-blog.org |
If you don't specify SITE_URL, it will get populated according to the following defaults:
| Platform | System Value | Conditions |
|---|---|---|
| Vercel | VERCEL_URL | Automatically expose System Environment Variables must be checked |
| Netlify | URL |
In all other cases SITE_URL is set to http://localhost:3000.
🔑 Ghost Content API keys
All content is sourced from a Ghost CMS. Choose the method according to your build scenario.
Building locally
Create a new text file .env.local in the project root folder with the following content:
CMS_GHOST_API_URL=http://localhost:2368
CMS_GHOST_API_KEY=9fccdb0e4ea5b572e2e5b92942Change CMS_GHOST_API_URL and CMS_GHOST_API_KEY with the values that you can generate in your Ghost Admin under Integrations.
Building with cloud providers
If you build your project with a cloud provider, the best option is to provide the keys with environment variables:
| Key | Value (example) |
|---|---|
| CMS_GHOST_API_URL | https:\/\/your-ghost-cms.org |
| CMS_GHOST_API_KEY | 9fccdb0e4ea5b572e2e5b92942 |
💫 Deploy
For best results, deploying to Vercel is recommended. As an alternative, you can also deploy to Netlify.
🤯 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.
💣 Reporting issues
Please report all bugs and issues at next-cms-ghost/issues.