Cara Integrasi Netlify CMS dengan Hugo untuk Headless CMS

· Februari 3, 2026 · 9 menit baca

Netlify CMS (sekarang Decap CMS) adalah open-source headless CMS yang menggunakan Git sebagai backend. Integrasi dengan Hugo memberikan workflow content management yang modern dan efisien.

Apa itu Netlify CMS?

Fitur Utama

Git-based: Semua content tersimpan di Git repository
Editorial Workflow: Draft, review, publish workflow
Media Library: Upload dan manage images
Real-time Preview: Preview content sebelum publish
Open Source: Gratis dan self-hostable

Arsitektur

Browser (Netlify CMS Admin)
    ↓
Git Gateway (Authentication)
    ↓
Git Repository (GitHub/GitLab/Bitbucket)
    ↓
Hugo Build → Static Site
    ↓
CDN (Netlify/Cloudflare/Vercel)

Setup Netlify CMS dengan Hugo

Step 1: Struktur Project

my-hugo-site/
├── content/
├── static/
│   └── admin/              # Netlify CMS admin files
│       ├── index.html      # Admin interface
│       └── config.yml      # CMS configuration
├── layouts/
└── hugo.toml

Step 2: Buat Admin Interface

File static/admin/index.html:

<!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="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
</head>
<body>
  <script src="https://unpkg.com/decap-cms@^3.0.0/dist/decap-cms.js"></script>
  <script>
    if (window.netlifyIdentity) {
      window.netlifyIdentity.on("init", user => {
        if (!user) {
          window.netlifyIdentity.on("login", () => {
            document.location.href = "/admin/";
          });
        }
      });
    }
  </script>
</body>
</html>

Step 3: Konfigurasi CMS (config.yml)

File static/admin/config.yml:

backend:
  name: git-gateway
  branch: main
  repo: username/repository-name
Media folder
media_folder: "static/images/uploads"
public_folder: "/images/uploads"
Collections
collections:
Blog Posts

name: "posts"
label: "Blog Posts"
folder: "content/posts"
create: true
slug: "{{year}}-{{month}}-{{day}}-{{slug}}"
fields:

{ label: "Title", name: "title", widget: "string" }
{ label: "Publish Date", name: "date", widget: "datetime" }
{ label: "Draft", name: "draft", widget: "boolean", default: false }
{ label: "Description", name: "description", widget: "text" }
{ label: "Featured Image", name: "image", widget: "image", required: false }
{ label: "Categories", name: "categories", widget: "list", required: false }
{ label: "Tags", name: "tags", widget: "list", required: false }
{ label: "Body", name: "body", widget: "markdown" }



Pages

name: "pages"
label: "Pages"
folder: "content"
create: true
slug: "{{slug}}"
fields:

{ label: "Title", name: "title", widget: "string" }
{ label: "Publish Date", name: "date", widget: "datetime" }
{ label: "Draft", name: "draft", widget: "boolean", default: false }
{ label: "Body", name: "body", widget: "markdown" }



Editorial Workflow
publish_mode: editorial_workflow
Display URLs
show_preview_links: true

Step 4: Setup Git Gateway

Di Netlify Dashboard:

Buka Site Settings → Identity
Enable Identity → Click “Enable Identity”
Services → Git Gateway → Click “Enable Git Gateway”
Registration → Set ke “Open” (untuk testing) atau “Invite only”

Step 5: Identity Widget Setup

Tambahkan widget ke homepage (layouts/partials/head.html):

<script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
<script>
  if (window.netlifyIdentity) {
    window.netlifyIdentity.on("init", user => {
      if (!user) {
        window.netlifyIdentity.on("login", () => {
          document.location.href = "/admin/";
        });
      }
    });
  }
</script>

Advanced CMS Configuration

Widget Types

collections:
  - name: "posts"
    fields:
      # Basic widgets
      - { label: "Title", name: "title", widget: "string" }
      - { label: "Body", name: "body", widget: "markdown" }
      - { label: "Publish Date", name: "date", widget: "datetime" }
      - { label: "Image", name: "image", widget: "image" }
      - { label: "File", name: "file", widget: "file" }
      - { label: "Draft", name: "draft", widget: "boolean" }
  # Advanced widgets
  - { label: &quot;Rating&quot;, name: &quot;rating&quot;, widget: &quot;number&quot;, value_type: &quot;int&quot;, min: 1, max: 5 }
  - { label: &quot;Layout&quot;, name: &quot;layout&quot;, widget: &quot;select&quot;, options: [&quot;default&quot;, &quot;full-width&quot;, &quot;sidebar&quot;] }
  - { label: &quot;Color&quot;, name: &quot;color&quot;, widget: &quot;color&quot; }
  - { label: &quot;Content&quot;, name: &quot;content&quot;, widget: &quot;text&quot; }
  - { label: &quot;Code&quot;, name: &quot;code&quot;, widget: &quot;code&quot; }

  # Lists
  - { label: &quot;Categories&quot;, name: &quot;categories&quot;, widget: &quot;list&quot; }
  - { label: &quot;Tags&quot;, name: &quot;tags&quot;, widget: &quot;list&quot;, allow_add: true }

  # Object
  - label: &quot;Author&quot;
    name: &quot;author&quot;
    widget: &quot;object&quot;
    fields:
      - { label: &quot;Name&quot;, name: &quot;name&quot;, widget: &quot;string&quot; }
      - { label: &quot;Email&quot;, name: &quot;email&quot;, widget: &quot;string&quot; }
      - { label: &quot;Bio&quot;, name: &quot;bio&quot;, widget: &quot;text&quot; }
 
 Folder Collections
 collections:
  # Single folder untuk posts
  - name: "posts"
    label: "Blog Posts"
    folder: "content/posts"
    create: true
Nested folders (misal: docs dengan struktur folder)

name: "docs"
label: "Documentation"
folder: "content/docs"
create: true
nested:
depth: 3  # Maksimum depth
summary: '{{title}}'
fields:

{ label: "Title", name: "title", widget: "string" }
{ label: "Body", name: "body", widget: "markdown" }



 
 File Collections
 collections:
  # Untuk single files seperti settings
  - name: "settings"
    label: "Site Settings"
    files:
      - label: "General Settings"
        name: "general"
        file: "config/_default/params.yaml"
        fields:
          - { label: "Site Title", name: "title", widget: "string" }
          - { label: "Description", name: "description", widget: "text" }
          - { label: "Author", name: "author", widget: "string" }
  - label: &quot;Social Links&quot;
    name: &quot;social&quot;
    file: &quot;config/_default/social.yaml&quot;
    fields:
      - label: &quot;Social Links&quot;
        name: &quot;links&quot;
        widget: &quot;list&quot;
        fields:
          - { label: &quot;Platform&quot;, name: &quot;platform&quot;, widget: &quot;string&quot; }
          - { label: &quot;URL&quot;, name: &quot;url&quot;, widget: &quot;string&quot; }
 
 Editorial Workflow
 Draft → Review → Publish
 # config.yml
publish_mode: editorial_workflow
 Workflow:
  Draft: Author membuat content baru
 In Review: Editor review content
 Ready: Approved dan siap publish
 
 Hugo akan build:
 – Draft: Hanya preview URL
 – Published: Live di production site
 Preview Links
 show_preview_links: true
 Setiap draft akan mendapat preview URL unique untuk review.
 Custom Previews
 Register Preview Template
 <!-- static/admin/index.html -->
<script>
  CMS.registerPreviewStyle("/admin/preview.css");
CMS.registerPreviewTemplate("posts", createClass({
render: function() {
const entry = this.props.entry;
return h('div', {},
h('h1', {}, entry.getIn(['data', 'title'])),
h('img', {src: entry.getIn(['data', 'image'])}),
h('div', {"className": "content"}, this.props.widgetFor('body'))
);
}
}));
</script>
 
 Preview Styles
 File static/admin/preview.css:
 /* Preview styles untuk match Hugo theme */
body {
  font-family: -apple-system, system-ui, sans-serif;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}
img {
max-width: 100%;
height: auto;
}
 
 Media Library
 Cloudinary Integration
 # config.yml
media_library:
  name: cloudinary
  config:
    cloud_name: your-cloud-name
    api_key: your-api-key
    default_transformations:
      - fetch_format: auto
        quality: auto
        width: 800
        crop: scale
 Uploadcare Integration
 media_library:
  name: uploadcare
  config:
    publicKey: your-public-key
 Custom Media Library
 media_library:
  name: custom
  config:
    media_folder: "static/images"
    public_folder: "/images"
 Authentication Options
 1. Netlify Identity (Default)
 backend:
  name: git-gateway
 2. GitHub Backend
 backend:
  name: github
  repo: owner/repo
  branch: main
  base_url: https://api.netlify.com
  auth_endpoint: auth
 3. GitLab Backend
 backend:
  name: gitlab
  repo: owner/repo
  branch: main
  auth_type: pkce
 Deployment Integration
 Netlify
  Connect repository ke Netlify
 Enable Identity dan Git Gateway
 CMS otomatis ter-deploy dengan Hugo site
 
 GitHub Pages + Actions
 # .github/workflows/cms.yml
name: Deploy Hugo with CMS
on:
  push:
    branches: [main]
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: peaceiris/actions-hugo@v2
      - run: hugo --minify
      - uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./public
 Customization
 Custom Widgets
 // Custom color widget
CMS.registerWidget(
  'color',           // Widget name
  ColorControl,      // React component
  ColorPreview       // Preview component
);
 Custom Icons
 # config.yml
collections:
  - name: "posts"
    label: "Posts"
    icon: "news"  # Material icon name
 Custom Slug Format
 slug:
  encoding: "unicode"
  clean_accents: false
  sanitize_replacement: "-"
 Troubleshooting
 Issue: “Git Gateway Error”
 Solusi:
 1. Check Identity ter-enable
 2. Git Gateway sudah diaktifkan
 3. Repository permissions benar
 Issue: “Failed to Persist”
 Solusi:
 backend:
  name: git-gateway
  squash_merges: true  # Untuk menghindari conflict
 Issue: “CORS Error”
 Solusi:
 Tambahkan di Netlify _headers:
 /admin/*
  Access-Control-Allow-Origin: *
 Issue: “Images Not Showing”
 Solusi:
 Check media_folder dan public_folder paths:
 media_folder: "static/images/uploads"  # Local path
public_folder: "/images/uploads"         # URL path
 Best Practices
 1. Content Structure
 collections:
  - name: "posts"
    label: "Posts"
    folder: "content/posts"
    path: "{{slug}}/index"  # Page bundle structure
    media_folder: ""
    public_folder: ""
    fields:
      - { label: "Title", name: "title", widget: "string" }
      - { label: "Body", name: "body", widget: "markdown" }
 2. Validation
 fields:
  - { 
      label: "Title",
      name: "title",
      widget: "string",
      pattern: ['.{10,100}', "Must have 10-100 characters"]
    }
  - { 
      label: "Email",
      name: "email",
      widget: "string",
      pattern: ['^\S+@\S+\.\S+$', "Must be a valid email"]
    }
 3. Default Values
 fields:
  - { 
      label: "Draft",
      name: "draft",
      widget: "boolean",
      default: true  # Default ke draft
    }
  - { 
      label: "Date",
      name: "date",
      widget: "datetime",
      default: ""
    }
 Kesimpulan
 Netlify CMS dengan Hugo memberikan:
 ✅ Git-based: Version control untuk content
 ✅ Editorial Workflow: Draft, review, publish
 ✅ User-friendly: Non-technical authors bisa contribute
 ✅ Real-time Preview: Preview sebelum publish
 ✅ Media Management: Upload dan organize images
 ✅ Customizable: Widgets dan fields bisa dikustomisasi
 Ideal untuk:
 – Teams dengan content writers non-technical
 – Editorial workflow dengan approval process
 – Client sites yang perlu CMS sederhana

Ditulis oleh

Hendra Wijaya

Hanya hamba Allah Ta'ala yang berusaha berbuat baik..

Artikel Sebelumnya Info GTK Data Mengajar di Sekolah Tambahan Artikel Selanjutnya Cara Mengatasi Error Too Many Connections di MySQL Server: Solusi Lengkap

Cara Integrasi Netlify CMS dengan Hugo untuk Headless CMS

Apa itu Netlify CMS?

Fitur Utama

Arsitektur

Setup Netlify CMS dengan Hugo

Step 1: Struktur Project

Step 2: Buat Admin Interface

Step 3: Konfigurasi CMS (config.yml)

Media folder

Collections

Blog Posts

Pages

Editorial Workflow

Display URLs

Step 4: Setup Git Gateway

Step 5: Identity Widget Setup

Advanced CMS Configuration

Widget Types

Folder Collections

Nested folders (misal: docs dengan struktur folder)

File Collections

Editorial Workflow

Draft → Review → Publish

Preview Links

Custom Previews

Register Preview Template

Preview Styles

Media Library

Cloudinary Integration

Uploadcare Integration

Custom Media Library

Authentication Options

1. Netlify Identity (Default)

2. GitHub Backend

3. GitLab Backend

Deployment Integration

Netlify

GitHub Pages + Actions

Customization

Custom Widgets

Custom Icons

Custom Slug Format

Troubleshooting

Issue: “Git Gateway Error”

Issue: “Failed to Persist”

Issue: “CORS Error”

Issue: “Images Not Showing”

Best Practices

1. Content Structure

2. Validation

3. Default Values

Kesimpulan

Artikel Terkait

Tinggalkan Komentar