Open Authoring

This is a beta feature.

When using the GitHub backend, you can use Netlify CMS to accept contributions from GitHub users without giving them access to your repository. When they make changes in the CMS, the CMS forks your repository for them behind the scenes, and all the changes are made to the fork. When the contributor is ready to submit their changes, they can set their draft as ready for review in the CMS. This triggers a pull request to your repository, which you can merge using the GitHub UI.

At the same time, any contributors who do have write access to the repository can continue to use Netlify CMS normally.

Requirements

  • You must use the GitHub backend.

    Note that the Git Gateway backend does not support Open Authoring, even when the underlying repo is on GitHub.

  • For private GitHub repos the user must have read access on the repo, and you must explicitly set the auth_scope to repo, for example:
backend:
  name: github
  repo: owner-name/private-repo-name # path to private repo
  auth_scope: repo # this is needed to fork the private repo
  open_authoring: true

Enabling Open Authoring

  1. Enable the editorial workflow by setting publish_mode to editorial_workflow in your config.yml.
  2. Set open_authoring to true in the backend section of your config.yml, as follows:
    backend:
      name: github
      repo: owner-name/repo-name # Path to your GitHub repository
      open_authoring: true

Usage

When a user logs into Netlify CMS who doesn’t have write access to your repo, the CMS asks for permission to create a fork of your repo (or uses their existing fork, if they already have one). They are then presented with the normal CMS interface. The published content shown is from the original repo, so it stays up-to-date as changes are made.

On the editorial workflow screen, the normal three columns are replaced by two columns instead — “Draft” and “Ready to Review”.

When they make changes to content in the CMS, the changes are made to a branch on their fork. In the editorial workflow screen, they see only their own pending changes. Once they’re ready to submit their changes, they can move the card into the “Ready To Review” column to create a pull request. When the pull request is merged (by a repository maintainer via the GitHub UI), Netlify CMS deletes the branch and removes the card from the user’s editorial workflow screen. Open Authoring users cannot publish entries through the CMS.

Users who do have write access to the original repository continue to use the CMS normally. Unpublished changes made by users via Open Authoring are not visible on the editorial workflow screen, and their unpublished changes must be merged through the GitHub UI.

Alternative for external contributors with Git Gateway

As noted above, Open Authoring does not work with the Git Gateway backend. However, you can use Git Gateway on a site with Netlify Identity that has open registration. This lets users create accounts on your site and log into the CMS. There are a few differences, including the following:

  • Users don’t need to know about GitHub or create a GitHub account. Instead, they use Netlify Identity accounts that are created on your site and managed by you.
  • The CMS applies users’ changes directly to your repo, not to a fork. (If you use the editorial workflow, you can use features like GitHub’s protected branches or Netlify’s locked deploys to prevent users from publishing directly to your site from the CMS.)
  • There is no distinction between users with write access to the repo and users without — all editorial workflow entries are visible from within the CMS and can be published with the CMS. (Unpublished Open Authoring entries, on the other hand, are visible only to the author in the CMS UI or publicly as GitHub PRs.)

Linking to specific entries in the CMS

Open authoring often includes some sort of “Edit this page” link on the live site. Netlify CMS supports this via the edit path:

/#/edit/{collectionName}/{entryName}

For the entry named “general” in the “settings” file collection

https://www.example.com/path-to-cms/#/edit/settings/general

For blog post “test.md” in the “posts” folder collection

https://www.example.com/path-to-cms/#/edit/posts/test
  • collectionName: the name of the collection as entered in the CMS config.
  • entryName (for file collections: the name of the entry from the CMS config.
  • entryName (for folder collections: the filename, sans extension (the slug).

Gridsome

This guide will help you get started using Netlify CMS and Gridsome.
How to install Gridsome
1. Install Gridsome CLI tool

# Using Yarn
yarn global add @gridsome/cli

# Using NPM
npm install –global @gridsome/cli

Create a new Gridsome website

# To create a new project run
gridsome create gridsome-netlify-blog

# Then navigate to the project folder
cd gridsome-netlify-blog

# To start local dev server at http://localhost:8080
gridsome develop

Install Netlify CMS the required dependencies to your project

# Using Yarn
yarn add netlify-cms gridsome-plugin-netlify-cms @gridsome/source-filesystem @gridsome/transformer-remark

# Using NPM
npm add netlify-cms gridsome-plugin-netlify-cms @gridsome/source-filesystem @gridsome/transformer-remark

Now that the plugins are installed, it’s time to setup the configuration. Open the gridsome.config.js file and update its content to:

module.exports = {
siteName: ‘Gridsome’,
transformers: {
remark: {
externalLinksTarget: ‘_blank’,
externalLinksRel: [‘nofollow’, ‘noopener’, ‘noreferrer’],
anchorClassName: ‘icon icon-link’
}
},

plugins: [
{
use: ‘@gridsome/source-filesystem’,
options: {
path: ‘posts/**/*.md’,
typeName: ‘Post’
}
},
{
use: `gridsome-plugin-netlify-cms`,
options: {
publicPath: `/admin`
}
},
]
}

Please read gridsome-plugin-netlify-cms, transformer-remark for more information.
Netlify CMS setup

Create an admin directory inside the src
Create an uploads directory inside the root of your project
Add index.html, index.js and a config.yml file to your admin directory

Your index.html should look like this:

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″ />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />
<title>Netlify CMS</title>
</head>
<body>
<script src=”index.js” type=”module”></script>
</body>
</html>

Your index.js should look like this:

import CMS from “netlify-cms”

Your config.yml for GitHub should look like this:

backend:
name: git-gateway
branch: main # Branch to update (optional; defaults to master)

media_folder: “static/uploads”
public_folder: “/uploads”

collections:
– name: “posts”
label: “Posts”
folder: “posts”
create: true
slug: “{{slug}}”
fields:
– {label: “Title”, name: “title”, widget: “string”}
– {label: “Excerpt”, name: “excerpt”, widget: “string”}
– {label: “Publish Date”, name: “date”, widget: “datetime”}
– {label: “Body”, name: “body”, widget: “markdown”}

Push to GitHub

It’s now time to commit your changes and push to GitHub.

git init
git add .
git commit -m “Initial Commit”
git remote add origin https://github.com/YOUR_USERNAME/NEW_REPO_NAME.git
git push -u origin main

Add your repo to Netlify

Go to Netlify and select ‘New Site from Git’. Select GitHub and the repository you just pushed to. Click Configure Netlify on GitHub and give access to your repository. Finish the setup by clicking Deploy Site. Netlify will begin reading your repository and starting building your project.

Enable Identity and Git Gateway

Netlify’s Identity and Git Gateway services allow you to manage CMS admin users for your site without requiring them to have an account with your Git host or commit access on your repo. From your site dashboard on Netlify:

Go to Settings > Identity, and select Enable Identity service.
Under Registration preferences, select Open or Invite only. In most cases, you want only invited users to access your CMS, but if you’re just experimenting, you can leave it open for convenience.
If you’d like to allow one-click login with services like Google and GitHub, check the boxes next to the services you’d like to use, under External providers.
Scroll down to Services > Git Gateway, and click Enable Git Gateway. This authenticates with your Git host and generates an API access token. In this case, we’re leaving the Roles field blank, which means any logged in user may access the CMS. For information on changing this, check the Netlify Identity documentation.

Start publishing

It’s time to create your first blog post. Login to your site’s /admin/ page and create a new post by clicking New Blog. Add a title, a date and some text. When you click Publish, a new commit will be created in your GitHub repo with this format Create Blog “year-month-date-title”.

Then Netlify will detect that there was a commit in your repo, and will start rebuilding your project. When your project is deployed you’ll be able to see the post you created.

Your basic blog scaffold is done, now you can query data from the GraphQL server just like you’re working with the filesystem. For more info read querying data.

Middleman

This guide will help you get started using Netlify CMS and Middleman.

Installation

To get up and running with Middleman, you need both the Ruby language runtime and RubyGems installed on your computer. Check out the Middleman installation docs for more details. If you already have your environment set up, use the following command to install Middleman:

gem install middleman

Create a new Middleman site

Let’s create a new site from scratch. Run the following commands in the terminal, in the folder where you’d like to create the blog:

middleman init blog
cd blog

Add the Middleman blog extension

Middleman has an official extension to support blogging, articles and tagging. middleman-blog ships as an extension and must be installed to use. Simply specify the gem in your Gemfile:

gem "middleman-blog"

Install the dependencies and run Middleman with the following commands:

bundle install
middleman server

Get started with Middleman

Now we have our site up and running let’s open up a code editor and create a new folder source/posts and add your first article named 2019-01-01-example-article.html.md with the following content:

---
title: Example Article
date: 2019-01-01
---

This is an example article. You probably want to delete it and write your own articles once you finished this guide!

Activate the blog extension

We can then activate the blog in config.rb. Be sure to check out the Middleman blogging docs for all the configuration options.

activate :blog do | blog |
  blog.permalink = "blog/{title}.html"
  blog.sources = "posts/{year}-{month}-{day}-{title}.html"
  blog.layout = "blog-layout"
end

Load the articles

Time to load our articles in index.html.erb.

<h1>Recent articles</h1>

<% blog.articles.each do | article | %>
  <article>
    <h2>
      <%= article.title %>
    </h2>

    <%= link_to 'Read more', article %>
  </article>

<% end %>

Add an article layout

In the last step before we add Netlify CMS, we add a layout for the article page. Create a new layout source/layouts/blog-layout.html.erb. For now we will get the title and the content:

<h1>
  <%= current_page.data.title %>
</h1>

<%= yield %>

Now that we have a functioning blog, let’s get started with Netlify CMS!

Add Netlify CMS to your site

Create two files in a new folder called admin, index.html and config.yml. Also add an upload folder in the images directory that will function as our media_folder.

├── source
│   ├── admin
│   │   ├── index.html
│   │   ├── config.yml
│   │
│   ├── images
│   │   ├── uploads

In the newly created index.html we add scripts for Netlify CMS and the Netlify Identity Widget:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Netlify CMS</title>
    <script src="https://identity.netlify.com/v1/netlify-identity-widget.js" type="text/javascript"></script>
  </head>
  <body>
    <script src="https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js" type="text/javascript"></script>
  </body>
</html>

Configuration

For the purpose of this guide we will deploy to Netlify from a GitHub repository which requires the minimum configuration. In config.yml file paste the following code:

backend:
  name: git-gateway
  branch: main # Branch to update (optional; defaults to master)

media_folder: source/images/uploads
public_folder: /images/uploads

collections:
  - name: blog
    label: Blog
    folder: source/posts/
    extension: .html.md
    format: frontmatter
    create: true
    slug: '{{year}}-{{month}}-{{day}}-{{title}}'
    fields:
      - {label: Title, name: title, widget: string}
      - {label: Publish Date, name: date, widget: datetime}
      - {label: Body, name: body, widget: markdown}

Push to GitHub

It’s now time to commit your changes and push to GitHub.

git init
git add .
git commit -m "Initial Commit"
git remote add origin https://github.com/YOUR_USERNAME/NEW_REPO_NAME.git
git push -u origin main

Add your repo to Netlify

Go to Netlify and select ‘New Site from Git’. Select GitHub and the repository you just pushed to. Click Configure Netlify on GitHub and give access to your repository. Finish the setup by clicking Deploy Site. Netlify will begin reading your repository and starting building your project.

Enable Identity and Git Gateway

Netlify’s Identity and Git Gateway services allow you to manage CMS admin users for your site without requiring them to have an account with your Git host or commit access on your repo. From your site dashboard on Netlify:

  1. Go to Settings > Identity, and select Enable Identity service.
  2. Under Registration preferences, select Open or Invite only. In most cases, you want only invited users to access your CMS, but if you’re just experimenting, you can leave it open for convenience.
  3. If you’d like to allow one-click login with services like Google and GitHub, check the boxes next to the services you’d like to use, under External providers.
  4. Scroll down to Services > Git Gateway, and click Enable Git Gateway. This authenticates with your Git host and generates an API access token. In this case, we’re leaving the Roles field blank, which means any logged in user may access the CMS. For information on changing this, check the Netlify Identity documentation.

Start publishing

It’s time to create your first blog post. Login to your site’s /admin/ page and create a new post by clicking New Blog. Add a title, a date and some text. When you click Publish, a new commit will be created in your GitHub repo with this format Create Blog “year-month-date-title”.

Then Netlify will detect that there was a commit in your repo, and will start rebuilding your project. When your project is deployed you’ll be able to see the post you created.

Be sure to checkout the official Middleman Starter for more examples.

Start with a Template

You can add Netlify CMS to an existing site, but the quickest way to get started is with a template. Found below, our featured templates deploy a bare-bones site and Netlify CMS to Netlify (what’s the difference, you ask?), giving you a fully working CMS-enabled site with just a few clicks.

After clicking one of those buttons, authenticate with GitHub or GitLab and choose a repository name. Netlify then automatically creates a clone of the repository in your GitHub or GitLab account. Next, it builds and deploys the new site on Netlify, bringing you to the site dashboard after completing the build.

Note for Bitbucket users: Netlify CMS supports Bitbucket repositories, but Bitbucket’s permissions won’t work with the Deploy to Netlify buttons above. You can still set up a repository manually, or follow the tutorial for adding Netlify CMS to an existing site.

Access Netlify CMS on your new site

  1. The template deploy process sends you an invitation to your new site, sent from no-reply@netlify.com. Sample email subject line: You've been invited to join radiologist-amanda-53841.netlify.com
  2. Wait for the deployment to complete, then click the link to accept the invite. Your site will open with a prompt to create a password.
  3. Enter a password, sign in, and you’ll go to the CMS. (For future visits, you can go straight to <yoursiteaddress.com>/admin/.)

Try adding and editing posts, or changing the content of the Products page. When you save, the changes are pushed immediately to your Git repository, triggering a build on Netlify, and updating the content on your site. Check out the configuration code by visiting your site repo.

More paths to explore

  • To see how to integrate Netlify CMS into an existing project, go to Add to your site.
  • Check out other sites using Netlify CMS (or share your own!) on the Examples page.
  • If you’d like to add more CMS editors or change how they log in to your site, read up on Netlify Identity service.

Collection Types

All editable content types are defined in the collections field of your config.yml file, and display in the left sidebar of the Content page of the editor UI.

Collections come in two main types: folder and files.

Folder collections

Folder collections represent one or more files with the same format, fields, and configuration options, all stored within the same folder in the repository. You might use a folder collection for blog posts, product pages, author data files, etc.

Unlike file collections, folder collections have the option to allow editors to create new items in the collection. This is set by the boolean create field.

Note: Folder collections must have at least one field with the name title for creating new entry slugs. That field should use the default string widget. The label for the field can be any string value. If you wish to use a different field as your identifier, set identifier_field to the field name. See the Collections reference doc for details on how collections and fields are configured. If you forget to add this field, you will get an error that your collection “must have a field that is a valid entry identifier”.

Example:

collections:
– label: “Blog”
name: “blog”
folder: “_posts/blog”
create: true
fields:
– {label: “Title”, name: “title”, widget: “string”}
– {label: “Publish Date”, name: “date”, widget: “datetime”}
– {label: “Featured Image”, name: “thumbnail”, widget: “image”}
– {label: “Body”, name: “body”, widget: “markdown”}

With identifier_field:

– label: “Blog”
name: “blog”
folder: “_posts/blog”
create: true
identifier_field: name
fields:
– {label: “Name”, name: “name”, widget: “string”}
– {label: “Publish Date”, name: “date”, widget: “datetime”}
– {label: “Featured Image”, name: “thumbnail”, widget: “image”}
– {label: “Body”, name: “body”, widget: “markdown”}

Filtered folder collections

The entries for any folder collection can be filtered based on the value of a single field. By filtering a folder into different collections, you can manage files with different fields, options, extensions, etc. in the same folder.

The filter option requires two fields:

field: The name of the collection field to filter on.
value: The desired field value.

The example below creates two collections in the same folder, filtered by the language field. The first collection includes posts with language: en, and the second, with language: es.

collections:
– label: “Blog in English”
name: “english_posts”
folder: “_posts”
create: true
filter: {field: “language”, value: “en”}
fields:
– {label: “Language”, name: “language”, widget: “select”, options: [“en”, “es”]}
– {label: “Title”, name: “title”, widget: “string”}
– {label: “Content”, name: “body”, widget: “markdown”}
– label: “Blog en Español”
name: “spanish_posts”
folder: “_posts”
create: true
filter: {field: “language”, value: “es”}
fields:
– {label: “Lenguaje”, name: “language”, widget: “select”, options: [“en”, “es”]}
– {label: “Titulo”, name: “title”, widget: “string”}
– {label: “Contenido”, name: “body”, widget: “markdown”}

Nested collections (beta)

Nested collections is a beta feature that allows a folder collection to show a nested structure of entries and edit the locations of the entries. This feature is useful when you have a complex folder structure and may not want to create separate collections for every directory. As it is in beta, please use with discretion.
File collections

A files collection contains one or more uniquely configured files. Unlike items in folder collections, which repeat the same configuration over all files in the folder, each item in a files collection has an explicitly set path, filename, and configuration. This can be useful for unique files with a custom set of fields, like a settings file or a custom landing page with a unique content structure.

When configuring a files collection, configure each file in the collection separately, and list them under the files field of the collection. Each file has its own list of fields and a unique filepath specified in the file field (relative to the base of the repo).

Note: Files listed in a file collection must already exist in the hosted repository branch set in your Netlify CMS backend configuration. Files must also have a valid value for the file type. For example, an empty file works as valid YAML, but a JSON file must have a non-empty value to be valid, such as an empty object.

Example:

collections:
– label: “Pages”
name: “pages”
files:
– label: “About Page”
name: “about”
file: “site/content/about.yml”
fields:
– {label: Title, name: title, widget: string}
– {label: Intro, name: intro, widget: markdown}
– label: Team
name: team
widget: list
fields:
– {label: Name, name: name, widget: string}
– {label: Position, name: position, widget: string}
– {label: Photo, name: photo, widget: image}
– label: “Locations Page”
name: “locations”
file: “site/content/locations.yml”
fields:
– {label: Title, name: title, widget: string}
– {label: Intro, name: intro, widget: markdown}
– label: Locations
name: locations
widget: list
fields:
– {label: Name, name: name, widget: string}
– {label: Address, name: address, widget: string}