Connect netlify cms with hugo website

What is netlify cms?

What is hugo?

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.
backend:
name: git-gateway
branch: main # Branch to update (optional; defaults to master)
media_folder: static/img
public_folder: /img
collections:
- name: 'blog'
label: 'Blog'
folder: 'content/blog'
create: true
slug: '{{year}}-{{month}}-{{day}}-{{slug}}'
editor:
preview: false
fields:
- { 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>
<html>
<head>
<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="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@^2.0.0/dist/netlify-cms.js"></script>
</body>
</html>
  • Now, deploy your site in netlify and enable netlify identity in your site settings.

References

--

--

--

Hey there!, I’m Gurusabarish. I build things for the web. A passionate web app developer. I tend to make use of modern web technologies to build websites.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Object Oriented Shell for Web Devs

Three.js Beginners Guide.

React Diff Algorithm, JSX And Props

Fixtures and Fittings or Goods and Chattels — what stays and what goes when you buy a property?

Ionic vs React Native: Which Framework you should Choose?

Convert XML to HTML with Workato

Code Splitting with React and React Router

Frontend Weekly Digest #45 (5–11 February 2018)

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Gurusabarish

Gurusabarish

Hey there!, I’m Gurusabarish. I build things for the web. A passionate web app developer. I tend to make use of modern web technologies to build websites.

More from Medium

Finding the best web hosting service 2022

Creating a Custom Block Using the Genesis Custom Blocks Plugin

Sephora Website Cloning

Configure Tailwind CSS for Vanilla JS with JIT in 10 Easy Steps