styxlab / Next Cms Ghost
Programming Languages
Projects that are alternatives of or similar to Next Cms Ghost
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
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 🐛 |
This project follows the all-contributors specification. Contributions of any kind welcome!
🧐 Disclaimer
This project is not affiliated with NextJS or Ghost.
Copyright & License
Copyright (c) 2020 styxlab - Released under the MIT license.