Blog | Next.js in the 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.

✨ Features

Ghost CMS integration

• Supports Ghost `v3`

Ghost Casper look & feel

• Fully responsive
• Styled 404 page
• Preview Section in posts
• Sitemap
• RSS feed
• SEO optimized

Extened Casper Styles ✨

• Dark Mode
• Most recent posts pinned on top

Images with Next/Images 🚀

• Auto-optimized images
• No content shifts due to consistent placeholders

Advanced Routing

• Auto-detects custom paths

Integrated Plugins

• Google Analytics 4

NextJS Features

• Incremental Regeneration
• Support for Preview

🎌 Getting Started

git clone https://github.com/censuradho/blog-next.git
cd blog-next
yarn

# Development
yarn dev

# Production
yarn build

🔑 Enviroment vars

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
NEXT_PUBLIC_GOOGLE_ANALYTICS= G-xxxxxxxxxx

Change CMS_GHOST_API_URL and CMS_GHOST_API_KEY with the values that you can generate in your Ghost Admin under Integrations.

Analytics is using the Google Analytics 4, create a new property on console to get the key.

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)
GHOST_URL	https://your-ghost-cms.org
GHOST_KEY	9fccdb0e4ea5b572e2e5b92942
NEXT_PUBLIC_GOOGLE_ANALYTICS	9fccdb0e4ea5b572e2e5b92942

 

For best results, deploying to Vercel is recommended. As an alternative, you can also deploy to Netlify.

(Optional) GHOST Host

To host Ghost cms with a very generous free plan, i recommend Digital press.

 

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

Analytics metrics

According to Lighthouse