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.
Ghost
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
- Admin
- Webhooks
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:
yarn global add [email protected]
After successfully installing the Ghost CLI, you can go on to install Ghost in the directory of your choice by running the command below:
ghost install local
Strapi
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:
yarn create strapi-app my-project --quickstart
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 deployment 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
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.
Learn more →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
yarn create keystone-app my-project
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:
yarn dev
The above command starts up the Keystone development server.
Conclusion
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!
Try it for free.
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