Another great feature of Netlify is there Content Management System. This allows you to edit your website’s posts without the need of a git account, from anywhere through the website’s admin page, and with more than the typical text editor. Using Netlify’s CMS is currently not a few button click process but it is still very straight forward. These are the steps needed to get Netlify’s CMS running on your jpgage.

Making changes to your Netlify account

First, you will need to navigate to your project’s settings on the Netlify website. There are three parameters here that we will need to modify.

The first is found under the Identity tab at the top of the screen. Click the Enable Identity button to allow user accounts to be created for your website. Once enabled, you will be given the option to Invite Users to use your admin page. You will want to invite yourself and go through the registration process in the email you receive.

The next parameter we need to change can be found under Settings->Identity->Registration. The first field here is the Registration preferences. I would recommend switching yours to Invite Only _to avoid any unwanted visitors. You should also add some _External providers depending on what accounts the other members of your website will have.

The final parameter can be found under* Settings->Identity->Services*. Click the button to Enable Git Gateway and you will be ready to go. The Git Gateway connects your Netlify account to your Git account through its API. This allows Netlify push and pull content changes to your source control as if you were editing the files locally.

That should be everything you need to change through the Netlify UI to add a CMS to your website. Now we will need to add the configurations files to the project that the Netlify CMS will look for.

Adding project configuration files

We need to give the Netlify CMS an html file to render for your admin page and a yml file to know how to use the information entered on the admin page. Both of these files will need to be created under .vuepress/public/admin. The first of these pages is the index.html.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Content Manager</title>
  </head>

  <body>
    <script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
    <script src="https://unpkg.com/netlify-cms@2"></script>

    <script>
      if (window.netlifyIdentity) {
        window.netlifyIdentity.on("init", (user) => {
          if (!user) {
            window.netlifyIdentity.on("login", () => {
              document.location.reload();
            });
          }
        });
      }
    </script>
  </body>
</html>

This html is provided by the Netlify team and shouldn’t need modification to work. The next file you will need is your config.yml. There are a few basic groupings to look at when creating this file.

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

The first section is the CMS backend information. We tell the CMS to use the git-gateway service that we enabled from within the Netlify UI. We can also add a custom branch to have our CMS update when a change is made.

1
2
media_folder: "/.vuepress/public/images"
public_folder: "/images"

These two locations tell the CMS where to add content. The media_folder is where your images uploaded through the CMS will end up. The public_folder is the field that will be set for the image in you post’s frontmatter.

1
2
3
4
5
6
7
8
9
collections:
  - name: "how-to" # Used in routes, e.g., /admin/collections/blog
    label: "How-To" # Used in the UI
    folder: "how-to" # The path to the folder where the documents are stored
    create: true # Allow users to create new documents in this collection
    slug: "{{slug}}" # Filename template, e.g., YYYY-MM-DD-title.md
    fields: # The fields for each document, usually in front matter
      - { label: "Title", name: "title", widget: "string" }
      - { label: "Body", name: "body", widget: "markdown" }

The final section takes a bit more configuring than the previous two. These collections represent the categories your posts will be separated into. Take a look at each field closely and adjust it for your website. There are many different fields that are possible and it would be beneficial to take a look at the official documentation.

Finishing up

You should now be able to push up your changes and navigate to your CMS page once the build is finished. Your CMS page can be found at <your website’s URL>/admin. It will ask you to sign in with the email you invited previously. You can now invite other less tech savvy editors and have a more convenient way of modifying content yourself.

Adding Netlify CMS to your VuePress website

Making changes to your Netlify account

Adding project configuration files

Finishing up