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!

🎉 Demo

Play with the Demo to get a first impression.

✨ 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

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

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

Image 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=9fccdb0e4ea5b572e2e5b92942

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

🎈 Contributions

PRs are welcome! Consider contributing to this project if you want to make a better web.

Special thanks goes to these wonderful people (emoji key):

_{Vince Fulco} 📖	_{Manuel Taberna} 🌍	_{Akshat Mittal} 💻	_{christianlauer} 🐛	_{Rahul Suresh} 🐛	_{Miguel Bernard} 💻	_{Stevan Aji} 💻
_{Toan Le} 🐛	_{Davor Budimir} 🐛	_{Simon Holdorf} 🐛	_{Sumit Kumar} 🐛	_francolamcn 🐛	_{Charles Chan} 💻	_{Raihan Ameen} 🐛
_{Andy Grunwald} 📖	_Hikz 💻