Sedikit intermezzo, di blog postingan sebelumnya, kita sudah melihat-lihat apa saja konfigurasi terpenting di Hugo yang dapat dipersonalisasi sesuai kebutuhannya.

Langkah selanjutnya dalam mengembangkan blog, tentu saja adalah konten dari blog ya. Tanpa konten yang baik, tentu blognya tidak berarti dong. Alur pembuatan konten di Hugo platform juga perlu diperhatikan agar pengalaman menulisnya juga lebih maksimal dan terhindar dari error yang tidak berarti.

Untuk itu di post kali ini, kita akan melihat bagaimana cara membuat blog post di Hugo, tidak hanya kontennya saja, tetapi juga cara mengeset berbagai metada dari postingan itu sendiri, seperti kapan post itu dipublikasikan, judul, dan image dari postingan.

Membuat Postingan dan Halaman Baru

Pada dasarnya, ada 2 kategori konten di Hugo: Post(postingan) dan Page(halaman) seperti yang sudah dijelaskan di bagian Hugo dan Struktur Konten.

• page ini adalah folder tempat menampung semua konten halaman yang independen, ditampilkan hanya dengan mengetahui link konten halaman itu saja, tanpa ditampilkan secara kronologi waktu. Contohnya: Tentang Saya, Hubungi Kami, dan halaman Portofolio.
• post untuk seluruh konten di folder ini, semuanya akan ditampilkan secara kronologi berdasarkan waktu publikasinya. Di sini lah tempat kita membuat postingan blog.

Tidak ada perbedaan dalam cara membuat postingan dan halaman baru.

Untuk membuat postingan baru:

hugo new content/post/<title>.md

Dan untuk membuat halaman baru:

hugo new content/page/<title>.md

Untuk mengetes penambahan postingan baru, coba lakukan ini:

hugo new content/post/this-is-my-first-post.md

Dari command tersebut, akan dibuat file baru. Di dalamnya, akan terdapat konten berikut:

---
title: "Postingan Pertamaku"
author: ""
type: ""
date: 2019-03-06T17:56:22+07:00
subtitle: ""
image: ""
tags: []
---

Coba perhatikan bagian di antara dua --- (contohnya: title hingga tags). Field itu disebut frontmatter. Secara singkat: itu adalah metadata dari postingan/halaman. Lebih lanjut akan saya jelaskan nanti ya.

Untuk menuliskan konten postingan, tulisan tersebut ditulis di paling bawah. Contoh:

---
title: "Postingan Pertamaku"
author: ""
type: ""
date: 2019-03-06T17:56:22+07:00
subtitle: ""
image: ""
tags: []
---

Halo semua,

Ini adalah postingan pertamaku :)

Coba simpan dan panggil hugo serve untuk mengetes secara lokal. Dari sini kamu dapat melihat postinganmu ya 😄

Proses berikutnya: kamu dapat melanjutkan proses penulisan, git commit, dan push ke remote. Gitlab CI akan melakukan deployment secara otomatis ke Gitlab Page😄.

Frontmatter, apa itu?

Di setiap postingan atau halaman, di bagian paling atas ada bagian yang disebut dengan frontmatter. Ini bisa dianggap sebagai metadata postingan/halaman yang dipakai oleh Hugo (dan bergantung dari tema) untuk menunjukkan beberapa informasi ke pembaca, seperti: nama penulis, tanggal publikasi, judul, subtitle, dll. Beberapa tema dari Hugo bahkan meng-extend ini dengan menambahkan metadata baru yang lebih kaya dan dimanfaatkan untuk proses format blog yang lebih bervariasi. Contohnya: tema Beautifulhugo memiliki metadata bigimg yang diisi dengan foto. Informasi bigimg ini diproses untuk menampilkan foto sebagai background dari judul postingan blognya, seperti di bawah ini:

Jika dilihat lebih lanjut, ada suatu fungsi templating pada hugo new command. Command tersebut akan melihat template file metadata yang disimpan di filearchetypes/default.md

themes/beautifulhugo/archetypes
└── default.md

Template standar metadata dari themes/beautifulhugo/archetypes/default.md:

---
title: "{{ replace .Name "-" " " | title }}"
author: ""
type: ""
date: {{ .Date }}
subtitle: ""
image: ""
tags: []
---

Di template file di atas, terdapat sintaks {{ dan }}. Ini secara dasar adalah sintaks template yang dievaluasi oleh hugo command. Kamu dapat melihat lebih jauh mengenai template syntax di sini.

• title: "{{ replace .Name "-" " " | title }}", artinya ini akan dievaluasi dari variabel .Name. Biasanya variabel ini akan diisi dengan nama file postingan blog (tanpa ekstensi file .md) ketika kamu membuat post dengan hugo new content/post/this-is-my-first-post.md
• date: {{ .Date }}, ini akan dievaluasi dengan tanggal post itu dibuat.

What’s Next

Postingan berikutnya, saya akan coba menyampaikan opini dan pengalaman saya setelah mencoba memakai Hugo, Gitlab Page, dan Gitlab CI.