Netlify CMS
Netlify CMS (now Decap CMS) is a content management system that stores its content in git and can be used to generate static sites. When developers use Netlify CMS with Padawan, any content changes can be automatically published.
Personas
There are three personas in the Netlify CMS workflow. A particular person could interact with the workflow as all three, but the majority of people will be Users.
- Developer: A person with write access to the site repo who makes code changes
- Content Editor: A person with write access to the site repo who makes content changes
- User: A person who views the generated static site content
Git-backed Content Management System
"Git-backed" means that site content (images, pages, text, etc) is stored in a git repo. This gives the power of version control and git workflows (i.e. GitLab pipelines for CI/CD). Other CMS solutions may store content in a database and/or filesystems, which requires server-side resources to transform the content to html as it is requested. Using a static site generator, Netlify CMS creates the html for a site once (when content changes) rather than on each request. This means that it can easily be hosted as a static site. However, there is a tradeoff: we get the ease of deploying static sites and blazing fast page load times, but we lose the instant gratification of making a content update and seeing it live right away. Since each content change triggers a new site build this will result in a slight delay (usually 3-6 minutes) as the pipeline builds and deploys the site. For most use cases this is perfectly acceptable, but it is an important caveat to be aware of.
Netlify CMS stores page content as markdown and commits it to a git repo. Below is an example markdown file that was generated by Netlify CMS. The file includes metadata (between the --- directives) and the actual page content. Content Editors can use the Netlify CMS rich text editor or write raw markdown.
---
title: "My Awesome Blog Post"
date: Friday July 2nd, 2021
thumbnail: images/uploads/awesome-background.jpg
---
# An h1 header
Paragraphs are separated by a blank line.
2nd paragraph. _Italic_, **bold**, and `monospace`. Itemized lists
look like:
- this one
- that one
- the other oneExamples
netlify-bael-example
The netlify-bael-example is a real-world blog site example based off the open source https://github.com/jake-101/bael-template. It is a "mono-repo" meaning that the Content Editor UI, the content markdown, and the code to transform the markdown into a static site are all stored in the same repo. This makes for easier configuration and deployments as the entire site is bundled together.
The netlify-bael-example uses Netlify CMS (at the /admin url) to write content to the master branch of the repo. This action then triggers the Padawan pipeline to build the site. The build process uses Nuxt.js to transform the markdown files into a static site. Padawan is configured to automatically deploy build artifacts to both staging and production, thus providing Content Editors traditional CMS functionality.
Current CSP limitation
Netlify CMS does not play well with a restrictive Content Security Policy (such as what is used in Padawan). https://github.com/netlify/netlify-cms/issues/2138 - Until a better solution is found, we are currently recommending a relaxed CSP for a Netlify CMS site deployed on Padawan. Contact us in the Padawan Help Channel for additional details and to request a relaxed CSP for your site. Note that this does increase the opportunity of XSS attacks for your site.