Make an existing Hugo theme compatible with Netlify CMS

Make an existing Hugo theme compatible with Netlify CMS

Netlify CMS

Think of a landing page.
There are cases where engineers create the site, but the drafts and images are created by marketing.
I want to make minor corrections and replace images, but I feel uncomfortable asking an engineer every time…

With Netlify CMS , you can perform CMS functions like WordPress such as Hugo’s text editing, image management, posting functions, etc. from the web UI to generate static sites.

1.Configure OAuth with Netlify

Follow the Netlify documentation to set it up.

OAuth provider setup

First , create OAuth Apps on the GitHub side Client IDand Client secretsget them.
Authorization callback URLseems set

netlify cms github oauth

Netlify UI settings

From the Netlify page and Site settings > Access control > OAuthproceed Install Providerto register as before.Client IDClient secrets

netlify cms netlify oauth

Preparations are now complete.

2.Using Netlify CMS from Hugo

First , create a directory as per the document and copy and paste the following into it .static/adminindex.html


<!-- index.html -->

<!DOCTYPE html>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Content Manager</title>
    <!-- Include the script that enables Netlify Identity on this page. -->
    <script src=""></script>
    <!-- Include the script that builds the page and powers Netlify CMS -->
    <script src="^2.0.0/dist/netlify-cms.js"></script>

Set here to what you want to set from the WebUI . is the so-called Front Matter item in Hugo’s markdown file セクションのプロパティconfig.yml

If you want to set, set as follows.


  name: git-gateway
  branch: master # Branch to update (optional; defaults to master)
media_folder: static/img
public_folder: /img
  - name: "blog" # Used in routes, e.g., /admin/collections/blog
    label: "Blog" # Used in the UI
    folder: "content/post"
    create: true
    slug: "{{slug}}"
      preview: true
    fields: # The fields for each document, usually in front matter
      - {label: "Layout", name: "layout", widget: "hidden", default: "blog"}
      - {label: "Title", name: "title", widget: "string"}
      - {label: "Publish Date", name: "date", widget: "datetime"}
      - {label: "Featured Image", name: "thumbnail", widget: "image", required: false }
      - {label: "Categories", name: "categories", widget: "string", required: false }
      - {label: "Tags", name: "tags", widget: "string", required: false }
      - {label: "Description", name: "description", widget: "string" }
      - {label: "Body", name: "body", widget: "markdown"}

If you deploy to Netlify with this file included https://<your domain>/adminand access it, you can set the items to write from the WebUI as follows.

After deploying, go to https://<your domain>/admin/ and you will see a button called Login with Netlify Identity . However, when I try to log in, I get the error message Unable to access identity settings. When using git-gateway backend make sure to enable Identity service and Git Gateway . This error message will be resolved in the next chapter.

3. Change settings

 Change Netlify settings. First, go to Site settings → Identity and click Enable Identity .

Enable Identity

 Then go to Site settings → Identity → Services → Git Gateway and click Enable Git Gateway .

Enable Git Gateway

4. Operation check

 After completing the above settings, access and click Login with Netlify Identity to display the Sign up and Log in modals . Enter your name, email address and password to create an account for Netlify CMS. Note that Netlify and Netlify CMS are different, so you cannot log in even if you enter your Netlify account information.

Sign up Modal

I think that is described in  the confirmation email . However, even if I hit the URL described in the email, the authentication is not completed. You need to go to to complete the verification . After completing authentication , access and log in to display the following administration screen.


5. Enhanced security

 Up to this point, we have made the existing Hugo theme (Ananke) compatible with Netlify CMS. However, with the current settings, anyone can sign up, which is not desirable from a security perspective. So set the Site settings → Identity → Registration → Registration preferences setting to Invite only . This setting hides the Sign up modal.

Registration preferences

6. Conclusion

So far, we have described the steps to make an existing Hugo theme compatible with Netlify CMS. In this article, I used the config.yml from the Platform Guides Hugo with most of the defaults and states. It is highly customizable. See Configuration Options for details.