Netlify CMS: Content Management for static sites

16 april 2020 om 10:44 by ParTech Media - Post a comment

Built as an extensible single-page React app, Netlify CMS lets you manage content for your static websites and web apps. These websites and web apps can be either Netlify-powered or backed by some other hosting service/technology.

While Netlify is a platform for developing, deploying, and managing static websites (see also: The power of Netlify), Netlify CMS is an open-source, extensible tool intended for content management on static sites. Netlify CMS can be paired with a static site generator for creating faster and flexible websites and web apps.

Netlify CMS offers easier versioning as well as multi-channel publishing by its ability to store the content alongside the code in a Git repo. Content updates can be handled directly in the Git repository.

Advantages of Netlify CMS

Netlify CMS behaves as a wrapper for the Git workflow, leveraging Bitbucket, GitHub, or GitLab API. It imparts a range of advantages, most prominent among which are:

  • Accepts All Types of Content – Ability to specify as many content types with custom fields as required.
  • Effortless Installation and Setup – Add files to a website and hook up the backend to the frontend by including those files to the concerning build process or linking to Netlify Edge.
  • Extensibility – Freedom to create custom-styled previews, editor plugins, and UI widgets.
  • Fast and Elegant Web-based UI – Supports drag-and-drop media uploads, real-time preview, and rich-text editing.
  • Higher Compatibility – Provides support for most static site generators.
  • Modern Authentication – Uses Bitbucket, GitHub, or GitLab and JSON web tokens.

Adding Netlify CMS to a website

Netlify CMS can adapt to the ranging requirements of modern web projects. It works fine with content written in JSON, markdown, TOML, or YAML files which stored in a repository belonging to Bitbucket, GitHub, or GitLab.

Creating a custom backend to use with Netlify CMS is also possible.

These are the various steps followed for adding Netlify CMS to your website:

1. Folder and file structure

All Netlify CMS files are contained in a static admin folder. It is stored at the root of the published website. The exact location where this folder is stored in the source files is determined by the static site generator one decides to use.

For example, for Gatsby and Hugo, it is /static whereas, for Next.js and VuePress, it is /public and /.vuepress/public, in the respective order. Two files are created in the admin folder:

  1. admin/index.html: Serves as the entry point for the Netlify CMS admin interface. It is a basic HTML starter page responsible for loading the Netlify CMS JavaScript file.
  2. admin/config.yml: The core file of the Netlify CMS installation.

There are several ways of setting up Netlify CMS for using with your static website, such as using Netlify CMS as an npm module. The most convenient way, however, is to load the JS file containing the Netlify CMS in an HTML file i.e., admin/index.html.

2. Configuration

Next, you need to configure the Netlify CMS, which is highly website-specific. You need to configure:

  • Backend: Specifies the backend protocol and publication branch.
  • Editorial workflow: Adds an interface for approving, drafting, and reviewing posts. Works with GitHub Repos, beta support is available for Bitbucket and GitLab repos.
  • Media and public Folders: Lets users upload images directly within the editor.
  • Collections: Define the structure of various content types for the static website. Varies significantly from website to website
  • Filter: Allows filtering collections based on the value of a single field.

3. Authentication

Once the Netlify CMS files are placed accordingly, the static site generator and configured, the next step is enabling authentication. Although any platform of choice can be used, using Netlify hastens the whole process.

4. Accessing Netlify CMS

All that left now is to access the Netlify CMS and start working on the static website.

Static Site Generators and Netlify CMS

Modern static site generators help in developing a fast and elegant website as well as making it even possible for non-IT people to effectively use the same.

A static site generator is a tool that enables generating a website that has HTML, CSS, and JS. Before you begin, though, you need to have content and a template ready. Following is a summary of how a website is created using a static site generator:

Step 1: Selecting and installing a static site generator. Code quality, setup process, and performance are the main factors while forming a decision. The most popular static site generators are:

Step 2: Creating a website using the static site generator.

Step 3: Generate CSS, HTML, and JS for the website.

Step 4: Static site deployment: This is where Netlify comes in.

Step 5: Content management: The role of Netlify CMS begins here.

Using Netlify CMS with a static site generator grants users enhanced speed and flexibility for managing content when compared to using conventional options.

All you need to do to integrate Netlify CMS with your static site generator is to connect it to your Git repository and save the modified files to it. When you push the changes, Netlify CMS automatically updates the website content accordingly.

The synergy among Gatsby and Netlify CMS

A JAMstack-powered website or web app is one that has no server-side component, i.e. it is serverless. Such a website or web app relies on templated markup files that are requested via an API by the client-side JS code for rendering content on a webpage.

JAMstack is gaining popularity as a better option for building websites. It is because the website-building technology offers:

  • Better performance
  • Low cost
  • High security
  • A developer-friendly experience

There are several ways to build a website leveraging JAMstack. One effective way, however, is to use Netlify along with Gatsby, which is a popular, ReactJS-powered static site generator leveraging GraphQL.

Gatsby increases webpage speed by keeping the page loading times to the minimum possible. It does so by generating several JS and CSS files and splitting them in such a way so that a webpage loads the minimum amount of code required.

Netlify CMS provides the markup data for a Gatsby-powered website. A user can add content through the CMS that Gatsby then uses to create befitting webpages.

Data or content that is saved to Netlify CMS is automatically saved into the website or web app’s respective Git repo in the form of markdown files.

Once Gatsby finishes generating all the files from its build process, it is possible to deploy the website, or web app, to a static website host like Netlify and Amazon S3.

Conclusion

Netlify CMS was created to fill the gap in static site generation pipeline, enabling you to provide editors with a friendly UI and intuitive workflows. Netlify CMS is made to be community-driven and not only locked to the Netlify platform as it can be used without Netlify to deploy your website.

Hooking Netlify CMS to your static website enables content editors to make commits to your site repository without touching code.

So, consider adding Netlify CMS and have a fully-working CMS-enabled site with one click!