Netlify CMS Setup & Git Rebase

I’ve been putting in a bit of work on the new Hugo site I’m building out. On Sunday I deployed it to Netlify again and today I set up the CMS.

Adding Netlify CMS To a Hugo Site

This assumes a basic site is already deployed to Netlify. These are the instructions to add a CMS. For basic setup reference next time…

Add folder static/admin to project main folder.

To this folder add static/admin/index.html:

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Content Manager</title>

  <!-- Include the styles for the Netlify CMS UI, after your own styles -->
  <link rel="stylesheet" href="https://unpkg.com/netlify-cms@^1.0.0/dist/cms.css" />
  <script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
</head>
<body>
  <!-- Include the script that builds the page and powers Netlify CMS -->
  <script src="https://unpkg.com/netlify-cms@^1.0.0/dist/cms.js"></script>
</body>
</html>

To the same folder add static/admin/config.yml:

backend:
  name: git-gateway
  branch: master

publish_mode: editorial_workflow

media_folder: "static/img/uploads"
public_folder: "/img/uploads"

collections:
  - name: "blogs"
    label: "Blog Posts"
    folder: "content/blog"
    create: true
    slug: "{{slug}}"
    fields: # The fields for each document, usually in front matter
      - {label: "Title", name: "title", widget: "string"}
      - {label: "Publish Date", name: "date", widget: "datetime"}
      - {label: "Tags", name: "tags", widget: "list", default: [] }
      - {label: "Categories", name: "categories", widget: "list", default: [] }
      - {label: "Banner Image", name: "banner", widget: "image"}
      - {label: "Body", name: "body", widget: "markdown"}

Note: This config is very specific to the content of the site so refer to the docs for full customization instructions.

In Netlify settings for the site go to the Identity tab and enable the Identity service. Then open the Identity settings and enable Git Gateway (this allows the CMS to update the site by pushing content edits to GitHub as commits).
In Site Settings -> Identity -> Registration, you’ll most likely want to make the registration invite only.
Go back to Identity Settings, and invite whatever users need to be able to use the CMS (including yourself).

In the Deploys tab go to Deploy Settings -> Post Processing. Add a snippet with before </body> to redirect logged-in users to the CMS:

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

Still in Post Processing, add a second snippet with before </head> for the Identity service to work:
<script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
Commit all of these changes and push the changes to GitHub.
Visit the CMS at mysite.com/admin and log in.

Rebasing

Another tip: now that content can be added to the site, reminder to git pull before making additional changes locally. Otherwise, merge conflicts and rejections! The best way to do this is to rebase with the git pull:

# commit local changes
git pull --rebase
git status ---> (check everything worked)
git push

I have yet to try this so these commands might be wrong! I’ll correct it if so.