Memasang Netlify CMS ke Blog Hugo

Apaan sih Netlify CMS?

Nge-blog menggunakan SSG (static site generator) kadang terasa merepotkan. Misalnya ketika sekedar memperbaiki saltik atau salah ketik pada postingan kita harus melalui serangkaian proses commit ke repositori Git. Nah dengan bantuan Netlify CMS kerepotan ini bisa kita kurangi. Netlify CMS memungkinkan kita untuk mengatur konten dan data di repositori web statis kita langsung dari browser. Setelah Netlify CMS terpasang, nanti kita akan memiliki sebuah halaman /admin buat menulis, mengedit serta mempublikasikan postingan.

Memasang Netlify CMS

Petunjuk lengkap dari Netlify bisa kamu lihat di tautan ini. Tapi di tulisan ini saya akan mencoba membuatnya lebih ringkas.

Langkah 1 : menambahkan halaman admin.

Buat folder baru bernama “admin” di folder /static kemudian buat file baru bernama index.html di dalam folder admin. Berikut adalah isi dari file 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>
</head>
<body>
    <script src="https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js"></script>
</body>
</html>

Masih di dalam folder admin, sekarang buat file konfigurasi config.yml. File konfigurasi ini mungkin berbeda tergantung site kamu, berikut yang saya gunakan :

backend:
  name: git-gateway
  branch: master

publish_mode: editorial_workflow

media_folder: static/images
public_folder: /images

collections:
  - name: 'posts' # Used in routes, ie.: /admin/collections/:slug/edit
    label: 'Posts' # Used in the UI
    label_singular: 'Post' # Used in the UI, ie: "New Post"
    description: >
      The description is a great place for tone setting, high level information, and editing
      guidelines that are specific to a collection.
    folder: "content/posts" # The path to the folder where the documents are stored
    slug: '{{year}}-{{month}}-{{day}}-{{slug}}'
    summary: '{{title}} -- {{year}}/{{month}}/{{day}}'
    create: true # Allow users to create new documents in this collection
    view_filters:
      - label: Posts With Index
        field: title
        pattern: 'This is post #'
      - label: Posts Without Index
        field: title
        pattern: front matter post
      - label: Drafts
        field: draft
        pattern: true
    fields: # The fields for each document, usually in front matter
      - { label: 'Title', name: 'title', widget: 'string', tagname: 'h1' }
      - { label: 'Draft', name: 'draft', widget: 'boolean', default: false }
      - { label: 'Comments', name: 'comments', widget: 'boolean', default: true }
      - {label: "Publish Date", name: "date", widget: "datetime"}
      - label: 'Cover Image'
        name: 'image'
        widget: 'image'
        required: false
        tagname: ''
      
      - label: "Tags"
        name: "tags"
        required: false
        widget: "list"

      - { label: 'Body', name: 'body', widget: 'markdown', hint: 'Main content goes here.' }
      
  - name: "page" # Used in routes, e.g., /admin/collections/blog
    label: "Halaman" # Used in the UI
    folder: "content/page" # The path to the folder where the documents are stored
    create: true # Allow users to create new documents in this collection
    slug: "{{slug}}" # Filename template, e.g., YYYY-MM-DD-title.md
    fields: # The fields for each document, usually in front matter
      - {label: "Title", name: "title", widget: "string"}
      - {label: "Publish Date", name: "date", widget: "datetime"}
      - {label: "Body", name: "body", widget: "markdown"}

Langkah 2 : menambahkan Netlify Identity Widget.

Buat menambahkan widget ini kita cukup memasukkan ke <head> pada homepage baris kode berikut :

<script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>

Di layout situs saya yaitu di /layouts/partials/head/head.html

Langkah 3 : mengaktifkan Netlify Identity and Git Gateway.

Kita akan menggunakan Netlify’s Identity dan Git Gateway untuk membuat user admin. Berikut adalah langkah untuk mengaktifkan kedua layanan ini :

  • Dari dashboard site Netlify masuk ke menu Settings > Identity, kemudian pilih Enable Identity service. Kita juga dapat menggunakan provider luar untuk kemudahan pembuatan user. Karena jika tidak maka user yang akan ditambahkan nanti harus memiliki akun Netlify.
  • Kemudian aktifkan Git Gateway lewat menu Services > Git Gateway, lalu klik Enable Git Gateway.

Langkah 4 : mengirim Netlify CMS Invitation.

Selesai menyiapkan halaman admin dan layanannya, sekarang kita tambahkan user admin melalui undangan.

  • Kembali ke dashboard site Netlify masuk ke menu Identity, kemudian klik tombol Invite users.
  • Masukkan alamat email dan kirim undangan.

Selesai deh, selanjutnya tinggal cek email dan ikuti instruksi buat setup user admin.

Assalamualaikum.

Referensi

https://www.netlifycms.org/docs/add-to-your-site/

comments powered by Disqus