Gatsby dengan Netlify CMS
Saat ini saya menggunakan Gatsby untuk blog, dan flow yang saya lakukan untuk mem-pulish sebuah article adalah:
- Clone blog repository
- Menulis article
- Push article yang dibuat ke remote repository
- Otomatis menjalankan github action untuk mempublish blog
Saya cukup puas dengan flow sekarang karena semua berada pada git repository, jika kita ingin rollback ke perubahan sebelumnya kita dapat dengan mudah melakukang git revert
dan semua changes terkontrol
Tetapi saya berfikir, kenapa harus clone repository dulu untuk menulis article?
Netlify CMS
Karena itu saya berfikir untuk mengintegrasikan Gatsby dengan Netlify CMS sebagai admin panelnya
Saya memilih Netlify CMS karena bisa integrasi juga dengan Github, Netlify CMS akan membuat sebuah Pull Request di github jika membuat draft article dan merge Pull Request tersebut bila melalukan publish
Langkah yang dilakukan
Menambahakan netlify plugins pada gatsby
yarn add gatsby-plugin-netlify-cms netlify-cms-app
Setelah itu, tambahkan plugin pada gatsby-config.js
plugins: [`gatsby-plugin-netlify-cms`]
Lalu buatlah folder admin
di static folder dan buatlah file index.html
dan config.yml
static
├── admin
│ ├── config.yml
│ └── index.html
isilah index.html
dengan
<!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>
<!-- 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>
dan isi config.yml
dengan konfigurasi blog anda
backend:
name: github
repo: andrkrn/blog
branch: master
media_folder: static/img
public_folder: /img
site_url: https://blog.andrikurnia.com
publish_mode: editorial_workflow
collections:
- name: "blog"
label: "Blog"
folder: "content/blog"
create: true
slug: "{{fields.slug}}"
path: "{{date}}-{{slug}}/index"
summary: "{{date | date('YYYY-MM-DD')}}-{{slug}}"
media_folder: ''
public_folder: ''
fields:
- {label: "Title", name: "title", widget: "string"}
- {label: "Publish Date", name: "date", widget: "datetime", format: "YYYY-MM-DD"}
- {label: "Slug", name: "slug", widget: "string"}
- {label: "Description", name: "description", widget: "string"}
- {label: "Body", name: "body", widget: "markdown"}
Dan sekarang kita dapat menjalankan yarn start
/ gatsby develop
untuk melihat hasil dari perubahan kita
Bukalah localhost:8000/admin
, seharusnya kita akan melihat halaman seperti gambar ini
Dan setelah kita sign in akan muncul halaman seperti ini
Oke, sekarang kita dapat membuat article tanpa clone repository! :tada: