Before we dive into the specifics about Netlify CMS, let’s look at a few introductory topics. These include the JAMstack, the Netlify service, and content management systems in general. From there, we’ll start looking at Netlify CMS itself.
The JAMstack
Traditional web application stacks such as LAMP (Linux, Apache, MySQL, PHP) or MEAN (MongoDB, Express, Angular, Node.js) specify particular server platforms, programming languages, and database vendors.
JAMstack - that’s JavaScript, APIs, and Markup - is a new paradigm for building fast web applications. It is technology-and tool-agnostic. A JAMstack site might be powered by JavaScript via Gatsby or by Ruby via Jekyll.
A JAMstack site pre-renders its pages to static HTML markup which can be served from a CDN or other hosting service. These pages contain JavaScript to provide interactivity, which loads data from an API of some kind. In this model, the application is decoupled from its data.
The API could be a backend service deployed separately, or it could be a third-party service like a headless CMS or a set of AWS Lambda functions.
The JAMstack
One of the biggest benefits of using the JAMstack is performance. Because the pages are generated ahead of time and deployed as static HTML, there is no dynamic generation of HTML from a server and no wait for server-side code to execute. Instead, these static resources can be served from a lightning-fast content delivery network (CDN). By using a CDN, assets are served to a visitor from a server geographically close to them.
There can also be cost savings. Serving your static assets from a CDN is likely less expensive than maintaining your own server infrastructure.
About Netlify
Netlify (https://netlify.com) is a popular platform for hosting websites and applications. At its core, it is a hosting service but also has many other powerful features such as analytics, serverless functions, forms, and a CDN. They have a generous free tier of services.
Netlify’s workflow is based on Git repositories. A site is created by connecting a repository from a service like GitHub or GitLab. When a new commit is pushed, Netlify will build and deploy a new version of the site. For this reason, the Netlify platform is well suited to building JAMstack applications.
In this book, we will build and deploy the example project on the Netlify platform.
What is a CMS?
As a web developer, it is easy to build web content by just writing HTML and CSS (or, in the case of Gatsby as we’ll see later, Markdown). But consider a nonprofit organization that hires a developer to build a website for them. Unless someone at the nonprofit knows how to code, they will have to spend more money by having the developer come back every time they need the site updated.
A content management system, or CMS, is a solution to this problem. Instead of the content being written in source code, the CMS provides a rich editing experience for authoring and maintaining content. Some features of a CMS might include a WYSIWYG (What You See Is What You Get) editor or a media library for managing images and other media.
A CMS allows multiple authors to draft, edit, and publish content to the site, all without having to worry about writing markup or code. It’s also easier because content can be edited directly in the web browser.
A CMS can be used to manage multiple types of content on a site. The most common type of content that comes to mind is an article or blog post. However, a CMS can even be used to provide content on a landing page, header, or footer as well.
Traditional CMS
A traditional CMS is a large web application that handles both the management and display of the content. The content is typically stored in a database of some kind. An author logs in via a web interface, edits the content, and it is saved to the database.
A visitor to the site will utilize the same application to view the content. It retrieves the content from the database where it is presented to the user.
The architecture of a traditional CMS
Some examples of traditional CMS platforms are WordPress, Drupal, and Joomla.
Headless CMS
A headless CMS is a platform for authoring content but does not contain a front-end interface for displaying that content. Instead, the content is exposed through an API of some kind.
The primary benefit of a headless CMS is that since the content is delivered via an API, it can be consumed by multiple front-end applications. It also provides greater flexibility in how the content is presented. A traditional CMS may be highly customizable, but you are still locked into the platform.
The architecture of a headless CMS platform
Some examples of headless CMS platforms are Contentful, Magnolia, and Netlify CMS.
As you can probably tell, a headless CMS is a perfect choice for a JAMstack application due to its decoupled, API-first nature. We can build an entire site around the API, using it as a data source for our content.
One potential drawback of a headless CMS is that you may not be able to see a preview of how the content will look on the live site. Fortunately, Netlify CMS supports custom previews, which solves this particular problem.
Netlify CMS
Netlify CMS is a free, open source headless CMS created by Netlify. Despite its name, it is not locked to the Netlify platform. While it is much easier to build and deploy a Netlify CMS-powered site on Netlify, it is not required.
Some CMS platforms store their data in databases that are accessed via an API. Netlify CMS takes a simpler approach. The content is stored as images and Markdown files in a Git repository. This makes it an ideal partner with Gatsby, which has plugins for working directly with, and rendering, Markdown data. It should be noted that Netlify CMS works with other site generators and platforms as well.
Netlify CMS provides a React single-page application with a rich text editor so that content creators don’t have to write Markdown directly. While the user interface is powered by React, it can be used with a site built with any technology. Netlify CMS can be used with any platform, such as Hugo, Jekyll, Nuxt, as well as Gatsby.
Backends
Netlify CMS supports several different backends for storing its data. These different backends also provide authentication mechanisms for logging into the CMS. Some of these backends include GitHub, GitLab, and Bitbucket. For these three backends, a user can log in using their GitHub, GitLab, or Bitbucket account, respectively.
Another backend (and the one we will use in this book) is the Git Gateway backend. This is a Netlify-provided backend that does not require the credentials to the user’s Git provider. Instead, authentication is configured via the Netlify Identity service, which includes a basic application for managing users. At the time of writing, the Git Gateway backend is only supported for GitHub or GitLab repositories.
High-level architecture of Netlify CMS
How it works
Netlify CMS is configured with a YAML file named config.yml. This file configures the different resources managed by the CMS. These resources are divided up into collections. Each collection will have its own section in the CMS user interface, and each collection defines a set of fields . These fields determine which UI controls will appear when editing content in each collection.
When a new resource is added to a given collection, a new Markdown file is created in the repository containing the data. The fields are generally stored as attributes in the Markdown file’s front matter. There is one exception to this. If there is a field called body that is of type markdown, it will instead be stored as the body of the Markdown file itself.
Netlify CMS configuration for a blog collection
With this configuration, blog entries are stored as Markdown files in the src/pages/blog directory. title and date will be attributes in the front matter, while body will be Markdown-formatted text in the body of the file.
An example blog entry
When a new blog entry is created via the CMS, the data will be saved to a new Markdown file under src/pages/blog, and the backend will create a new commit in the site’s Git repository, where it is stored along with the application’s source code. An updated version of the site is then built and deployed, which will contain the new Markdown file.
Local development
When developing the Gatsby site locally, Netlify CMS is deployed locally into the site, since it is just a React single-page application. However, it works against the remote version of your repository.
This means that if you open the CMS locally and make some changes, those changes won’t immediately be reflected in your local copy of the repository. These changes are committed to the remote repository, which will result in the content going live on the deployed site.
In order to access this newly added or modified content locally, you will need to perform a git pull operation to pull the new commit from GitHub.
In Netlify CMS 2.10.17, a feature was added that allows you to develop against a local Git repository instead of the live site from the remote repository. This is done by running a local proxy server that Netlify CMS will communicate with, which will create commits in the local Git repository. At the time of writing, however, this feature is still in beta and is subject to change, so we won’t cover it here.
For the most up-to-date information, consult the Netlify CMS documentation at www.netlifycms.org/docs.
Widgets
boolean: Renders a toggle switch.
code: Renders a code editor with syntax highlighting.
datetime: Renders a date and time picker.
file: Renders a file picker that allows the selection of a file from the media library.
hidden: Does not render a UI control. This widget type can be used for metadata.
image: Similar to file but only allows the selection of image files.
list: Can be a list of values or a nested list of fields. Lists can even contain other lists.
map: Renders an interactive map.
markdown: Renders a rich text editor that stores the data as Markdown.
number: Renders an input field that only accepts numbers.
object: Allows grouping of other fields together.
relation: Used to reference members of a different collection.
select: Renders a drop-down menu.
string: Renders a single-line text field.
text: Renders a multiline text area.
The CMS user interface which is composed of widgets
If one of the built-in widgets are not suitable for your desired content editing experience, you can create your own. Custom widgets are created as React components and registered with the CMS.
Previews
Netlify CMS shows a live preview of the content being edited. The out-of-the-box experience is very basic, however, and won’t be a preview of how the final content will look on the site.
Fortunately, the CMS can also be extended with custom previews. These are React components that are given the CMS data and can then render a preview with, for example, the site’s styling to provide a live preview of a blog entry.
Summary
A JAMstack application is made up of JavaScript, APIs, and Markup.
Netlify is an application platform with many features and a free tier of services.
A traditional CMS tightly couples the authoring and viewing of content.
A headless CMS exposes the content via an API where it can be consumed by other viewing applications.
Netlify CMS is a headless CMS that will be the focus of this book.