ghost headless cms

Using Ghost as a Headless CMS

Published on May 06, 2022 in platforms by Jerry Ejonavi 13 minute read

Ghost, an open source publishing platform built with Node.js, provides a good editing experience and integrations with popular apps and tools out of the box. Its extensive feature set allows users to set up a wide range of content-focused experiences, from developer blogs to newsletters, and exclusive paid-for articles.

Ghost can also be used as a headless content management system (CMS) and is compatible with the major frontend frameworks. There are detailed guides for setting up a custom frontend using any of the popular frameworks or static-site generators.

This tutorial will focus on setting up a local Ghost installation as a headless CMS for a Next.js frontend.

Why Use Ghost as a Headless CMS?

When you set up a new site with Ghost, you get a frontend configured with its default theme, Casper. The Casper theme is responsive and has dark-mode support, among other features. This ensures your readers get the best reading experience regardless of their device, browser, or aesthetic preferences.

Casper can also be modified to your brand’s needs. The Ghost admin provides settings that you can adjust as you like. But if you don’t want to use Ghost with the default frontend, its flexible architecture allows you to use a custom frontend.

The Ghost API serves content with properly formatted and SEO-optimized HTML . Ghost also supports and parses Markdown content correctly, so you can write your content in Markdown and publish from anywhere .

As a CMS, Ghost is designed to get out of your way when you’re performing most actions. The admin site provides access to features such as user subscriptions and email newsletters. Members can be imported from a CSV file or added manually by sending an email invite. You can also set up your site to collect payments from subscribers in a few clicks using Stripe, Ghost’s default payment integration.

You’ll find that the Ghost editor matches your content’s needs—simple or complex—without being visually distracting. This flexibility and simplicity makes Ghost a good option for a headless CMS service.

Implementing Ghost as a Headless CMS

You can install Ghost locally on your own server or use the paid hosted solution provided by Ghost (Ghost Pro). In this tutorial, you will be setting up a local installation because it is the easiest way to set up a Ghost site.

Prerequisites

Here’s what you’ll need to follow this tutorial:

• some knowledge of JavaScript
• some knowledge of React
• Node installed on your computer. Note that Ghost supports the last three long-term support (LTS) Node versions .
• npm or yarn installed on your computer

The source code for this tutorial can be found here .

Installing Ghost

Installing Ghost locally is fairly straightforward thanks to the Ghost command line interface (CLI) tool .

The Ghost CLI is a single binary that provides commands to make installing, updating, and troubleshooting Ghost installations easy. It is recommended that you install the CLI globally, especially because you will be reusing the tool across multiple projects.

You can install or update (if you already have it installed) the Ghost CLI by running the following command in your terminal:

Running ghost -v when the installation is completed should give you an output similar to this:

Now that you have the CLI installed, you can install Ghost. The CLI provides a command for this: ghost install local . Without passing any options, running this command will set up a development installation of Ghost using the latest available version.

In your terminal, create a new directory where Ghost will be installed. You can name the directory whatever you like. For this tutorial, the directory will be named ghost-headless-cms :

Next, cd into the newly created directory and run the command to install Ghost:

If everything goes well, you should have the following output in your terminal:

Note that the ghost install command concludes by starting or serving your Ghost site in the background. You can stop this process at any time by running ghost stop within the folder where you installed Ghost. In this case, this means running the following command(s):

You can view your newly created Ghost site by visiting http://localhost:2368 in your browser.

After creating a Ghost site, you need to create a new user with administrator privileges. An admin user can create posts and pages, manage your site’s settings, and create custom integrations, as well as add authors, editors, contributors, or other administrators to the site.

To create an admin user, navigate to http://localhost:2368/ghost and fill in the required information.

Creating a Next.js App

Now that you have your Ghost site up and running, you can create your custom frontend. You’ll be working with Next.js, a React framework that is optimized for production. If you are unfamiliar with Next.js or need to refresh your knowledge, consult this Next.js Foundations course .

Note that this tutorial only covers fetching and displaying posts. You will get the most out of your custom frontend by re-implementing this list of features already handled by Ghost.

Next.js can be installed manually or automatically using the create-next-app script. This script takes care of everything related to setting up a new Next.js project, including, but not limited to, the following:

• installing next and react
• creating the necessary folders for serving pages and static assets
• setting up scripts for running a development server and building for production

To create a project, run the following command in your terminal:

You can view the newly created app by running yarn dev or npm run dev from within the project root, and navigating to http://localhost:3000 in your browser.

With your Next.js app created, you can connect it to your Ghost site.

Connecting Ghost and Next.js

Working with Ghost as a headless CMS means making API requests from a JavaScript application. This can seem daunting, especially if you are not familiar with Ghost’s API documentation or working with APIs in general.

Fortunately, Ghost provides a JavaScript library that abstracts away these issues. You’ll use this library to retrieve posts from Ghost and render them in your app’s home page.

First, you’ll need to generate an API key from within your Ghost admin dashboard. This key is required to access content from a Ghost site externally. To obtain a key, navigate to your Ghost admin in your browser and ensure you are logged in with the credentials you created earlier.

Navigate to Settings → Integrations and create a custom integration using the button at the bottom of the page. You can name the integration whatever you like.

You will be redirected to a page showing you information about the integration. Take note of the string labeled “Content API key,” since you will be needing it later.

To get started with the Content API, make sure you’re in your Next.js project directory, then install the library using your package manager:

Next, add a folder named utils at the root of your project and create a file named index.js in the folder. This file will contain an instance of the Ghost Content API as well as functions for fetching bulk and single posts from your Ghost site.

Add the code below to the file you just created:

The API instance you just created exposes five properties, with each corresponding to content that can be fetched from a Ghost site: posts , pages , authors , settings , and tags . Each property in turn exposes two methods:

• browse for fetching bulk data
• read for fetching a single item matching a unique identifier (slug or ID)

Now add the code for fetching bulk and single posts from your Ghost site:

To tie it all together, open the pages/index.js file and import the getPosts function. Then, making use of Next’s static-site generation feature, pass the posts retrieved as props to the Home component:

Finally, render the posts within the Home component:

With static-site generation, Next.js builds your app’s pages as static HTML that can be cached or served over a CDN.

You can reload your Next app to see the changes you’ve made so far. If everything is okay, you’ll see a link rendered with the text “Coming soon.”

Note that this link points to the default Ghost installation. Ideally, you’ll want to have greater control over how content from your Ghost site is rendered. In the next step, you’ll see how to use Next’s dynamic routing feature to render content for a single post in your Next app.

Rendering a Single Post

You were introduced to Next’s static-site generation feature when setting up the Home component. In this section, you’re going to use the same feature to generate static pages for posts from your Ghost site.

It is possible to create a dynamic route or page in Next by saving a file in the pages folder with the following format:

You have a parameter (a URL slug or entity ID) wrapped with brackets, which is passed to your page as a query parameter. The matched parameter can be accessed by using Next’s useRouter hook within a page, or from the context parameter in a getStaticProps function.

Make sure you are in the Next app’s root folder, then run the following commands to create a dynamic page that matches post slugs within a post folder:

You need to instruct Next.js on how to statically generate post pages. You can do this by exporting a function named getStaticPaths from your [slug].js file. Open this file and add the following code:

You can now fetch a single post and pass the data as props to the component that will render the posts. To do this, update the imports at the top of the file to include the getSinglePost function you created earlier and the Next Head component:

Add the code for getting the post data and rendering the component:

Finally, replace the anchor tag in the Home component with Next’s Link component. This takes care of client-side routing, allowing you to browse through pages within your Next app.

Don’t forget to import the Link component at the top of your file like this:

You can reload your app in the browser to see the changes you’ve just made. Notice that the app now correctly loads posts within your Next app, instead of your Ghost site.

Creating Content

Creating content for your site is easy. Note that non-admin users can create content on your Ghost site, but there are restrictions on who can publish content. The image below illustrates the level of access each user has:

To create a new post, navigate to the Ghost admin site and select Posts from the left-sided menu. On mobile, this menu is at the bottom of the page.

Selecting New Post will take you to the editor page, where you can add a title and content:

You can see what your post will look like when published by selecting Preview from the top right corner on the editor. When you’re ready to go live with a post, select Publish from the editor or preview page. You can publish immediately or schedule a date in the future.

Now that you’ve set up your Ghost frontend with Next.js, take some time to play around with the Ghost CMS. As you can see, Ghost provides a solid framework to start content publishing but hands over the keys to your creativity on demand.

To check your work in this tutorial, consult the GitHub repo .

If you’re looking for content for your new website or blogging platform, consider Draft.dev . The technical marketing content company creates tutorials, blog posts, and other types of content for software startups around the world. Draft.dev ensures its content is technically accurate and high-quality, freeing up your team to focus on writing code. To learn more, schedule a call .

By Jerry Ejonavi

I love building software for the web, writing about web technologies, and playing video games.

Build a Blog that Software Developers Will Read

The Technical Content Manager’s Playbook is a collection of resources you can use to manage a high-quality, technical blog:

• A template for creating content briefs
• An Airtable publishing calendar
• A technical blogging style guide

About Ghost + Gatsby

Use Ghost as a completely decoupled headless CMS and bring your own front-end written in Gatsby.js

Build an API driven static-site

There has been a lot of progress around static site generators, front end frameworks and API-centric infrastructure in recent years, which has generated some very cool products, like Gatsby. Since Ghost allows you to completely replace its default Handlebars theme layer in favour of a front-end framework, you can use Gatsby to build your site statically from the Ghost API.

The headless-cms revolution

Using a static site generator usually involves storing Markdown files locally in the code repository. This would involve using a code editor to write content and a GIT workflow to publish - which works fine for small sites or developers. However, it's not ideal for professional publishers that need to scale. This is where a headless CMS comes in!

Instead, you can use Ghost for authoring, and then build out your front-end in Gatsby to pull content from the Ghost API. This provides several benefits for publishers:

• Developers can use their preferred stack
• Writers have their preferred editor & content management
• Performance is the maximum possible
• Security is the maximum possible
• Your site will be extremely scalable

Building sites in this way has become known as the JAMstack - (as in J avaScript, A PIs, M arkup). When you look at the bigger picture of the content mesh , it really starts to feel like an inevitable future for building websites.

Official Gatsby.js Source Plugin + Starter

We rebuilt our entire Ghost Docs site with a front-end written in Gatsby.js - which is a great example of what can be achieved with Ghost and Gatsby in the wild. We also shipped a few things to help others build their own sites using the same stack:

⚡ gatsby-source-ghost plugin

A straightforward Gatsby source plugin which wraps the Ghost API and makes it compatible with Gatsby and GraphQL, so it's quick and easy to load all your Ghost data into any Gatsby project.

⚡ gatsby-starter-ghost

An official Gatsby starter repository which is pre-configured to get content from Ghost and output it in a clean, blog-style design. The fastest way to get up and running with Gatsby and Ghost is to fork this repository, and check out our Gatsby docs .

Official Netlify Support

Deploying a static site with Gatsby and Ghost should be easy - so we've partnered with Netlify, which we also use for Ghost Docs:

⚡ Netlify integration for Ghost

The official integration guide for Netlify  explains how to set up outgoing webhooks in Ghost to trigger a site rebuild on Netlify. This means that any time you publish, update or remove any content in Ghost, the front end will update.

Future-proof publishing

Converging disparate technologies under a single front-end centralises otherwise decentralised services in a way which caters predominantly to the needs of the site owner, rather than the platform and fosters flexibility and scalability.

No more platform-specific plugins and extensions. Just one front-end, and many APIs; all connected together and served as a single site or application with Gatsby!

Ghost vs. Contentful: Choosing the Right Headless CMS for Your Team

Posted by Chisom Uma on October 17, 2023

Choosing the right CMS can be a bit daunting, especially when there are so many options to choose from. In this article, however, we will be comparing two great headless solutions, Ghost and Contentful, from a developer's perspective. Both CMSs have features that help efficiently create, manage, and distribute content so why compare them from the unique perspective of a developer? You may ask.

Well, developers are undoubtedly important when it comes to the implementation of a headless CMS . Developers are responsible for customizing the CMS to meet the specific needs of the organization (adding or modifying features, creating new user roles and permissions, and integrating with other systems, etc.), as well as website performance optimization, security, and third-party integrations with existing tech stacks via APIs.

Nevertheless, there are some important buying criteria to consider when choosing a headless CMS as a developer that we implore you to keep in mind while reading this comparison. This includes API capabilities, ease of setup, ease of use, ease of admin, speed to launch, native SDKs, ability to purge CDN cache, developer-friendly, seamless migration, and security. 

Additionally, since we are comparing these two headless CMSs, it's important to note how ButterCMS presents itself as an alternative to both. ButterCMS is a powerful headless CMS solution with a super intuitive customer-centric dashboard and an API-first approach for modern web development. We will discuss Butter in more detail towards the end of this comparison. 

For now, let's dive in and help you decide which CMS is best for your tram.

Table of contents

Core features of contentful, pros of contentful, cons of contentful.

• Contentful pricing

Core features of Ghost

Pros of ghost, cons of ghost.

• Ghost pricing

Ghost vs. Contentful Feature Comparison Chart

Buttercms as a welcomed alternative.

• ButterCMS vs. Ghost vs. Contentful User Comparison Chart

Final thoughts

Contentful, explained.

Contentful refers to itself as a “composable content platform,” meaning that with its platform, you can create, manage, and distribute content to multiple platforms, such as websites, mobile apps, and IoT devices. 

For developers, the platform offers a rich set of APIs for added flexibility. There is also support for languages and frameworks, such as .NET, JavaScript, Go, PHP, and more. 

Let’s look at some of the core features of Contentful:

Starter Templates : A starter template is a pre-built set of files and directory structures (content model, GitHub repo, and frontend review) that serve as a foundational starting point for a new project. Contentful has a Next.js starter template for marketing, blog, and e-commerce websites. The starter template shows a developer-friendly CMS.

API Set : Another one of its features is its robust API set that provides developers with tools to manage, deliver, and integrate content across various platforms and devices. Contentful's primary API offerings include the Content Delivery API (CDA), Content Management API (CMA), Content Review API, Images API, and GraphQL Content API. Its API set shows it has API capabilities.

Contentful SDKs : Contentful provides SDKs for popular programming languages and frameworks such as JavaScript, Python, Ruby, Java, PHP, and . NET. These SDKs help developers interact with Contentful's APIs more easily by offering language-specific methods, classes, and functions. Additionally, Contentful offers the App SDK (formerly known as UI Extensions SDK) . This SDK is a JS library that allows developers to create custom Contentful Apps. This shows its developer-friendly nature.

Webhooks : Webhooks are a method for one system to provide real-time data to another system as soon as an event occurs. In the context of Contentful, webhooks allow you to receive notifications about events in your Contentful space (e.g. when an entry is published, updated, or deleted). 

Localization : Contentful offers powerful localization features, such as multiple locales, localized content fields, translations, and more, via its content management API. Developers can add a new locale, localize fields, edit the default locale, and more. Localization is Contentful is backed by its API capabilities. 

Contentful CLI : The Contentful CLI is a tool provided by Contentful to interact with their platform directly from the command line. It's designed to help developers manage their Contentful spaces, content models, data, and other functionalities without having to use the web interface. Having a CLI showcases its developer-friendly nature.

Contentful has several benefits for developers. Let’s take a look at some of these benefits:

Extendable Interface

Contentful's extendable interface refers to the ability of Contentful to be customized and enhanced through extensions. These extensions can be as simple as a custom input field or as complex as a complete mini-application running within the Contentful web app. Developers can develop these extensions using modern web technologies like React, Vue, or vanilla JavaScript.

Contentful's App Framework allows for integrations between Contentful and third-party services. For instance, developers might build apps that connect Contentful with eCommerce platforms, translation services, or marketing analytics tools. The extendable interface means a developer-friendly platform.

Structured Content Model

In Contentful, developers can define custom content types with fields that match the specific needs of their projects. This ensures that the content aligns with the unique requirements of each application.

Rich Media Management

Contentful offers integrations with Digital Asset Management (DAM) providers such as Bynder, Cloudinary , and Dropbox. This allows developers to handle images, videos, and other media assets via APIs. Automatic image optimizations, transformations, and delivery via a CDN are also natively supported within the platform.

Contentful also allows developers to upload assets manually programmatically using their API. 

Migration Tooling

Contentful provides tools like the Content Management API and the Migration CLI . Developers can automate content migrations, making changing content models or moving content en masse easier. This leads to a developer-friendly environment.

Contentful has disadvantages we should look at:

API Limitations

In Contentful, one of the challenges users encounter pertains to the limitations of its APIs, particularly when leveraging GraphQL . A notable constraint is the inability to perform nested queries in GraphQL. This means that users can't delve into multiple layers deep in a single query, which can limit the depth and breadth of information retrievable in a single request.

The issue of query complexity further exacerbates this limitation. When the system determines that a query is too complex—based on the number of fields requested, the depth of the query, or other factors—it imposes restrictions. This can hinder the flexibility and efficiency one might hope to achieve with GraphQL, requiring multiple simpler queries or alternate methods to retrieve all desired data. 

As a result, these API constraints can impede smooth and optimized data retrieval for developers. Negatively impact the API capabilities of a CMS.

Contentful places restrictions on the frequency of API requests (which is currently 7 calls per second) a user or application can make within a specified time frame, known as rate limits . Subsequent requests can be temporarily blocked or delayed if these limits are exceeded. For larger websites or applications that see a lot of traffic or frequently update content, these rate limits can impede, potentially causing slowdowns or interruptions in content delivery or updates. Having this amount of rate limit can negatively affect ease-of-use and speed-to-launch.

Advanced Querying and Filtering

Contentful's query and filtering capabilities are robust but may require developers to write complex queries to retrieve specific subsets of content. This can be time-consuming and may lead to performance challenges for large datasets. This can lead to a negative impact on the speed-to-launch.

Data Import Challenges

A problem developers face with Contentful is the difficulty in importing large amounts of data directly. Instead of having a straightforward built-in tool to manage bulk data imports, developers often find themselves having to craft custom scripts to facilitate these imports via the API. 

This means additional work, potential errors, and an increased dependency on technical expertise, making the process less efficient and more complex for those looking to migrate or incorporate large datasets into Contentful.

Vendor lock-in

Vendor lock-in refers to situations where a user or organization becomes overly reliant on a specific product or service, making transitioning to another solution difficult. In the case of Contentful, even though it's a headless CMS designed to provide more flexibility in terms of front-end development, developers can still face challenges when trying to migrate to a different CMS. 

This is particularly true if they've made extensive customizations or have deeply integrated their systems with Contentful's APIs. Migrating away would then require significant effort to reconfigure, adapt, or rewrite those integrations and customizations to be compatible with a new platform, making the switch cumbersome and time-consuming for developers. This could hinder a seamless migration process.

Contentful Pricing

Let's take a look at Contentful Pricing.

You can find a more comprehensive overview of Contentful’s pricing structure on their website. 

Ghost, Explained

Ghost, referring to themselves as “The Creator Economy Platform,” is an open-source headless CMS built on Node.js. Like Contentful, the company was also founded in 2013. The platform is written in JavaScript and distributed under the MIT license.

Ghost is mostly referred to as a  free and open-source blogging software/platform and a non-profit organization, meaning that customer subscriptions fund it and are not open for sale to investors.

Let’s dive in and look at some of the core features developers should focus on.

Custom Redirects : The "Custom Redirects" feature in Ghost CMS allows you to manage custom 301 and 302 redirects within your website. This feature is particularly useful when redirecting old URLs to new locations due to changes in your content structure, permalink structure, or website restructuring.

Support for Markdown : Markdown is a great way to keep text lightweight and readable. Especially for developers who create technical content with code included. With Ghost, you can create content in markdown format and even create custom markdown cards to improve the authoring experience. Having a CMS with support for markdown prompts a developer-friendly environment.

Custom HTML Cards : Custom HTML Cards essentially allow users to embed raw HTML, CSS, and even JavaScript directly into a post or page. This is especially valuable for users who have specific design or functionality needs that are not met by Ghost's default tools and integrations. By directly inserting custom code, users can create unique layouts, designs, interactive elements, or anything else that can be achieved with web technologies. Again, promotes a developer-friendly environment. 

Ember.js Admin client : Ember.js is a modern JavaScript framework designed for creating powerful web applications. Ghost CMS has an integrated "out-of-the-box" Ember.js admin client. What this means is that when you use GhostCMS for your blogging or content platform, you are also provided with an administrative interface developed using the Ember.js framework. However, you can develop custom admin clients, while Ghost can then send over your data via API. This promotes an ease-to-use platform coupled with API capabilities.

Ghost CLI : Like Contentful, Ghost also has a CLI tool for managing installations. The CLI tool facilitates the streamlined management and operation of Ghost installations, catering to both new users and advanced developers alike. It offers a suite of commands to run directly on your terminal or command prompt.

Restful JSON API : At its core, Ghost is a self-consuming RESTful JSON API, built with a loosely coupled service-based architecture for flexibility purposes. "RESTful" means it uses a standard way of accessing and updating data over the internet. The term "JSON" signifies that it communicates using a common, easy-to-read data formats. "Self-consuming" highlights that GhostCMS uses its own API for its operations, proving the API's robustness. When we mention "loosely coupled service-based architecture," it's about GhostCMS's design where components work independently but smoothly together. This shows the platform's API capabilities.

Default Handlebars.js Theme : Handlebars.js is a popular templating engine that allows you to build semantic templates effectively. In the context of Ghost, Handlebars are used to create themes that dictate the look, feel, and interactivity of your content. Ghost comes pre-configured to work with Handlebars themes, making it easy for you to build a custom publication without digging into more complex back-end code.

Ghost has several benefits for developers, bloggers, marketers, and businesses. Let’s take a look at some of these benefits:

Support for both SQLite and MySQL

Ghost offers support for both SQLite and MySQL databases . SQLite is lightweight, doesn't require a separate server setup, and is ideal for developers who want a straightforward, file-based database for smaller websites or when starting development. 

On the other hand, MySQL is used for larger websites or those expecting higher traffic. Support for SQLite and MySQL shows a developer-friendly CMS.

Markdown-Based Content

Ghost uses Markdown for content creation, which is a plain-text formatting syntax. Developers often find Markdown easy to work with, as it allows developers to create technical writing content using a simple and consistent format that can be easily transformed into HTML. 

One of Ghost's benefits is its commitment to being bloat-free. Ghost provides only what's necessary, leading to cleaner code, better performance, and fewer potential points of failure. This could potentially lead to faster loading times and optimized server resources (RAM and CPU).

Built-in SEO Tools for Developers

Ghost includes built-in SEO features like automatic XML sitemaps, canonical tags, and clean HTML markup. These features simplify SEO optimization for developers building a blog website.

Let’s quickly look at some of Ghost’s disadvantages.

Smaller Plugin Ecosystem

Ghost is known for its simplicity and sleekness. However, when compared to some of the older or more established CMS platforms like Contentful, Ghost's ecosystem doesn't have as vast an array of plugins and add-ons. A smaller plugin ecosystem negatively impacts a developer-friendly environment.

Faults with its Open-Source System

While Ghost offers an open-source system, it has obvious downsides. It’s either you are really tech-savvy, or you have to rely heavily on experienced developers. If anything goes wrong with your site or content, developers have to figure out a way to fix it (not so fun for developers), as Ghost does not have a dedicated customer service for their open-source subscription. 

You also have to pay for web hosting, so it’s not entirely “free.” You can use the Ghost PRO plan if the issues with its open-source are a huge challenge for you. 

No Official Page Builder

Ghost is primarily designed for blogging. Users have reported that it doesn't come with a native page builder. If you're looking to build complex, dynamic layouts, you might need to integrate other tools or write custom code. Developers should be focused on other implementations rather than always building custom codes.

Limited Website Functionality

Ghost has some issues in terms of website functionality when compared to more comprehensive CMS platforms. This is because Ghost is focused on blogging and publishing of articles. If you are looking to expand your website's capabilities beyond blogging, such as adding e-commerce features, custom data fields, or complex user interactions, Ghost might not be the best option for you unless your focus is creating blog content as part of your marketing strategy.

Developers might also find themselves constrained if they wish to scale or pivot their website into more complex areas. The result? An unhappy user/developer who later realized they needed to scale up their website or include more customized features. 

Limited Multi-Language Support

Out of the box, Ghost doesn't provide comprehensive multi-language support for content. If you're trying to build a multilingual site or create multilingual content, you'll need to rely on third-party integrations or custom development (extra work for developers). This could mean more development time and costs and slower time-to-market. Limited multi-language support leads to a negative impact on speed-to-lunch.

Ghost Pricing

Here is a breakdown of Ghost’s pricing

For a more comprehensive overview of Ghost’s pricing structure, visit the website.

As discussed earlier, ButterCMS is a great option, and it is important to discuss what makes it stand out when discussing Ghost and Contentful CMS as solutions to consider.

ButterCMS is an API-first headless CMS. The platform is cloud-based, and even non-coders can get started without the need for technical expertise. ButterCMS offers several powerful features for developers and enterprises, including its out-of-the-box blog engine, flexible content models, customizable templates, and SEO optimization tools for marketers. 

How ButterCMS stands out

Here is how ButterCMS stands out from the Ghost and Contentful.

Ease-of-use:

ButterCMS has a simple, user-friendly interface, and getting started with a CMS has never been easier with ButterCMS. According to Bob Lauer | Director of Engineering at Lambda School, “Butter was by far the easiest to get set up . The integration was super straightforward, and the development was a breeze, and porting over our existing blog posts was no problem. The documentation was really good.”

Once you create your account, you are welcomed to the visually appealing interface that is easy to explore and navigate. Developers can easily integrate ButterCMS with any front-end framework via ButterCMS read or write APIs without any difficulty. 

Speed to Launch

While some CMS platforms like Contentful are known for a steep learning curve , often requiring extensive setup and configuration. ButterCMS offers a streamlined process that allows developers to integrate and deploy rapidly. This means businesses can get their content live faster, without the typical delays associated with more complex systems. A great example is ButterCMS helping Scripted migrate and launch a new blog in “less than a week”. See case study .

The intuitive interface and developer-friendly tools further enhance the quick launch capability, making it a preferred choice for those aiming to decrease time-to-market.

Tech stack breadth

ButterCMS’s API-first architecture makes it easy to connect or use any tech-stack of your choice. With ButterCMS API, content marketers can create compelling blog posts, landing pages, SEO pages, product marketing pages, and many more. ButterCMS also provides SDK support for 29 various languages and frameworks. 

Let’s not even forget the fact that ButterCMS lets you connect and develop with any popular web development framework of your choice, such as Android, IOS, Angular, Django, Express.js, Flutter, Gatsby.js, Gridsome, React, and many more. An awesome capability you can’t get from using Ghost.

It doesn't just end there. ButterCMS introduced support for the Spring Framework . A “powerful and widely used Java-based framework for building robust web applications. With ButterCMS’s Spring support, you can seamlessly integrate our CMS into your Spring-powered projects, taking advantage of its extensive features and flexibility.” This shows ButterCMS powerful API capabilities.

Built-in blog engine

ButterCMS has an in-built headless blog engine that can be seamlessly integrated into any tech-stack of your choice to help you create high-quality blog content. The blog engine has optimized SEO out-of-the-box and a WYSIWYG editor to improve the authoring experience of developers and marketers. This feature makes ButterCMS stand out against Ghost and Contentful. This makes ButterCMS a flexible and easy-to-use platform.

Seamless Migrations

ButterCMS ensures smooth and hassle-free migrating of content and data from one platform to ButterCMS. This feature eliminates the typical challenges and disruptions associated with content migrations, allowing developers to effortlessly switch to ButterCMS without losing valuable data or facing downtime. ButterCMS lets developers migrate a page type or collection, which can be seamlessly integrated into your production environment when ready. This is evident in the Lambda case study, where ButterCMS helped them seamlessly migrate their blog from Medium to their own website in two days (See case study) . ButterCMS offers seamless migration. An important buying criteria to look out for.

Drag and drop component functionality

ButterCMS lets you re-order an entire section as well as the structure of a page when creating landing pages by dragging and dropping components seamlessly. This functionality makes it easy for developers to move or reorganize components when building a landing page for a website. The drag-and-drop functionality makes it easy to build landing pages faster, fostering speed-to-launch.

Built-in Version History

ButterCMS lets you view and restore prior version histories out-of-the-box. This feature is very important for developers, especially when working with team members. Without a version history functionality, important information can be erased when creating content and is hard to recover. Unfortunately, Ghost CMS does not offer a built-in version history functionality. Although, Contentful also has this feature.

Security and compliance

Data on Contentful is hosted on AWS data centers, a very serious commitment to ensuring user data safety. ButterCMS follows leading industry standards and certificates for ensuring security and compliance with regulations. This includes, SOC 1, SOC 2/SSAE, ISO 27001, PCI Level 1, Sarbanes-Oxley (SOX), and FISMA Moderate. What else? ButterCMS ensures your data is backed up daily.  ButterCMS offers strong security, an important buying criteria for developers.

Closed Sourced & Fully Hosted

ButterCMSs closed and fully hosted software offers the advantage of streamlined management and reduced operational complexity for users. A close-sourced system offers added security for developer code, as a result, there is less risk of hacking and vulnerabilities.

Most closed-source platforms offer better support for their platform, and ButterCMS does exceptionally well at that. This is good for developers who might run into issues during migration, API integration, or any type of issues. This brings added security to the CMS platform.

Powerful API-Explorer

The API Explorer is a tool in ButterCMS that demonstrates how to retrieve various types of content from its API. It offers examples of API requests, displays the corresponding responses, and generates code snippets that you can use to experiment with fetching content programmatically. This tool simplifies the process of understanding the API structure, testing different queries, and integrating the fetched data into your own applications.

Enhanced WYSIWYG Experience

ButterCMS makes provision for an enhanced content editing and creation experience:

Enhanced Code Editor : Developers now have access to a robust code editing experience directly within ButterCMS. This feature includes features like highlighting code syntax, providing auto-completion suggestions, and options for formatting code. This benefits both developers and content creators, helping them work more efficiently and accurately.

Export Functionality : Developers can export their content in various formats, such as HTML, PDF, and Word documents. This is a handy feature if you are creating downloadable content/resources collaborating with external bodies who need content in a preferred format.

ButterCMS vs. Ghost vs. Contentful User Comparison Chart 

This section compares the general user ratings between ButterCMS, Ghost, and Contentful based on feedback from G2.

As you can see, ButterCMS is rated highest in all major categories. 

While all three solutions have their advantages and disadvantages, ButterCMS stands out as an excellent alternative for those seeking both a robust CMS solution and a ready-to-use plug-and-play blog engine. Additionally, ButterCMS comes packed with other powerful features SDK support for several frameworks and languages, seamless integrations, collaboration tools, customizable content types, and more. 

Chisom is a software developer and technical writer passionate about writing, and building front-end projects.

ButterCMS is the #1 rated Headless CMS

Related articles

• Contentstack vs Contentful: Which Headless CMS Is Right for Your Team?
• A Podcast on Harmonizing Content & Code
• The Cutting Edge of Web Content Development: Using Multiple Digital Content Channels
• How to Build a Product Landing Page Powered by Gridsome and ButterCMS
• How To Streamline Content Localization With DeepL and ButterCMS
• How to Create a Knowledge Base Using PHP and ButterCMS
• Podcast Clips: Who Leads? Code or Creative?
• Contentful vs. Prismic: Which Headless CMS is Best for Your Team?
• What We Really Want Out of a CMS

Don’t miss a single post

Get our latest articles, stay updated!

Headless CMS

A list of headless content management systems for Jamstack sites

Should your site be featured here in this gallery? Let us know about it by opening a pull request .

Join us at Compose Conference, October 18-19. Register now!

Guides & Tutorials

The Beginner’s Guide to Headless CMSes

I have a confession: for a long time, I thought all content management systems were alike. In 10 years of content editing, I’d never heard of a headless CMS. From my perspective, the popular CMSes had slightly different UIs, but the same functionality. Squarespace, WordPress, Drupal, Sitecore, Wix, it didn’t matter to me. If I needed to edit a web page, I just logged into the What You See Is What You Get (WYSIWIG) tool and made the changes myself. And while none of these tools were perfect, they got the job done—for me at least.

It wasn’t until I worked at a small startup that I saw that the UI of the CMS—the part I interacted with as a content editor—was only a piece of the puzzle. At the time, this company didn’t have a CMS at all. While I admit it was a tad intimidating to learn git workflows and markdown syntax, it was obvious from the start that the tradeoff was worth it. I’d never worked on a faster site. It had great Lighthouse Scores, and our development team could make branded site customizations left and right. If I had a request, they could make it happen. That simply wasn’t the case for traditional sites I’d worked on, like a monolithic Sitecore.

This workflow worked when we were a marketing team of four. But as we grew, it began to take too long to onboard new marketers, and soon became untenable. As a fast-growing company, new hires needed to be able to make site edits quickly from day one. We needed a new tool. We needed a CMS.

On the other hand, the development team had grown so accustomed to the flexibility the hand-coded site offered. If the docs team wanted to switch from Jekyll to Gatsby, they could do it. If we wanted to add an embedded product demo on a page, that was no problem. And without widgets and plugins weighing the site down, our Core Web Vitals were out of this world.

We needed a solution that would offer the development team the flexibility they wanted. The solution? A headless CMS. This solution would allow the marketing team to make edits without relying on developers, while keeping the agility our development team required.

For a lot of companies, the path to a headless CMS happens in the opposite direction. Instead of marketers making the case for a CMS, it’s the development team making the case for cutting the head off the existing CMS like WordPress, Drupal, or Sitecore, or migrating to a different headless solution. (If some of those words are still jargon to you, hang in there: we’ll define them all!)

In this post, we’ll dive into what a headless CMS is, why they’re helpful for development teams and marketers alike, and answer some frequently asked questions about what, why, and how headless CMSes work.

What’s a headless CMS? And where’s its “head?”

A headless CMS is a backend content management system that separates (or decouples) the content repository from the frontend user interface layer.

The “head,” in the term “headless CMS” is where the content is presented. For websites, this usually means the browser from which your user accesses your content. And for a lot of traditional CMSes, a browser is, ultimately, the only place your content can live. Traditional WordPress, Sitecore, and Drupal monoliths are built to serve content to web browsers, and not much else.

Headless CMSes, unlike their monolithic counterparts, can deliver content to all sorts of “heads,” like mobile apps, chatbots, voice apps–anywhere content can be delivered.

This means the term “headless” is a bit of a misnomer. Even “headless” sites have heads. That is, the content from the CMS ultimately lands up on a presentation layer (otherwise no one sees your amazing content!). A headless approach, however, bundles up all the components of your site into static HTML where possible, allowing data to be pulled in dynamically by APIs, such that the content can be served to multiple heads (i.e., a mobile app), if you wish.

Here’s a helpful video from our friends at Sanity :

However, the ability to serve your content to different “heads” is only a small part of why headless CMSes are increasingly popular.

Headless CMS vs. Traditional CMS

In a traditional CMS like WordPress, Drupal, or Sitecore, the database where all content–from product pages to blog posts to checkout workflows–is done by the same tool that ultimately renders the content and serves it to the place where it’s displayed (usually a web browser).

Top Benefits of a Headless CMS

Why do teams adopt a headless CMS? While there are lots of different benefits to using a headless CMS, it all boils down to one core concept: headless CMSes enable everyone on the team to do their best work.

Web development is a team sport, and the different players on the team (designers, copywriters, product marketers, web developers, and dev ops), have different preferences for tools and workflows. By taking a headless approach and separating the content repository from the frontend, headless architectures allow teams to select best-of-breed tools that work for their needs.

Here are some concrete examples of the benefits that a headless CMS can offer, and how it can help content creators, content editors, development teams, and even end users.

1. An API-first Approach Improves Developer Productivity

One of the primary benefits of this approach is that it allows every team member to focus on their area expertise. Content editors can use the CMS that makes sense for them, while developers can use the tools and services they prefer–and the workflows they like, as well. This has huge implications not only for developer experience, but developer productivity.

Headless CMSes are compatible with popular frameworks like Vue, React, and Next.js, not to mention any microservice your development team wants to use. Since microservices that handle everything from serverless databases to authentication can easily integrate with a headless CMS (either via GraphQL or a REST API), headless approaches offer immense extensibility. There’s no longer a need to wrestle with a plugin, or build a custom approach to integrating tools with a monolithic platform. So long as a service has an API, developers can add it to their headless site, and get to market faster.

The superior developer experience provided by headless CMSes is well summarized in the findings of the Jamstack Community Survey 2021 . The survey of over 7,000 developers found that while WordPress is the leading CMS when it comes to usage, it also has the lowest satisfaction score. However, when you look at using WordPress as a headless CMS , you get a much higher satisfaction score. That's because developers no longer have to deal with WordPress plugins, updates, and maintaining PHP code. They can build in whatever framework they like–like Next.js or Vue–and content editors still get to use the familiar WordPress UI.

2. Content Editors Ship More Frequently with a Headless CMS

Locked, scheduled deploys are a common process with traditional CMSes. Not so with headless CMSes. Of course, teams are still able to do this, but a headless approach makes it significantly easier for teams to ship content edits on their own, without assistance from developers.

European mall leader Kleppiere saw a 300% improvement in content creation time after taking their traditional, monolithic Sitecore CMS headless. Now, Kleppiere uses Sitecore as a headless CMS, while using Next.js and Uniform to render static content.

3. Headless Approaches are More Scalable

Pre-rendered frontends provided by headless approaches are inherently scalable. Freed from backend servers, the frontend can then be deployed globally, directly to a CDN. This means if your site or app experiences a sudden spike in traffic, your CDN can elastically scale, and you don’t have to worry about server maintenance. Advanced CDNs, like Netlify’s High-Performance Edge , offer additional features like multi-cloud deployment and even the ability to run serverless functions at the edge. Scale away!

4. Site Performance and Core Web Vitals

Most traditional CMSes build pages on the fly, when a user requests them. A decoupled approach instead pre-renders pages at deploy time, which means when a user requests them, they’re already built. They’re also then served globally over a CDN, and when it comes to minimizing time to first byte (TTFB), nothing beats pre-built files served at the edge.

This often has massive implications for Lighthouse scores and Core Web Vitals, and improves a site’s SEO.

5. Headless CMSes Can Deliver Omnichannel Content

Headless CMSs offer a single source of truth for content. Since content is delivered via APIs, it can easily be delivered to different interfaces, or “heads.” This empowers teams to deliver content to not only web browsers, but mobile apps, voice-activated digital assistants, digital displays, and more.

In a different configuration, updating copy in multiple places requires copy/pasting, and leaves lots of room for error. With a headless approach, the content only needs to be updated in one place–the CMS–and it will be updated everywhere. The Morning Brew team uses Sanity CMS to build out not only their website, over eight different email newsletters. If copy changes are required, they no longer need to make the updates to each newsletter individually.

6. Headless Sites Offer More Security

Decoupled approaches inherently bear less security risk. Since server-side processes are abstracted into microservice APIs, the surface area for attacks is reduced. Most of the site is static, so you’re not exposing the whole server to the internet, and taking on the traditional security vulnerabilities that come along with that.

7. Internationalization and Localization is easier on a headless CMS

Does your company do business in more than one country? You’re probably familiar with the pain of internationalizing content for each country. Localization of content on a monolith is incredibly difficult and tedious, and often requires copy/pasting versions of the site to a different CMS for each country.

DTC e-commerce company MANSCAPED initially had multiple instances of their Shopify site for each country they operated in, which was time intensive and error prone. After moving to a headless approach with Netlify, content editors and marketers are able to make copy changes from a centralized location.

Common Headless CMS Use Cases

Use case: headless cmses for marketing sites.

Another popular use case is building marketing sites on headless architectures. Marketing teams often need the ability to spin up microsites, make copy changes on the fly, or quickly add translations for new markets. A headless approach can allow marketing teams to get their content to market without assistance or intervention from DevOps.

Additionally, headless approaches offer lots of benefits to site performance, which has important implications on the metrics marketing teams care about, like Core Web Vitals and SEO rankings. By using a headless CMS, marketing teams can see huge gains to their web performance metrics, while still using the tools they rely on.

Example: Medallia’s Headless Marketing Sites See SEO Gains

Medallia Experience Cloud is a customer feedback management software platform, so they deeply understand the importance of web performance in user experience. That’s why they took their main marketing sites headless. Medallia achieved 50% improvement in their Core Web Vital scores after migrating to a headless approach, using Netlify HP Edge as their CDN and Prismic as their CMS.

Use Case: Headless CMSes for Ecommerce

Headless architectures are increasingly popular in the ecommerce space. There are a lot of tools specific to the ecommerce space for headless approaches, which have important storefront functionality, like cart management and checkout capabilities. Some of these headless commerce tools (like headless Shopify or BigCommerce) have CMS functionality baked into them. But others just take care of a piece of the puzzle–like the API layer to connect to inventory–and need an additional tool explicitly for content editing and product information.

Example: ButcherBox uses WordPress as a Headless CMS

The fast-growing startup ButcherBox uses a headless WordPress approach for their e-commerce site. They started on a monolithic WordPress approach, and after page load times kept increasing and the PHP ecosystem became a blocker to site development, they realized they needed to try another approach. By using Netlify and Gatsby on the backend, ButcherBox was able to keep WordPress as their headless CMS for content editing, but bring agility and responsiveness to the site (and use tools their developers are excited about).

Popular Headless CMS Platforms (with free starter templates)

Need a headless CMS for your Jamstack project? There are a lot out there, and we’ll do some deeper dives in the future on how to choose which CMS to use for your project.

For a comprehensive list of open source headless CMS projects, check out Jamstack.org ’s repository of headless CMSes for Jamstack projects.

Here are a few of our favorites, and templates for getting started right away. Once you click the “Deploy to Netlify” button in any of the following sections, you’ll be dropped into a simple signup workflow. Just connect your Git repository, hit save, and Netlify will deploy your site. You’ll receive a link to your live site’s URL.

Contentful is the #2 most-used CMS for Jamstack sites, just after WordPress. It’s an API-first (rather than browser-first) headless CMS, which makes it a great fit for omnichannel content. Since they’re “content-centric” instead of “page-centric, you can organize and structure content in a way that makes sense for your team. Instead of working with fixed, predefined templates, teams can build a custom content model.

Headless CMS Starter Template for Contentful

Build a starter blog with Gatsby and Contentful with our free template! With Contentful and Gatsby, you can connect your favorite static site generator with an API that provides an easy to use interface for people writing content and automate the publishing using services like Netlify.

Strapi is an open source Node.js headless CMS. Their product is entirely JavaScript (making it Jamstack-friendly), and they focus on building a developer-first experience. It supports GraphQL and REST APIs, and offers an images API directly in the editor.

Headless CMS Starter Template for Strapi

In this tutorial, you’ll learn how to deploy a React blog on Netlify that fetches content from a Strapi instance . Your content will then be deployed to Heroku, which is a cloud platform where you can host a Strapi server for free.

Ghost is a self-consuming, RESTful JSON API with decoupled admin client and front-end. Ghost comes with a default Handlebars.js frontend, which can help you get a site running as quickly as possible, as well as detailed documentation for working with the API directly or using provided SDKs and headless front-end framework integrations.

Headless CMS Starter Template for Ghost

Ready to get started quickly? This starter template will generate a completely static content-rich site built with with Ghost and Eleventy (11ty).

One of the primary reasons people choose Forestry is its clean UI. Forestry is a headless CMS that focuses on the content editing experience, and while it’s customizable, its out-of-the box implementation offers few bells and whistles, making it a great choice for getting started quickly.

Headless CMS Starter Template for Forestry

This free starter template uses Novela , which is an easy way to publish with Hugo and Forestry.

Sanity is an open-source real-time headless CMS that you can customize with JavaScript and React. It’s what we use at Netlify! One primary benefit of Sanity is their focus on “content as data.” This means that content modeling looks a bit different in Sanity. Content is stored its properties, not how it’s presented. This is the foundation of reusability and unlocks integrations that make work easier for designers, editors, and developers.

Headless CMS Starter Template for Sanity

This free starter template will launch a multi-country e-commerce site with Sanity Studio as the headless CMS , a frontend layer built with Commerce Layer and Next.js, and deployed to Netlify. As a bonus, it comes with React components library, and Tailwind CSS alongside international shopping capabilities powered by Commerce Layer APIs.

Headless WordPress

Headless WordPress is a popular approach to a headless CMS, largely because WordPress is such a dominating force in the CMS world. So many content editors are familiar with its interface, so for content editors, workflows are more or less the same. Taking a WordPress site headless lets you store and manage your content on WordPress's familiar user interface while publishing to a custom frontend framework with APIs and plugins.

Also, open source APIs like WPGraphQL help ease the transition for taking a monolithic WordPress instance headless.

Headless CMS Starter Template for WordPress

This starter template comes from our friends at Smashing Magazine, who built a headless WordPress site using Vue and Nuxt.

More Headless CMS Resources

• How to preview content with a headless CMS: Want to see a decoupled content management workflow in action? Watch step by step how you can preview blog posts on a shareable URL, as a static asset, served from a CDN using Contentful and Netlify.
• What is headless WordPress: This blog post takes a deep dive into the what, why, and how of WordPress as a headless CMS .
• Start your migration to a headless architecture: Ready to learn more about how to migrate from a monolithic architecture to microservices? Check out our step-by-step guide to incrementally migrating to a new tech stack with a microservice architecture.

Keep reading

Learning to future-proof sites using headless cms and different ssgs.

Phil Hawksworth

Integrate Next.js & Contentful

Cassidy Williams

Recent posts

News & Announcements

Cache-tags & Purge API on Netlify

Paulo Araújo

Netlify successfully mitigates CVE-2023-44487

Introducing Netlify Functions 2.0

Eduardo Bouças

Ready to try Netlify?

A Ghost Demo: How to Go Headless with Ghost CMS [Tutorial]

Francis cote developer.

In a rush? Skip to technical tutorial or live demo

As a kid, didn’t you love listening to ghost stories while sitting around a campfire? Some were lame, like Casper; some were kinda’ cool, like Bloody Mary; and some were just downright weird, like Shirime (yeah... I’ll let you look that one up yourself).

All these stories had one thing in common: they connected the listeners, even if for just a brief period of time.

But today, I’m going to use my Ghost demo to teach you how to connect with your readers for a long time. And to do that, we won’t be focused on stories about ghosts (don’t worry, those will be in there too) because we’ll actually be using the ghost itself.

Ghost CMS, that is.

Plus, in keeping with the spooky vibe of this post, let’s make that a Ghost gone headless . More specifically, in this article I am going to:

Provide a brief history of Ghost CMS

Explain why Ghost is a great tool for bloggers

Discuss the benefits of using Ghost as a headless CMS

Introduce you to making your Ghost site

Create an automated content e-mail to keep your readers in the loop

But first things first, let’s get caught up on exactly what Ghost CMS is.

A brief history of Ghost CMS…

Ghost is a free, open-source platform designed with one thing in mind: minimalistic content publishing. In other words, Ghost is made for bloggers. Period. In fact, it was the brain-child of a former WordPress employee, John O’Nolan, so it’s no surprise that blogging stays fixed at this platform’s core.

O’Nolan worked with fellow coder Hannah Wolfe to create Ghost back in 2013 after getting frustrated with WordPress (and it is just me or have we been hearing that a lot in the last five years?). This probably doesn’t surprise you as Ghost is commonly touted as a sleeker WP alternative.

The overall goal was to create a platform that was simple, lean, and modern. Something with all the good parts of WordPress without being over-bloated. But the best description of Ghost comes from O’Nolan’s own words: it’s “just a blogging website.”

And it’s directly in that simplicity where Ghost’s force lies.

What makes Ghost CMS a great tool for bloggers?

https://www.datocms-assets.com/48401/1627664365-fast-typing.webm

Apart from its headless capabilities (which we will get into soon), one of the most obvious benefits of Ghost is its leanness. Instead of taking the shotgun approach like some CMSs which try to hit everything, Ghost can be thought of more like a sharpshooter. It’s designed for a specific task—publishing content—and it performs that task really, really effectively.

But before you get the wrong idea that Ghost sites are all plain, think again. Yes, the goal is to get content out to your readers, but there are plenty of pre-built themes to ensure your audience is aesthetically pleased as well. You can also customize their out-of-the-box theme by writing some Handlebars.js code.

And then there’s the SEO optimization which is pretty much a “must have” in the blogging world at this point. The Ghost site itself lays out a few of the key SEO features that come built-in:

There are built-in XML sitemaps, Google AMP pages, canonical tags, optimised URLs, microformats, Facebook Open Graph tags, support for Twitter cards and clean semantic markup. All of this is done for you automatically, with no plugins needed.

Finally, it’s super fast. O’Nolan and Wolfe built Ghost on Node.js (which we love) so as you would expect, it runs with lightning quick speed.

Now that we’ve gotten that out of the way, let’s take this one step further and chop this Ghost’s head clean off.

Using Ghost as a headless CMS

If this isn’t the first time you’re reading through our blog, then you may have noticed we love the JAMstack . A lot. Part of the reason is that we see a ton of value in CMSs going headless (which we’ll explain a bit more below).

And we’ll be (kinda) doing that here in our Ghost demo. Let me explain…

The original version of Ghost functioned in the classic monolithic style, as you’d probably expect. But in an effort to keep up with the times—a successful effort, btw—Ghost became headless by design. Ghost’s core is a RESTful JSON API which works well with the default frontend (monolithic) but can be accessed from the outside as well (headless). The bottom line? Ghost now fits (quite nicely) on the JAMstack .

Using Ghost as a headless CMS offers some major benefits:

More flexibility : When you have specific needs that go beyond just rendering content in a web page, headless is the key.

Faster Distribution and Lower Cost : Going headless makes it incredibly easy to generate a static site that can be globally distributed using a platform like Netlify . As a happy bonus, having the freedom to host and deploy your static site with Netlify (or a similar product) lets you do things on the cheap. It’s amazing how far you can get for free with open source services. :)

For our purposes, we’re going the ol’ monolithic approach for the landing page, but will go headless for the weekly content update newsletter in our Ghost demo. Here’s how:

First, we’ll create our Ghost site and customize the Handlebar’s template. That’s the monolithic (boring) part. Now let’s get headless.

We will be using their experimental (yet very stable) "Subscribers" feature. In their docs , Ghost makes it clear that “Email addresses can be viewed and edited from Ghost admin, but no emails will be sent without further integrations with an email tool.”

So, that’s precisely what we’ll be doing here: creating a custom email tool that works by extending this feature.

Then we will use their APIs both to retrieve posts to bundle into each newsletter and to retrieve subscribers who will receive the newsletter.

The stack we are going to use to make this newsletter happen is a Ghost site with a bit of custom templating, and a small scheduling and webhook workflow built on top of AWS Lambda.

Let's get started!

1. Starting up your Ghost blog

I won't go to great length on how to install and host a Ghost site. Their team has it well covered in their neat documentation site .

Whether you go fully managed with Ghost Pro, or boot your own using Ghost-CLI, you'll see that getting started with Ghost is dead easy (pun intended).

I personally used this starter repo that allows you to quickly spin up a fresh Ghost instance in a free Azure hosting environment in no time.

Once your site is live, complete the initial setup screens to create your account and invite your content editors to create theirs. Once logged in, I recommend you take a look at the sample content under the "Getting Started" tag. It lays out the most commonly used features in a quite friendly form.

This tutorial will build on top of Ghost's default template, Casper.

2. Enable Subscribers feature

A key piece of your newsletter setup will be to let people subscribe to your scary content. Ghost now offers a "Subscribers" feature. At the time of writing, this feature is marked as "Experimental". You can enable it under the "Labs" section of the Ghost admin:

/ghost/#/settings/labs

3. Create a custom content structure

There will be 3 kinds of content node in our Ghost demo for now:

The landing page

The welcome email

Ghost stories

But we have to configure some routes first, to serve custom Handlebars templates.

Ghost comes with some routes baked in the default install. Let's customize them to our needs

Configuring custom routes in Ghost is easy and flexible. It's important to note that if your site is hosted on Ghost Pro, you still have the ability to upload custom routes under Settings >> Labs

3.1 Create the landing page

Since the site will only feature a weekly newsletter for now, let's create a minimal template that will call people to subscribe.

Just create the landing.hbs file under ./content/themes/casper/ .

The Casper theme features a nice "Subscribe" modal overlay. You can trigger it by navigating to the #subscribe anchor.

The landing page content node will be created as a Page since it is not part of any content collection, like Posts do.

Create a new page, and don't forget to publish it. Make sure the page's slug (called "Page URL" in the UI) is set to landing . It's important because we have some routing rules in place that rely on it.

3.2 Create welcome email content node

Just like the landing page, the welcome email will be of type "Page". This node is meant to be hit by the "Subscriber added" webhook (spoiler alert!) that will be configured later.

The slug must be set to nl-welcome-email so the routing works.

For the sake of brevety, I wont expand on how to create custom templates for the emails. Just know that rendring emails so they are compatible with the majority of email clients is quite a puzzle. Luckily, some cool people already solved it for us. Here I used Cerberus as a base to design the emails.

3.3 Create the first story

Add a tag for the stories.

What's a good blogging platform without content tagging? Let's create a tag for our stories so we can better filter them out. This may come handy if you ever add content other than ghost stories on the blog.

/ghost/#/settings/tags

Create the first story

Stories will be of type Post, and will be marked with the newly created nl-story tag.

4. Integrate with Ghost's API

All right, now to the crunchy bits! We will have to cook some custom code to enforce our newsletter logic. For that we'll make use of Ghost's API.

Our integration with the API starts with creating a new Integration in the admin.

/ghost/#/settings/integrations/new

Once created, the integration details page will show two API keys. Save them for later.

5. Greet new subscribers

By default, Ghost's "Subscriber" feature doesn't send any email. It only accepts and stores registrations. It's up to you to extended it to make it fit your needs.

Let's build something to say hi to people who register!

Ghost can send webhooks when events occur in its database. That's what we'll use to trigger welcome emails.

5.1 A serverless endpoint

To react to Ghost events, we have to create a HTTP endpoint that will accept calls from our instance. Why not embrace the hype and go serverless using AWS Lambda?

Let's start by creating a "snipcart-ghost-demo-webhook" function based on the "microservice-http-endpoint" blueprint, like shown here .

At the "Role" step, choose "Create a new role with basic Lambdda permissions". We will not need the DynamoDB persmission that the default template requires.

After hitting the "Create" button, AWS will automatically create an API Gateway and add it as a trigger for your function.

Let's customize the function's script by pushing code from a local folder. First, create a new Node.js package like so:

Here I will send emails using SendGrid , but feel free to use your favorite service instead.

Then, add a file named index.js , with the following content:

A few things to note here:

We are relying on environment variables for some settings. These will have to be set in your Lambda function . You can find the value for GHOST_CONTENT_KEY in the details screen of the integration we created earlier.

The event body is the actual POST body we receive from Ghost. This is where the info about the new subscriber will be accessible.

We are hitting Ghost's API to have meta data about the content node.

We are retrieving the email HTML by simply calling the route we defined for this node, at /nl-welcome-email/ .

Now, let's ship this code to our Lambda function. You'll have to install and configure the AWS CLI.

Then, bundle and ship your code like so:

I'm using 7-Zip here, you may have to adapt the zip procedure to fit your environment

Cool! With the function up and running (and reachable via HTTP), let's connect Ghost events to it.

5.2 Connect Ghost webhook

First, let's find the URL of your serverless function. Just click the "API Gateway" box, in your Lambda function details page. The URL appears in a section below.

Then, in the Ghost admin, go to our custom integration details page, under Settings >> Integrations. In the Webhooks table, click "Add webhook" and configure as follows:

6. Send weekly updates

Let's keep our subscribers in the loop with a small weekly email routine.

6.1 The email template

Say we have a small content team, and they will be publishing posts at a rate of exactly two stories a week.

Here is how we will iterate through these stories in the nl-stories-email template:

For more fine-grained control on how stories are bundled, we could also make use of the featured content property provided by Ghost.

6.2 Build the scheduler

We'll use a very similar setup to schedule our weekly deliveries.

First, create a blank (no blueprint) Lambda function named "snipcart-ghost-demo-schedule". In the visual designer, add a "CloudWatch Events" trigger. Configure it like below, and hit "Save":

Now, using the same workflow as before, push the following code:

Here are the interesting bits in the above snippet

We are fetching all our subscribers from the Ghost API

We are retrieving the email HTML from /nl-stories-email/ .

Aaaaaand we're all set!

Checkout the GitHub repo

Checkout the live demo

Final thoughts

I really enjoyed playing with Ghost. I've been thinking of a simple newsletter setup for a while, and Ghost turned out to serve this purpose pretty well. I've been pushing its limits a bit though, and I started to foresee some places where Ghost could fall short going deeper. To be fair, Ghost is definitely not advertised as a CMS that does it all, so I'm pretty content with what I ended up doing with “just a blogging website”.

If you've enjoyed this post, please take a second to share it on Twitter . Got comments, questions? Hit the section below!

About the author

Francis has been programming for over 13 years and is a self-described "lazy developer" automating every redundant task. He started his career in database and Angular development. Today, he focuses on backend database challenges and is also fluent in TypeScript & Vue.js. When Francis isn't coding for Snipcart, he spends his time with his family, playing a round of ultimate frisbee, or beating his colleagues at foosball.

Follow him on Twitter .

Gatsby E-Commerce Recipe: Integrate a Cart in a Few Steps

Recent articles in jamstack, headless ecommerce: a developer’s guide.

New to Jamstack? Everything You Need to Know to Get Started

The Top 6 Static Site Generators in 2022

What is Headless WordPress & Should You Use It?

Svelte.js Guide: The Framework to Write Faster JavaScript

36 000+ geeks are getting our monthly newsletter: join them.

An Introduction to Ghost – A Headless, Open-Source CMS

Article summary

Getting started.

Ghost is the number-one, open-source, headless Node.js CMS. Essentially, it’s a customizable platform for running blogs, magazines, or journals. It’s fully open-source and runs blogs including OpenAI, DigitalOcean, and Mozilla.

Behind the scenes, Ghost is running its admin panel with Ember.js , which can be run on the web and any OS. Since it uses Node.js , it easily integrates with third-party applications like Slack, Mailchimp, and Shopify. There’s also a command-line interface that makes it super-easy to get up and running locally or on a production server.

The power of being open-source is clear here. The Ghost theme that comes with the default installation is clean and ready to go, but it offers lots of room for creativity and customization. You can easily create your own themes, and locally, it even supports hot-reloading.

If you’re familiar with Ember.js, you’ll be pleasantly surprised by the templating language, which is Handlebars . Like any other templating language, though, it’s pretty easy to pick up and writes similarly to HTML.

There are also a ton of themes for purchase (and for free!) on Ghost’s official website.

To begin, I’d recommend messing around with a local install first. In order to do this, you’ll need Node.js , Yarn , or npm and a fresh directory for your project.

• Install Ghost-CLI. npm install ghost-cli@latest -g
• cd into your empty project directory
• Run this command: ghost install local
• Visit http://localhost:2368 to view your site and http://localhost:2368/ghost to access the admin panel.

Some useful commands:

• ghost stop to stop Ghost
• ghost start to start Ghost
• ghost log to view logs
• ghost ls to list all running Ghost instances

If you want to roll your own server, there are quick setup guides for Ubuntu (recommended) or Docker , and both are free.

Ghost also offers hosting . It has a cost, but all proceeds go toward supporting the development of Ghost. They also give you a free 14-day free trial with no automatic charge.

If you’re interested in blogging in an efficient way with a clean, responsive user interface, Ghost may be the platform for you. It’s so easy to get started and has lots of room for growth and customization through themes and hosting providers.

Related Posts

A software professional and an academic librarian get married…, best practices for contributing to open-source projects, programming for arduino use platform.io instead of the arduino ide, keep up with our latest posts..

We’ll send our latest tips, learnings, and case studies from the Atomic braintrust on a monthly basis.

Tell Us About Your Project

We’d love to talk with you about your next great software project. Fill out this form and we’ll get back to you within two business days.

• Start monitoring for free

4 open-source headless CMS built with JavaScript

September 9, 2020 3 min read 1008

According to Wikipedia , a Content Management System (CMS) is an application that can be used to manage the creation and modification of digital content.

A CMS is usually made up of two major parts: the backend, which is responsible for creating and managing content, and the frontend, which is used to display the content to viewers. Some of the basic features of a CMS include a content editor, user management capabilities, and an intuitive dashboard.

The rising popularity of JAMSTACK has spurred on the adoption of headless CMS. They give developers the freedom to choose how content is served.

A headless CMS is basically a CMS without the frontend layer. It is also known as JAMSTACK CMS in some circles. The frontend is decoupled from the CMS, which gives developers the flexibility to build the view layer of the CMS in any way that’s desirable to them.

In this article, we will be looking at popular open source headless CMS for JavaScript developers and what makes them unique.

Kicking off the list is Ghost, which is a popular CMS with 34.5K GitHub Stars.

Ghost is an API-driven, headless CMS built with Node.js. It is a complete decoupled headless CMS, which means it can either be used in a headless manner or via templates. Ghost serves its content using a set of REST API endpoints, which are divided into three major categories:

• Content API

It also comes with a set of tools out-of-the-box, which include:

• Ghost CLI : A tool to manage Ghost installations and configurations
• Migration : A tool to help you migrate your content from other popular blog platforms
• JavaScript SDK : A set of JavaScript packages that help you achieve some common tasks with the Ghost API

To get started quickly with Ghost, you have to install the CLI via npm or yarn :

After successfully installing the Ghost CLI, you can go on to install Ghost in the directory of your choice by running the command below:

Strapi is an open source headless CMS also based on Node.js and maintained by over 100 contributors. It is a fully-customizable CMS.

Some of its features include:

• Multi-database support : SQLite, MongoDB, MySQL, Postgres are supported out of the box
• Webhooks : Notifies other applications that an event has occurred in your Strapi application
• Auto-generated documentation : Write and maintain the documentation with a one-click integration
• Authentication and permissions : Secure your endpoints by allowing (or not allowing) users to access your API by roles
• 100% JavaScript : Completely built with JavaScript

Data in Strapi can be consumed either via REST API or GraphQL. It also offers a one-click deployment option to hosting platforms such as Heroku, Digital Ocean, and Platform.sh.

The functionalities of Strapi can be extended by integrating tools such as Cloudinary, Mailgun, Algolia, Redis, Sentry, and others.

To get started with Strapi, run the code below in your terminal:

Netlify CMS

Netlify CMS is a single-page React application that gives users a way to work with content on any site built with a static site generator. It is a Git-based CMS, which means the data resides in files stored in a Git repository as opposed to most API-driven CMS, which store and fetch data from a database.

Some of the features of Netlify CMS include:

• Full-version control on all content : you have complete control of where your files reside
• Fast web UI : With rich-text editing, real-time preview, and drag-and-drop media uploads
• Platform-agnostic : can be used with any static site generator and frontend framework
• Easy installation : Add two files to your site and hook up the backend by including those files in your build process, or linking to our Content Delivery Network (CDN)
• Modern authentication : Use GitHub, GitLab, or Bitbucket and JSON web tokens
• Flexible content types : Specify an unlimited number of content types with custom fields
• Fully extensible : Create custom-styled previews, UI widgets, and editor plugins
• One-click deploymen t to Netlify

You can get started with Netlify by either adding it to an existing site  or using a starter template . Netlify CMS provides a starter template for popular static site generators.

Keystone 5 is the latest version of the Keystone CMS. The monolithic architecture of the previous versions was overhauled for an API-driven approach.

Keystone 5 is a headless CMS built with Node.js. It is frontend agnostic and can be used by popular frontend frameworks, static site generators, and mobile applications.

Over 200k developers use LogRocket to create better digital experiences

It is also fully customizable and allows you to pick the features you need, such as the type of database. The Admin UI is very intuitive and changes based on the defined schema.

Some of the key features of Keystone 5 include:

• GraphQL API: Keystone provides a powerful GraphQL API with CRUD operations and powerful filtering options for all your lists
• An extensible admin UI : The admin app is a fully functional administration UI to help you manage your data
• Database adapters : Keystone allows you to choose different storage methods with adapters for MongoDB and Postgres
• Access Control : control who can have access to your GraphQL API
• Third-party authentication : Keystone supports popular third party authentication like Google, Facebook, GitHub, etc., along with a host of other authentication methods supported by PassportJs

To get started quickly with Keystone 5, make sure you have either of the supporting databases: MongoDB and PostgreSQL.

Then, run the code below in your terminal

Follow the on-screen prompts to set up Keystone. After a successful installation, go to the root directory of the application and run the code below:

The above command starts up the Keystone development server.

Open Source Headless CMS is becoming popular as an efficient alternative for managing content. It allows you to be in charge of how your content is stored, and how you want it to be presented. Each of the mentioned CMS in this article come with a unique set of features. It is up to you depending on your use case to determine what will be best for your application.

LogRocket : Debug JavaScript errors more easily by understanding the context

Debugging code is always a tedious task. But the more you understand your errors the easier it is to fix them.

LogRocket allows you to understand these errors in new and unique ways. Our frontend monitoring solution tracks user engagement with your JavaScript frontends to give you the ability to find out exactly what the user did that led to an error.

LogRocket records console logs, page load times, stacktraces, slow network requests/responses with headers + bodies, browser metadata, and custom logs. Understanding the impact of your JavaScript code will never be easier!

Share this:

• Uncategorized
• #vanilla javascript

Adding screen capture functionality to a React Native app

Using the View Transitions API with Astro

Best HTML to PDF libraries for Node.js

One Reply to “4 open-source headless CMS built with JavaScript”

Thank you so much for talking. I’m also sort of a newbie on social media, looking for tips on how to share good types of content. I’ve seen a lot of people sharing infographics that look so nice and are pretty informative, but I never knew how to make them myself. Great message, thank you again! Blogger Zune

Leave a Reply Cancel reply

A Ghost Demo: How to Go Headless with Ghost CMS [Tutorial]

As a kid, didn’t you love listening to ghost stories while sitting around a campfire? Some were lame, like Casper; some were kinda’ cool, like Bloody Mary; and some were just downright weird, like Shirime (yeah... I’ll let you look that one up yourself).

All these stories had one thing in common: they connected the listeners, even if for just a brief period of time.

But today, I’m going to use my Ghost demo to teach you how to connect with your readers for a long time. And to do that, we won’t be focused on stories about ghosts (don’t worry, those will be in there too) because we’ll actually be using the ghost itself.

Ghost CMS, that is.

Plus, in keeping with the spooky vibe of this post, let’s make that a Ghost gone headless . More specifically, in this article I am going to:

• Provide a brief history of Ghost CMS
• Explain why Ghost is a great tool for bloggers
• Discuss the benefits of using Ghost as a headless CMS
• Introduce you to making your Ghost site
• Create an automated content e-mail to keep your readers in the loop

But first things first, let’s get caught up on exactly what Ghost CMS is.

A brief history of Ghost CMS

Ghost is a free, open-source platform designed with one thing in mind: minimalistic content publishing. In other words, Ghost is made for bloggers. Period. In fact, it was the brain-child of a former WordPress employee, John O’Nolan, so it’s no surprise that blogging stays fixed at this platform’s core.

O’Nolan worked with fellow coder Hannah Wolfe to create Ghost back in 2013 after getting frustrated with WordPress (and it is just me or have we been hearing that a lot in the last five years?). This probably doesn’t surprise you as Ghost is commonly touted as a sleeker WP alternative.

The overall goal was to create a platform that was simple, lean, and modern. Something with all the good parts of WordPress without being over-bloated. But the best description of Ghost comes from O’Nolan’s own words: it’s “just a blogging website.”

And it’s directly in that simplicity where Ghost’s force lies.

What makes Ghost CMS a great tool for bloggers?

Apart from its headless capabilities (which we will get into soon), one of the most obvious benefits of Ghost is its leanness. Instead of taking the shotgun approach like some CMSs which try to hit everything, Ghost can be thought of more like a sharpshooter. It’s designed for a specific task—publishing content—and it performs that task really, really effectively.

But before you get the wrong idea that Ghost sites are all plain, think again. Yes, the goal is to get content out to your readers, but there are plenty of pre-built themes to ensure your audience is aesthetically pleased as well. You can also customize their out-of-the-box theme by writing some Handlebars.js code.

And then there’s the SEO optimization which is pretty much a “must have” in the blogging world at this point. The Ghost site itself lays out a few of the key SEO features that come built-in:

There are built-in XML sitemaps, Google AMP pages, canonical tags, optimised URLs, microformats, Facebook Open Graph tags, support for Twitter cards and clean semantic markup. All of this is done for you automatically, with no plugins needed.

Finally, it’s super fast. O’Nolan and Wolfe built Ghost on Node.js (which we love) so as you would expect, it runs with lightning quick speed.

Now that we’ve gotten that out of the way, let’s take this one step further and chop this Ghost’s head clean off.

Using Ghost as a headless CMS

If this isn’t the first time you’re reading through our blog, then you may have noticed we love the JAMstack . A lot. Part of the reason is that we see a ton of value in CMSs going headless (which we’ll explain a bit more below).

And we’ll be (kinda) doing that here in our Ghost demo. Let me explain…

The original version of Ghost functioned in the classic monolithic style, as you’d probably expect. But in an effort to keep up with the times—a successful effort, btw—Ghost became headless by design. Ghost’s core is a RESTful JSON API which works well with the default frontend (monolithic) but can be accessed from the outside as well (headless). The bottom line? Ghost now fits (quite nicely) on the JAMstack .

Using Ghost as a headless CMS offers some major benefits:

More flexibility : When you have specific needs that go beyond just rendering content in a web page, headless is the key.

Faster Distribution and Lower Cost : Going headless makes it incredibly easy to generate a static site that can be globally distributed using a platform like Netlify . As a happy bonus, having the freedom to host and deploy your static site with Netlify (or a similar product) lets you do things on the cheap. It’s amazing how far you can get for free with open source services. :)

For our purposes, we’re going the ol’ monolithic approach for the landing page, but will go headless for the weekly content update newsletter in our Ghost demo. Here’s how:

First, we’ll create our Ghost site and customize the Handlebar’s template. That’s the monolithic (boring) part. Now let’s get headless.

We will be using their experimental (yet very stable) "Subscribers" feature. In their docs , Ghost makes it clear that “Email addresses can be viewed and edited from Ghost admin, but no emails will be sent without further integrations with an email tool.”

So, that’s precisely what we’ll be doing here: creating a custom email tool that works by extending this feature.

Then we will use their APIs both to retrieve posts to bundle into each newsletter and to retrieve subscribers who will receive the newsletter.

The stack we are going to use to make this newsletter happen is a Ghost site with a bit of custom templating, and a small scheduling and webhook workflow built on top of AWS Lambda.

Let's get started!

1. Starting up your Ghost blog

I won't go to great length on how to install and host a Ghost site. Their team have it well covered in their neat documentation site .

Whether you go fully managed with Ghost Pro, or boot your own using Ghost-CLI, you'll see that getting started with Ghost is dead easy (pun intended).

I personally used this starter repo that allows you to quickly spin up a fresh Ghost instance in a free Azure hosting environment in no time.

Once your site is live, complete the initial setup screens to create your account and invite your content editors to create theirs. Once logged in, I recommend you take a look at the sample content under the "Getting Started" tag. It lays out the most commonly used features in a quite friendly form.

This tutorial will build on top of Ghost's default template, Casper.

2. Enable Subscribers feature

A key piece of your newsletter setup will be to let people subscribe to your scary content. Ghost now offers a "Subscribers" feature. At the time of writing, this feature is marked as "Experimental". You can enable it under the "Labs" section of the Ghost admin:

/ghost/#/settings/labs

3. Create a custom content structure

There will be 3 kinds of content node in our Ghost demo for now:

• The landing page
• The welcome email
• Ghost stories

But we have to configure some routes first, to serve custom Handlebars templates.

Ghost comes with some routes baked in the default install. Let's customize them to our needs

Configuring custom routes in Ghost is easy and flexible. It's important to note that if your site is hosted on Ghost Pro, you still have the ability to upload custom routes under Settings >> Labs

3.1 Create the landing page

Since the site will only feature a weekly newsletter for now, let's create a minimal template that will call people to subscribe.

Just create the landing.hbs file under ./content/themes/casper/ .

The Casper theme features a nice "Subscribe" modal overlay. You can trigger it by navigating to the #subscribe anchor.

The landing page content node will be created as a Page since it is not part of any content collection, like Posts do.

Create a new page, and don't forget to publish it. Make sure the page's slug (called "Page URL" in the UI) is set to landing . It's important because we have some routing rules in place that rely on it.

3.2 Create welcome email content node

Just like the landing page, the welcome email will be of type "Page". This node is meant to be hit by the "Subscriber added" webhook (spoiler alert!) that will be configured later.

The slug must be set to nl-welcome-email so the routing works.

For the sake of brevety, I wont expand on how to create custom templates for the emails. Just know that rendring emails so they are compatible with the majority of email clients is quite a puzzle. Luckily, some cool people already solved it for us. Here I used Cerberus as a base to design the emails.

3.3 Create the first story

Add a tag for the stories.

What's a good blogging platform without content tagging? Let's create a tag for our stories so we can better filter them out. This may come handy if you ever add content other than ghost stories on the blog.

/ghost/#/settings/tags

Create the first story

Stories will be of type Post, and will be marked with the newly created nl-story tag.

4. Integrate with Ghost's API

All right, now to the crunchy bits! We will have to cook some custom code to enforce our newsletter logic. For that we'll make use of Ghost's API.

Our integration with the API starts with creating a new Integration in the admin.

/ghost/#/settings/integrations/new

Once created, the integration details page will show two API keys. Save them for later.

5. Greet new subscribers

By default, Ghost's "Subscriber" feature doesn't send any email. It only accepts and stores registrations. It's up to you to extended it to make it fit your needs.

Let's build something to say hi to people who register!

Ghost can send webhooks when events occur in its database. That's what we'll use to trigger welcome emails.

5.1 A serverless endpoint

To react to Ghost events, we have to create a HTTP endpoint that will accept calls from our instance. Why not embrace the hype and go serverless using AWS Lambda?

Let's start by creating a "snipcart-ghost-demo-webhook" function based on the "microservice-http-endpoint" blueprint, like shown here .

At the "Role" step, choose "Create a new role with basic Lambdda permissions". We will not need the DynamoDB persmission that the default template requires.

After hitting the "Create" button, AWS will automatically create an API Gateway and add it as a trigger for your function.

Let's customize the function's script by pushing code from a local folder. First, create a new Node.js package like so:

Here I will send emails using SendGrid , but feel free to use your favorite service instead.

Then, add a file named index.js , with the following content:

A few things to note here:

• We are relying on environment variables for some settings. These will have to be set in your Lambda function . You can find the value for GHOST_CONTENT_KEY in the details screen of the integration we created earlier.
• The event body is the actual POST body we receive from Ghost. This is where the info about the new subscriber will be accessible.
• We are hitting Ghost's API to have meta data about the content node.
• We are retrieving the email HTML by simply calling the route we defined for this node, at /nl-welcome-email/ .

Now, let's ship this code to our Lambda function. You'll have to install and (configure)[ docs.aws.amazon.com/cli/latest/userguide/cl.. the AWS CLI.

Then, bundle and ship your code like so:

I'm using 7-Zip here, you may have to adapt the zip procedure to fit your environment

Cool! With the function up and running (and reachable via HTTP), let's connect Ghost events to it.

5.2 Connect Ghost webhook

First, let's find the URL of your serverless function. Just click the "API Gateway" box, in your Lambda function details page. The URL appears in a section below.

Then, in the Ghost admin, go to our custom integration details page, under Settings >> Integrations. In the Webhooks table, click "Add webhook" and configure as follows:

6. Send weekly updates

Let's keep our subscribers in the loop with a small weekly email routine.

6.1 The email template

Say we have a small content team, and they will be publishing posts at a rate of exactly two stories a week.

Here is how we will iterate through these stories in the nl-stories-email template:

For more fine-grained control on how stories are bundled, we could also make use of the featured content property provided by Ghost.

6.2 Build the scheduler

We'll use a very similar setup to schedule our weekly deliveries.

First, create a blank (no blueprint) Lambda function named "snipcart-ghost-demo-schedule". In the visual designer, add a "CloudWatch Events" trigger. Configure it like below, and hit "Save":

Now, using the same workflow as before, push the following code:

Here are the interesting bits in the above snippet

• We are fetching all our subscribers from the Ghost API
• We are retrieving the email HTML from /nl-stories-email/ .

Aaaaaand we're all set!

Checkout the GitHub repo Checkout the live demo

Final thoughts

I really enjoyed playing with Ghost. I've been thinking of a simple newsletter setup for a while, and Ghost turned out to serve this purpose pretty well. I've been pushing its limits a bit though, and I started to foresee some places where Ghost could fall short going deeper. To be fair, Ghost is definitely not advertised as a CMS that does it all, so I'm pretty content with what I ended up doing with “just a blogging website”.

If you've enjoyed this post, please take a second to share it on Twitter!

Originally published on the Snipcart blog and in our newsletter .

Steve Perry

Photo by James Yarema on Unsplash

Setting up a headless Ghost CMS with Next.js

Table of contents

Choosing a cms, setting up ghost, setting up next.js, deploying with vercel.

I’ve been wanting to play with Next.js and Vercel for a while and my plan was to re-build the SPC website using a headless CMS.

For a while, the site has been running on Statamic v2, which has provided some great performance results which I was more than happy with and would be equally happy sticking with (or upgrading to v3). However, I get bored easily and I simply wanted to experiment with a JS frontend and a new CMS backend, and as I’ve been recently deep-diving with React, Next.js just made sense and has the added benefit of decent SEO features (and relieving some boredom).

I typically work with WordPress as my default CMS but I’m becoming increasingly frustrated with the block editor experience – through my own personal experience as well as the clients that I work with regularly. It’s very much a work in progress, I get that, but it just feels clunky to work with and WordPress as a whole is starting to head more towards a Squarespace or Wix type of setup – which neither myself nor the clients that I work with are interested in. So, whilst I still love WordPress and continue to work with it daily, I wanted a change for my own website.

With the direction of WordPress in mind, I’ve been looking at alternatives such as Ghost, Sanity, and Contentful etc., which offer a nice admin experience with plenty of content options without going beyond this into a full site editor, and without having the need to build lots of constraints around the components so that the design doesn't get broken when they're used. Whilst both Sanity and Contentful both look like great options, I opted for Ghost for the following reasons:

• It’s free as a self-hosted version – no usage limits etc
• I can host all of the data
• No need to set up lots of different content fields
• There’s a one-click app available on Digital Ocean, making setup super easy
• There’s a Next.js Ghost example to work from
• It has a nice and clean admin interface for future client-use
• I like the logo 🤷‍♂️

I’ll probably try out this process with Sanity and Contentful at some point to see how they compare.

The main aims for this project were:

• The ability to quickly create content with enough flexibility to add media and interesting layouts without breaking out of a design style
• Green lights across all Lighthouse metrics without breaking the bank
• Content must be available for search engines
• Self-hosted data to keep costs under control

Using Ghost as a headless CMS ticks the box with regards to a simple and efficient admin experience, and it can be self-hosted to keep control over the data and costs. Pulling content from the Ghost API using a JS frontend will provide a good foundation for performance and allow for the content to be pulled into a frontend build to keep the design styles intact.

Getting started

Digital Ocean offer a one-click install of a Ghost instance within their Marketplace, so this installation was pretty straight forward using this guide – How to install Ghost on Digital Ocean.

I selected a $5 droplet because the Digital Ocean end of the bargain doesn’t have to be fast due to Next.js’ caching and static content functionality.

Once I’d ran through the setup, I logged into the Ghost admin and migrated my content from WordPress to Ghost using the Ghost WordPress plugin. I had some issues with exporting the media due to file sizes, but simply exporting the JSON file and manually uploading the WordPress images to the Ghost content folder solved this issue. As I was changing domains, I also ran some basic find and replaces in the JSON file using a text editor and checked that the image paths were correct.

Finally, I password protected the Ghost installation so that people wouldn’t be able to access the frontend.

Whilst there are great docs out there which show how to couple up Ghost to Next.js, I wanted to use the Next.js Ghost CMS repo as it was pretty much as simple as cloning the repo and getting started with styling. They have plenty of these examples on the Next.js website.

In the end, I did end up refactoring the app quite a bit. I refactored the class components over to functional components to give easier access to hooks. For example, I wanted to use useRouter() to determine the current page, and functional components (as far as I know) make this easier.

The next job was to bring in TailwindCSS and start putting together the design. In this case, I didn’t bother starting out with Figma. As I’m the only stakeholder on the project, it made sense to jump straight into the browser and design the site with code. This allowed me to test the performance metrics during the design phase to ensure that I was making design choices that aligned with my main aims.

Keeping the design simple and relying on clean negative space, coupled with some lovely fonts from Klim Type Foundry, made it pretty easy to get those green Lighthouse scores off the bat. The CSS file is just 2.5kb.

As an aside, I often get requests to work on a website’s performance to increase Lighthouse scores. It can be very difficult to achieve good scores once there are lots of plugins installed (in the case of WordPress, for example) and off-the-shelf themes are used. Performance should be considered as part of the design of a website or web application. Making smart design choices at the beginning absolutely affects performance and it should not be an after thought. Bringing in somebody once a website is already built is like trying to optimise the foundations of a house once everybody has been living there for a few years. Make performance an important part of your project right from the start and you will see huge improvements in the long term.

Back to the book. Finally, it was a matter of setting up the static page content. For this, I opted to just hard-code the content into Next.js components instead of adding them to Ghost – simply because they probably won’t change much so I don’t really need a CMS to manage them.

Getting set up with Vercel couldn’t be more efficient. Create a project, connect the GitHub repo, set up your API keys in the environment section, and hit deploy. Within a minute or so you get a working app on a staging URL 🚀 – hashtag shipped… or liftoff… or, launch 🤷‍♂️. To launch the site, I simply added my domain using their docs and it was live.

15 Best Headless CMS Platforms to Use in 2023

Published: August 22, 2023

Are you a developer looking for a powerful tool that will allow you to build complex, custom, and innovative web applications? Headless CMS platforms may be just what you’re looking for.

Headless CMS platforms are revolutionizing how content is managed, consumed, and delivered. Headless CMS software offers a unique solution for developers that traditional CMS platforms cannot match — they provide maximum flexibility with frontend capabilities, cloud-based hosting, scalability, and security benefits.

With these advantages, headless CMS platforms have become increasingly popular in recent years, and there are now numerous options to choose from. Read on to learn about 15 of the best headless CMS platforms available in 2023.

Table of Contents

• What is a headless CMS platform?

Headless CMS vs. Standard CMS

The 15 best headless cms platforms, what is a headless html cms platform.

Crafting an individualized customer experience is made easy with a headless CMS platform. These platforms allow developers to employ any programming language or framework of their choice to construct custom frontend experiences while simultaneously allowing content creators to manage and create content from within the backend system.

With a headless CMS, the content is stored and managed separately from how the CMS displays it on the website or application.

Rather than having an in-built interface to show what you've written, developers can use APIs to pull this data into custom HTML, CSS, and JavaScript experiences that they themselves create — meaning they are truly in control of their presentation layer.

The “headless” aspect of a headless CMS emphasizes the break between content management functionality at its backend and the presentation layer up front. A typical web development designation, “head” relates to the frontend or display section, while “headless” alludes to the absence of an ordinary user interface in the CMS.

While both headless CMS and standard CMS offer unique benefits, each also comes with its own set of drawbacks.

1. Wordpress VIP

Don't forget to share this post!

Related articles.

15 Best Membership Website Builders and Platforms in 2023 [+Examples]

How to Get an SSL Certificate [+10 Best Free SSLs]

A Simple Explanation of SSL Certificate Errors & How to Fix Them

Our 14 Favorite CMS Hub Themes for Small Businesses

The Evolution of Web Design: How Websites Are Becoming More than a Pretty Face

What Is a 413 Request Entity Too Large Error & How to Fix It

5 Adobe Experience Manager Alternatives to Check Out

14 Features Your CMS Absolutely Needs

8 Drupal Alternatives to Check Out in 2023

How to Make a Picture Into a Link

Build and Manage Your Website on HubSpot's CMS Hub

100% Free CRM

Nurture and grow your business with customer relationship management software.

Go Jamstack

Jamstack examples, from the real world

Ghost CMS and Hugo

In a rush? Skip to the Github repo .

Content management is often a challenge when considering a static site for a project. People think that a static site is, indeed, static. However, there are a lot of great solutions out there to make your static site dynamic .

Ghost is an open source CMS backed by a non-profit company. What started as a Kickstarter campaign became one of the most powerful alternative to Wordpress. It is packed with awesome features, including a Medium-like content writing interface and a subscription platform without transaction fee. Yeah, you read that well: no transaction fee.

In this article, I'll use Ghost as a headless CMS to manage content for a static site built with Hugo and deployed on Netlify . It is the exact setup for this blog, and I believe it works extremely well.

The goal of this article is not to compare Ghost or Hugo to other solutions, but I'll still skim through some limits for this setup in the last section .

Setting up your Ghost blog

Ghost CMS can be used as a fully hosted solution with Ghost(Pro) , or run on your own instance. The option for the key-in-hand solution looks pretty neat. One thing I like is that, since it is run by a non-profit, you know that your monthly payments are used to improve the solution. It is a win-win situation.

Today, I'll be setting this up on my own infrastructure. It won't come with the CDN and all security features of the hosted solution, but it's dead cheap and it will be used as a headless CMS anyways.

There are many ways to setup your new blog, but I used the Digital Ocean 1-Click integration. If you don't have a Digital Ocean account and want to support this blog, you can signup here . You'll get 100$ worth of credits valid for 60 days (who needs that much for just 60 days?!?), and I'll get 25$ of credits with them.

The setup is pretty straightforward.

First, you need to create a droplet (Create > Droplets). You can see a droplet as your own bursty virtual machine.

You will then need to choose an image for your new droplet. The 1-Click integration is in the Marketplace tab.

Here, the Ghost CMS is recommended for me (maybe I used it too much 😏) but it may not be for you. You can always use the search box.

Once this is selected, you can go on and fill the rest of the form. You will most probably be OK with the smallest droplet (5$/month). Select the nearest region to where you will be creating/editing your content. After you submit the form, it can take 5-10 minutes for the droplet to be initialized.

You can log into your droplet using ssh root@use_your_droplet_ip . On the first login, you will be prompted to finalize your Ghost setup. On further login, if you need to run a ghost command, you need to run sudo -i -u ghost-mgr . This will log you in as the ghost user on your instance.

As I write these lines, the 1-Click installation is setting up your Ghost blog on Ubuntu 18.04 (they just released 20.04, so that could change). I suggest you follow Digital Ocean's tutorial to complete your Ubuntu setup. The firewall should be good and ready thanks to Ghost, but the non-root sudo user is a must.

Once you're done, you should be able to login on https://yourdomain.com/ghost.

Add the integration script

I take for granted that you already have your own Hugo site. If you're starting from scratch, I suggest you have a look at Hugo's Starter Kits for a headstart. I love using Atlas and it is the starter kit I used for this tutorial (initial commit with Atlas setup).

Create an integration in Ghost

Head up to the Integrations tab in your Ghost CMS. This is where most automation will happen for your site. Click on + Add Custom Integration. Fill in a relevant name and a description. It will be useful in the future when you forgot everything about your current setup. And yes, it happens to the best of us.

You will need both the the Content API Key and the API URL for the next steps. You should keep these informations as secure as possible.

Set up your repo

First of all, you need a npm or yarn package. If you have no clue what I am talking about, you should check what npm is . It will probably be helpful.

Install dependencies (I added dotenv here to manage environment variables on local):

Add your environement variables to .env :

Add the script

This piece of code is inspired by a tutorial Ghost made an integration with Vuepress . It fetches all the posts in my Ghost instance and formats them before adding the files to my Hugo site. It will run on every deployment of the website, thanks to Netlify deployment command.

Add a file named createdMdFilesFromGhost.js with the following content:

A few things to note here:

• An article without an author is skipped. You can indeed remove this rule but I find it handy.
• The body of the created file is all in HTML, not in markdown. We can benefit from some of the templating done by Ghost. For example, Ghost has 3 width of images and adds a class to the image depending on the width you want. This wouldn't be possible in pure markdown.
• Sometimes, the title that you want indexed in Google is different dans the one on the page. That's why I am making the pagetitle accessible.
• All files will be rendered in content/posts . If you need them somewhere else, please update the path.

Make sure that HTML rendering is enabled

Since version 0.60.0 , Goldmark is the new default library used for Markdown in Hugo. For security reasons, this new renderer omits inline HTML in Markdown by default. You can read about this design decision here. Since it is what we are using for this integration, you need to update your config.toml with:

Try it on local

You should be able to run your script on local to see this integration in action by simply running node createMdFilesFromGhost.js .

Your new fetched posts should have appeared in content/posts . Congratulations!

Deploy your Hugo site

Since we don't want to run this site everytime we make a change to the website, we need Netlify redeploy and run this script for us on every change.

Netlify build command

You will need 2 things:

1) Add the command to your package.json scripts:

2) Update your hugo build command in netlify.toml :

Please note that this needs to be adapted to your situation and is provided as an example only.

Now, you can commit and push all your changes to your repo to test your build pipeline.

Webhook from Ghost to Netlify

Once the netlify build works properly, we need a way to notify Netlify that it needs to rebuild the site. This is what webhook are built for. Ghost CMS is particularly powerful when you use the webhook feature right.

Again, you will need 2 things:

• Add a build hook to your Netlify site. You can do so in Settings > Build & Deploy > Build Hooks by click "Add build hook". Please add a descriptive name, select the appropriate branch and copy the URL.
• Add webhooks to your Ghost integration. Go back to the Ghost integration you added to your site earlier. In the "Webhooks" section, you need to add 3 different webhooks: Post published, Published post updated, Post unpublished. The should all link to your build hook. You can add more webhooks if you want more frequent rebuilt. Just keep in mind that you're probably using Netlify's free plan and you shouldn't waste their resources on empty rebuilds.

Please note that the posts' files will not be included in your repository. You could add them manually by running the script on local and pushing the changes. This can be useful if you want extra backup of your Ghost content. Your Ghost CMS can indeed be hacked, better be safe than sorry.

Limits of Ghost with Hugo

• Managing your pages' content. Since there is no way to output custom frontmatter, Ghost can't really be used to manage the content of your pages (except for basic pages without custom frontmatter variables and a body, i.e privacy policy). You can indeed update the script to do this and follow a specific format for your page, but keep in mind the page format can't be forced. The content of your pages is probably changing less often, and could be managed by using NetlifyCMS or Forestry .
• Managing files and uploads. One thing I find lacking in Ghost CMS is a great upload manager. We have to give WP that they nailed this feature. In Ghost, you can neither remove images nor reuse images or documents easily. This can be dangerous if you accidently upload some content with sensitive information. You will need to SSH of FTP into your server, find the file and remove it. That file has probably been declined in multiple sizes, so make sure you delete all of them. Also, with our current Digital Ocean setup, all files are served from our Digital Ocean droplet , and not from a CDN. If you're getting a lot of traffic, you should think about integrating your uploads with S3 or paying for Ghost(Pro).
• Messing up formatting. Since the integration imports HTML in the body of the article instead of markdown, there can be some issue with parsing and you are left without the powerful shortcodes of Hugo. For this blog, I had issue with the formatting of code blocks. Usually, the solution is to parse and transform the HTML directly in the import process. It can get tedious when there's a lot of posts, so a bit of creativity can be needed. 😉

Final thoughts

If you're looking for a beautiful and powerful editor, Ghost CMS is definitely worth looking into. Coupled with Hugo, you can still keep your stack as static, secure and fast as possible.

If you enjoyed this post, please take a second to share it on Twitter .