Skip to Content
All memories

Connect netlify cms with hugo website

 — #Hugo

In this article, We are gonna connect your hugo website to netlify cms. Prerequirements: Netlify account, basic knowledge about hugo and netlify cms.

What is netlify cms?

Netlify CMS is an open source content management system for your Git workflow that enables you to provide editors with a friendly UI and intuitive workflows.

What is hugo?

Hugo is a fast and modern static site generator written in Go.

Hugo project folder structure

- archetypes
- content
- themes
- static
- config.yaml

Connect netlify cms with your hugo site

  • Create a folder named as admin inside static folder and create two files named as config.yaml and index.html.

  • Paste the below code inside config.yaml file.

  name: git-gateway
  branch: main # Branch to update (optional; defaults to master)
media_folder: static/img
public_folder: /img
  - name: 'blog'
    label: 'Blog'
    folder: 'content/blog'
    create: true
    slug: '{{year}}-{{month}}-{{day}}-{{slug}}'
      preview: false
      - { label: 'Title', name: 'title', widget: 'string' }
      - { label: 'Publish Date', name: 'date', widget: 'datetime' }
      - { label: 'Description', name: 'description', widget: 'string' }
      - { label: 'Body', name: 'body', widget: 'markdown' }
  • Paste the below code inside index.html file.
<!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>
  • Now, deploy your site in netlify and enable netlify identity in your site settings.



  • Hugo with netlify cms
  • Connect your hugo site with netlify cms
  • Netlify cms and hugo