Bugcreator

Gatsby dengan Netlify CMS

2021/05/17

Saat ini saya menggunakan Gatsby untuk blog, dan flow yang saya lakukan untuk mem-pulish sebuah article adalah:

  1. Clone blog repository
  2. Menulis article
  3. Push article yang dibuat ke remote repository
  4. 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

netlify cms login page

Dan setelah kita sign in akan muncul halaman seperti ini

netlify cms article list

Oke, sekarang kita dapat membuat article tanpa clone repository! 🎉


@andrkrn

Stories by @andrkrn
building some application or life events