Netlify-CMS Admin for Hugo
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>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Content Manager</title>
<script src="{{ $netlifyidentitywidget.Permalink }}"></script>
</head>
<body>
<script src="{{ $netlifycms.Permalink }}"></script>
</body>
</html>
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 ‘index.md’ file inside content/admin/. Within this directory you must also include the ‘config.yml’ file as well.
The frontmatter information for ‘index.md’ is simply:
---
title: "Admin"
layout: netlify-cms
---
As usual, you can access your Netlify-CMS admin page via https://www.yourdomain.com/admin/#/
Comments