Generate Website Dinamis dari GitHub Menggunakan Netlify CMS dan Hugo

Pembahasan tentang struktur dasar framework Hugo dan memasangkannya dengan Netlify CMS untuk membuat sebuah website dinamis sederhana.
Pembahasan tentang struktur dasar framework Hugo dan memasangkannya dengan Netlify CMS untuk membuat sebuah website dinamis sederhana.

Melanjutkan serial artikel sebelumnya tentang menggunakan Netlify dan GitHub untuk membuat Website Statis, artikel kali ini membahas tentang menggenerate website statis berdasarkan framework Hugo sebagai website builder dan Netlify CMS sebagai Content Management-nya.

Tentang NetlifyCMS dan Hugo

NetlifyCMS

NetlifyCMS merupakan Content Management System (seperti Joomla, Wordpress, Drupal, dll) sumber terbuka untuk Git Workflow yang memungkinkan Pengguna mengedit langsung konten websitenya melalui editor yang terkoneksi langsung ke Git, sehingga setiap perubahan yang dilakukan melalui editor tersebut dapat dilacak dari Git.
Berikut dilampirkan contoh tampilan antarmuka NetlifyCMS.

Hugo

Hugo merupakan framework untuk website secara umum untuk meng-generate website statis. Berbeda dengan kebanyakan sistem yang secara dinamis membangun laman ketika ada permintaan dari pengunjung, Hugo membangun laman tersebut ketika ada pembaruan atau perubahan konten. Karena umumnya website lebih banyak dikunjungi daripada diperbarui, Hugo didesain untuk memberikan pengalaman membaca yang optimal bagi pengunjung dan pengalaman menulis yang ideal bagi penulis konten di website tersebut.

Untuk memudahkan praktek berdasarkan artikel ini, berikut persiapan untuk membantu memahami langkah-langkah pengoperasian GitHub Desktop untuk proses Commit dan struktur dasar website.

Framework Hugo

Menginstall Hugo

Hugo dapat diinstall dengan bantuan Paket Manager Chocolatey untuk Windows dan HomeBrew untuk macOS.
Install Hugo dengan Choco pada Windows
  1. Buka PowerShell sebagai administrator.
  2. Jalankan perintah Get-ExecutionPolicy, jika hasilnya Restricted ketikkan perintah Set-ExecutionPolicy AllSigned.
  3. Lalu jalankan perintah di bawah ini untuk mulai menginstall Choco: 
    Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))
  4. Untuk mengecek dan mulai menjalankan chocolatey bisa engan mengetikkan perintah berikut: 
    choco
    Jika muncul hasil seperti di bawah ini makah choco berhasil diinstall. 
    Chocolatey v0.10.15
  5. Untuk mulai mengintall Hugo bisa dengan mengetikkan perintah ini di jendela PowerShell 
    choco install hugo -confirm
    Ketikkan perintah berikut untuk mengecek apakah Hugo sudah terinstall dengan lancar 
    hugo
    Jika muncul tulisan seperti ini maka Hugo telah sukses terinstall 
    Total in 11 ms
  Error: Unable to locate config file or config directory. Perhaps you need to create a new site.
         Run `hugo help new` for details.
Install Hugo dengan HomeBrew pada macOS
  1. Pastikan sudah menginstall HomeBrew
  2. Buka Terminal
  3. Ketik Perintah brew install hugo
  4. Untuk mengecek apakah Hugo sudah terinstall atau belum, ketikkan perintah hugo

Membuat Situs Baru dengan Hugo

Bagian ini menjelaskan tentang tahapan membuat situs Hugo baru menggunakan PowerShell.
  1. Buka File Explorer, arahkan ke lokasi tempat Situs Hugo akan diletakkan. Contoh D:\Documents\HugoSites\
  2. Pada folder kosong tersebut, tekan tombol Shift pada keyboard diikuti dengan Klik Kanan pada mouse. Lalu pilih pilihan Open PowerShell windows here.
  3. Pada jendela PowerShell tersebut, ketikkan perintah 
    hugo new site nama-project
    Ganti nama-project dengan nama situs yang akan dibuat.
    Ketikkan perintah berikut untuk berpindah ke dalam folder yang baru dibuat. 
    cd nama-project
    Ketikkan perintah berikut untuk mulai membangun situs tersebut agar dapat diakses melalui alamat localhost:1313 pada browser. 
    hugo server
  4. Jangan panik saat membuka alamat tersebut karena memang isinya masih kosong dan dalam situs tersebut belum ada templatenya.

Struktur Dasar Situs Hugo

  1. Buka folder nama-project tersebut di Text Editor seperti VS Code atau Sublime untuk mulai membangun situs Hugo.
  2. Di dalam situs baru tersebut terdapat susunan File dan Folder kurang lebih seperti di bawah ini. 
    .
├── archetypes
│   └── default.md
├── assets
│   ├── css
│   │   └── style.css
├── content
├── data
├── layouts
│   ├── _default
│   │   ├── baseof.html
│   │   └── list.html
│   ├── partials
│   │   ├── head.html
│   │   ├── header.html
│   │   └── footer.html
│   └── 404.html
├── static
├── themes
└── config.toml
    Keterangan:
    • archetypes: Berisi format default konten yang ada pada folder content
    • assets: Berisi kumpulan aset website seperti JavaScript dan CSS
    • content: Berisi seluruh konten yang telah dibuat
    • data: Berisi database untuk membangun konten khusus
    • layouts:
      Berisi kumpulan kode .html yang berfungsi sebagai struktur template dasar.
    • _default:
      baseof.html: Kode HTML di semua laman
      list.html: Kode HTML di laman homepage
    • partials:
      Berisi sebagian kode yang dapat di panggil melalui laman lain.
      head.html: Cuplikan kode di dalam tag <head>
      header.html: Cuplikan kode di dalam tag <header>
      footer.html: Cuplikan kode di dalam tag <footer>
    • blog: Berisi contoh template untuk kategori blog
    • static: Berisi kumpulan file yang dipanggil ke website dan ditampilkan tanpa adanya perubahan
    • themes: Berisi kumpulan folder dari tema yang telah dibuat oleh orang lain
    • config.toml:
      Berisi konfigurasi dasar tentang situs: 
      baseURL = "http://example.org/"
languageCode = "en-us"
title = "New Hugo Site"
      baseURL: Alamat tempat website tersebut diakses, bisa disesuaikan setelah dikoneksikan ke Netlify
      languageCode: Bahasa yang digunakan di dalam website
      title: Judul website.
  3. Buat template homepage dengan cara buat file baru bernama baseof.html di dalam folder /layouts/_default/.
    Isikan dengan kode berikut: 
    <!DOCTYPE html>
<html lang="en">
{{- partial "head.html" . -}}
<body>
  {{- partial "header.html" . -}}
  <main>  
    {{ block "main" . }}
    {{ end }}
  </main>
  {{- partial "footer.html" . -}}
</body>
</html>
    Selanjutnya buat template untuk tag main untuk memanggil isi konten dan menampilkannya di tengah laman homepage menggunakan kode di bawah ini: 
    {{ define "main" }}
  <article>
    <h3>Homepage Title</h3>
    <p>Paragraph One</p>
    <p>Paragraph two</p>
  </article>
{{ end }}
  4. Buat template untuk cuplikan kode sesuai dengan nama yang di atas (head.html, header.html, dan footer.html) di dalam folder /layouts/partials/.
    head.html 
    <title>{{ .Site.Title }}</title>
    header.html 
    <h1>This is Title Header</h1>
<h2>This is Site Description</h2>
    footer.html 
    <p>© 2020 {{ .Site.Title }}</p>
  5. Dan demikianlah cara membuat laman lading page sederhana menggunakan Hugo.

Mengintegrasikan Framework Hugo dengan GitHub dan NetlifyCMS

Setelah mengetahui struktur dasar dari framework Hugo dengan membuat landing page sederhana, kali ini kita akan mengubah landing page tersebut menjadi sebuah website yang memiliki banyak laman, sebagai contoh kita akan membuat website bertama blog.
  1. Buat file index.html pada folder /static/admin/ dan isikan kode berikut: 
    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Content Manager</title>
    <!-- Include the script that enables Netlify Identity on this page. -->
    <script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
  </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>
  2. Lalu buat konfigurasi tentang konten yang akan ditulis, dalam hal ini tentang Blog.
    Buat file bernama config.yml pada folder /static/admin/ dan isikan kode berikut: 
    backend:
  name: git-gateway
  branch: master
media_folder: static/img
public_folder: /img
collections:
  - name: 'blog'
    label: 'Blog'
    folder: 'content/blog'
    create: true
    slug: '{{year}}-{{month}}-{{day}}-{{slug}}'
    editor:
      preview: false
    fields:
      - { label: 'Title', name: 'title', widget: 'string' }
      - { label: 'Publish Date', name: 'date', widget: 'datetime' }
      - { label: 'Description', name: 'description', widget: 'string' }
      - { label: 'Body', name: 'body', widget: 'markdown' }
  3. Langkah selanjutnya adalah meng-upload situs di atas ke GitHub, tapi sebelumnya tambahkan file bernama .keep pada folder content dan folder data. Pada jendela PowerShell di folder situs tersebut, ketikkan perintah di bawah ini untuk menginisiasi bahwa folder ini merupakan sebuah folder berbasis Git: 
    git init
    Lalu publish situs tersebut melalui GitHub Desktop dengan pilihan Add existing repository... lalu arahkan ke nama folder tempat situs di atas, atau bisa juga melalui PowerShell dengan mengetikkan perintah di bawah ini: 
    git add .
    git commit -m "Initial Commit"
    git remote add origin https://github.com/USERNAME_GITHUB/NAMA_REPO_YANG_DIINGINKAN.git
    Sesuaikan USERNAME_GITHUB dan NAMA_REPO_YANG_DIINGINKAN. 
    git push -u origin master
  4. Buka tautan Buat Situs Baru dari Git, pilih repo yang akan dipublish, pada pengaturan Basic build setting sesuaikan kolom "Build command" menjadi hugo dan "Publish directory" ke public. Lalu klik Deploy site.
  5. Pada dashboard Netlify, masuk ke Setting > Identity, pilih Enable Identity Service, lalu atur Registration Preference menjadi "Invite Only". Jika ingin menggunakan akun GitHub, pilih External Provider dan pilih GitHub.
  6. Untuk mulai mengakses panel Admin, ketikkan alamat localhost:1313/admin/ pada browser. Admin akan diminta memasukkan alamat situs Netlify baru kemudian bisa masuk menggunakan akun yang telah dibuat atau menggunakan "External Provider" yang telah diatur sebelumnya. Silakan coba membuat blog post baru di CMS tersebut dan publikasikan. Setelah terpublikasi, blog post tersebut akan muncul di folder project pada content/blog/<slugified-blog-post-title>.md. Jangan lupa untuk mempublikasikannya ke GitHub.
  7. Langkah selanjutnya adalah menampilkan daftar blog post yang telah dipublikasi tersebut ke homepage, dengan cara edit file list.html pada folder /layouts/_default/ dan ganti semua isinya dengan kode berikut ini: 
    
{{ define "main" }}
<article>
  <h1>Daftar Postingan Blog</h1>
  <ul>
    {{ range (where .Pages "Section" "blog") }}
    <li>
      <a href="{{ .RelPermalink }}">
        {{ .Title }}
      </a>
    </li>
    {{ end }}
  </ul>
</article>
{{ end }}
  8. Lalu buat template untuk menampilkan blog post secara satuan dengan cara buat file baru bernama single.html pada folder /layouts/blog/ dan isikan dengan kode berikut: 
    {{ define "main" }}
<h1>{{ .Title }}</h1>
<p class="date">{{ .Date }}</p>
<p class="description">{{ .Params.description }}</p>
<article class="content">
  {{ .Content }}
</article>
{{ end }}
  9. Save dan Publish ke GitHub.

Dan demikianlah cara tentang menggenerate website dinamis dari GitHub menggunakan NetlifyCMS dan Framework Hugo, Semoga bermanfaat. Bila ada pertanyaan silakan komentar di bawah.
Referensi:
[1] https://gohugo.io/documentation/
[2] https://www.netlifycms.org/docs/hugo/

3 komentar

  1. Bikin video tutorialnya min :), step by step ya :)
  2. Bikin video tutorialnya juga min, step by step ya biar paham
    1. Siap gan, nanti saya buatkan,
      tp belum tau kapan pastinya.