bueller / next-cms-ghost

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

next-cms-ghost

next-cms-ghost

PRs welcome!

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

Lighthouse Score

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.

Deploy with Vercel

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

πŸ’»

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.

About

License:MIT License


Languages

Language:TypeScript 64.1%Language:CSS 34.8%Language:JavaScript 0.5%Language:Shell 0.5%