Nextjs Templates & Themes Logo Nextjs Templates & Themes
Next Cms Ghost screenshot

Next Cms Ghost

Author Avatar Theme by Styxlab
Updated: 1 Aug 2023
682 Stars

Publish flaring fast blogs with Next.js and Ghost CMS

Github Live Preview

Categories

React Ghost

Overview:

Next CMS Ghost is a React frontend for headless Ghost CMS that allows users to create and publish blogs quickly. It combines the speed and performance of static and server-rendered sites while providing global distribution capabilities. Content creators can continue to use the familiar Ghost authoring system, making it convenient for teams already working with Ghost.

Features:

  • Performance (Lighthouse Score): Next CMS Ghost provides optimized performance, with scores calculated using Lighthouse 6.4.0.
  • NextJS image optimizations: The theme automatically optimizes images, but when deploying to Netlify, image optimization is disabled.
  • Domain Settings: Users can set the SITE_URL environment variable to their site’s public facing URL. If not specified, defaults are used based on the platform (Vercel or Netlify) or set to http://localhost:3000 in other cases.
  • Ghost Content API keys: Content is sourced from a Ghost CMS, and users can choose the most suitable method for their build scenario. Keys can be provided in environment variables or stored in a .env.local file.
  • Deployment: Deploying to Vercel is recommended for best results, but Netlify is also supported.
  • Headless Mode: For better SEO results, it is recommended to disable the default Ghost Handlebars theme frontend by selecting the “Make this site private” flag within the Ghost admin settings.
  • Issue Reporting: Users are encouraged to report any bugs or issues on the next-cms-ghost GitHub repository.

Installation:

To install Next CMS Ghost, follow these steps:

  1. Create a new text file named .env.local in the project root folder.
  2. Open the .env.local file and add the following content:
CMS_GHOST_API_URL = https://your-ghost-cms.org
CMS_GHOST_API_KEY = 9fccdb0e4ea5b572e2e5b92942
  1. Replace https://your-ghost-cms.org with the URL of your Ghost CMS and 9fccdb0e4ea5b572e2e5b92942 with your API key. You can generate the API key in your Ghost Admin under Integrations.
  2. Save the .env.local file.

Summary: Next CMS Ghost is a React frontend for headless Ghost CMS that offers high performance and ease of use for creating and publishing blogs. It provides optimized image handling, customizable domain settings, and integration with Ghost CMS. Deploying to Vercel is recommended for best results. The theme also includes features for improving SEO and bug reporting.