Netlify-CMS Admin for Hugo

Hugo Netlify-CMS NPM

Netlify-CMS Installation for Hugo

The traditional way to install Netlify-CMS has you creating an index.html and a config.yml file inside ‘/static/admin’. This method requires you to call two seperate modules, Netlify-Identity-Widget and Netlify-CMS, which are made to external sources. To cut down on website loadtime, you can instead import these modules with NPM and serve them locally.

To begin, create a new page layout (/_default/netlify-cms.html) and use the following as a template:

{{ $netlifyidentitywidget := resources.Get "js/netlify-identity-widget.js" }}
{{ $netlifycms := resources.Get "js/netlify-cms.js" }}
<!DOCTYPE html>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Content Manager</title>
    <script src="{{ $netlifyidentitywidget.Permalink }}"></script>
    <script src="{{ $netlifycms.Permalink }}"></script>

Per the standard installation method, you must also include the Netlify-Identity-Widget in the head section of your other pages. Be sure to include the following in your other page layouts:

{{ $netlifyidentitywidget := resources.Get "js/netlify-identity-widget.js" }}
<script src="{{ $netlifyidentitywidget.Permalink }}"></script>

To create the actual admin page itself, simply create an ‘’ file inside content/admin/. Within this directory you must also include the ‘config.yml’ file as well.

The frontmatter information for ‘’ is simply:

title: "Admin"
layout: netlify-cms

As usual, you can access your Netlify-CMS admin page via