Melanjutkan bagian sebelumnya tentang Hermit. Bahasan kali ini tentang bagaimana cara saya menampilkan postingan dengan Hugo, khususnya menggunakan theme Hermit. Sebenarnya Hermit sudah menyediakan sample post yang bisa kita ikuti format penulisannya terutama pada bagian front matter, yaitu bagian atribut tulisan meliputi: judul, tanggal, opsi toc, opsi draft, opsi gambar, kategori dan tag postingan —ditulis pada awal file post.
Setelah kita menginstal Hugo dan theme, pada folder content masih kosong. Bila kita ingin menampilkan sample post pada Hermit (hanya untuk melihat/testing halaman), copas (copy-paste) isi dalam folder content yang berlokasi di themes/hermit/exampleSites/content, meliputi folder posts dan file about-hugo.md ke dalam folder content dalam root Hugo.
Jalankan server: hugo server
Output yang ditampilkan:
Building sites …
| EN
+------------------+----+
Pages | 33
Paginator pages | 0
Non-page files | 0
Static files | 10
Processed images | 0
Aliases | 0
Sitemaps | 1
Cleaned | 0
Total in 243 ms
Watching for changes in D:\fatoni\{content,data,layouts,static,themes}
Watching for config changes in D:\fatoni\config.toml
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop
Buka browser, ketik localhost:1313
Klik Posts, tampil:
Kita sudah berhasil menampilkan postingan di Hugo dengan post sample dari Hermit. Lalu bagaimana kita ingin membuat postingan kita sendiri?
Tekan ctrl+c untuk menghentikan server Hugo sebelumnya yang tadi kita jalankan. Kemudian ketik dalam command prompt, yaitu perintah untuk meng-generete file post Hugo yang akan otomatis masuk ke dalam folder content/posts.
hugo new posts/post-pertama-ku.md
Mengapa file-nya ber-extension .md? karena kita menuliskannya dalam bentuk Markdown, bukan HTML.
Hasil dari perintah di atas akan menghasilkan satu file di dalam content/posts bernama post-pertama-ku.md. Jika dibuka, isinya:
---
title: Post Pertama Ku
date: 2019-07-18T11:14:39+07:00
draft: true
toc: false
images:
tags:
- untagged
---
Isi file di atas, yang ada di antara tanda — dan — disebut front matter. Secara default, perintah Hugo new ... menghasilkan front matter yang dibuka dan ditutup dengan style YAML, yaitu tanda — (triple hypen-minus).
Namun, kamu juga bisa menuliskan dengan style TOML, yaitu triple plus.
+++
title = "Post Pertama Ku"
date = "2019-07-18T11:14:39+07:00"
draft = true
toc = false
images =
tags = ["untagged"]
+++
Dan style JSON, yaitu brackets:
{
"title": "Post Pertama Ku",
"date": "2019-07-18T11:14:39+07:00",
"draft": true,
"toc": false,
"images": "",
"tags": ["untagged"]
}
Kalau kita lihat —cara pertama atau dengan YAML— jauh lebih simple tanpa harus menggunakan tanda petik dua atau double quotes " untuk isian string, dan untuk tags ditulis vertikal ke bawah dengan tanda -.
Informasi apa saja yang bisa kita masukkan ke front matter Hugo dengan theme Hermit?
---
title:
date:
draft:
toc:
images:
tags:
author:
---
Contoh:
title: Hello World
# atau
title: "Hello World"
Format penulisan tanggal post (date), kamu bisa pilih salah satu:
# cara 1
date: 2019-07-18T11:14:39+07:00
# cara 2
date: 2019-07-18
# cara 3
date: 2019-07-18 11:14:39
# cara 4
date: 2019-07-18 11:14:39 +07:00
Isian draft: true atau false, dengan default-nya false sehingga kamu tidak perlu menambahkan draft pada front matter.
draft: true
# Postingan tidak akan tampil di halaman
draft: false
# Postingan akan tampil
Berikutnya adalah toc atau semacam daftar isi. Jika fitur ini diaktifkan, toc akan tampil di footer bagian kanan berupa list bar yang harus kamu klik untuk menampilkannya. toc akan sangat berguna jika kamu menulis postingan tentang tutorial atau dokumentasi yang panjang dengan beberapa bagian subjudul di dalamnya.
Sama seperti draft, isi dengan true atau false. Jika false, kamu bisa menuliskannya bisa juga tidak.
toc: true
# or
toc: false
images ditambahkan ke dalam front matter jika kamu ingin menampilkan gambar utama (bukan gambar sebagai bagian dari content post). Gambar akan tampil sebagai background halaman postingan kamu
Cara penulisannya yaitu dengan tanda - lalu masukkan url gambar:
images:
- https://picsum.photos/1024/768/?random
Jika ingin menampilkan gambar yang disimpan di media local, masukkan file gambar ke folder static. Pemanggilannya cukup dengan menuliskan nama file gambarnya.
images:
- nama_gambar_mu.jpg
tags, ditulis secara vertikal seperti menulis daftar dengan tanda -, mirip dengan penulisan images.
tags:
- kesehatan
- pendidikan
- kebudayaan
Demikian pembahasan kali ini tentang bagaimana cara saya menampilkan postingan di Hugo dengan theme Hermit. Bahasan ini memang tidak membahas tentang cara menulis konten, tapi tentang front matter.
Selanjutnya, kita akan membahas —masih ada hubungan dengan cara menulis postingan di Hugo— bagaimana menulis konten dengan Markdown.
18 July 2019