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.