next-cms-ghost

Create and publish flaring fast blogs with this Jamify blogging system. Powered by the React framework Next.js and content fed by headless Ghost, you'll get a production ready hybrid static & server-rendered website that you can easily distribute globally. At the same time your content creators can continue to work with the Ghost authoring system they are used to.

🎉 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

You must add all domains that you use for in-sourcing images in the next.config.js file, for example:

module.exports = {
  images: {
    domains: ['images.unsplash.com', 'static.gotsby.org'],
  },
}

Note that image optimization does not work with Netlify. Therefore, image optimization is automatically turned off when deploying to 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:

CMS_GHOST_API_URL=http://localhost:2368
CMS_GHOST_API_KEY=9fccdb0e4ea5b572e2e5b92942

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://cms.your-blog.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} 🐛