Membuat website saat ini sangatlah mudah, banyak sekali alat yang dapat memenuhi kebutuhan kita untuk membuat sebuah website apapun jenisnya. Salah satu alat yang bisa digunakan adalah Hugo, Hugo memformat teks file menjadi halaman website statis, beberapa contoh website yang bisa disajikan secara statis diantaranya yaitu blog, web profile dan website lainnya yang tidak memerlukan banyak perubahan di sisi klien.
Sesuai dengan tema tutorial kali ini kita akan membahas tentang cara membuat blog dengan hugo beserta membuat tema untuk blog yang kita buat. Tutorial ini akan terbagi menjadi beberapa artikel, untuk mengikuti tutorial ini kamu bisa melihat daftar isinya di sebelah kanan sidebar. –>>
Menginstall hugo
Hugo dapat di install di berbagai macam sistem operasi, kamu bisa mengunjungi website gohugo.io untuk mendapatkan binari instalasi hugo. Pada tutorial ini sistem yang digunakan adalah linux ubuntu. Jadi untuk meginstall hugo bisa dilakukan melalui apt manager seperti berikut:
sudo apt install hugo
Setelah instalasi selesai, kita bisa mengecek instalasi hugo dengan menjalankan perintah:
> hugo version
hugo v0.92.2+extended linux/amd64 BuildDate=2022-02-23T16:47:50Z VendorInfo=ubuntu:0.92.2-1
Jika kamu menggunakan sistem operasi ubuntu 22.04 seperti yang dipraktikan di tutorial ini, maka kamu akan mendapatkan
versi extended
dimana versi ini memiliki fitur tambahan dibanding hugo versi biasanya.
Jadi pastikan kamu menginstall versi hugo extended untuk mengikuti semua langkah pada tutorial ini.
Membuat Kerangka Blog
Membuat blog menggunakan hugo sangatlah mudah, karena hugo ditujukan untuk membuat blog. Hal yang perlu kamu lakukan adalah menjalakan perintah
hugo new site
dan diikuti nama blog yang akan kamu buat:
hugo new site kaleeblog
Setelah menjalankan perintah tersebut, maka kerangka untuk blog yang akan kamu buat akan terlihat seperti berikut.
kaleeblog
├── archetypes
│ └── default.md <-- file untuk template markdown
├── config.toml <-- file konfigurasi blog
├── content <-- tempat menyimpan artikel
├── data
├── layouts
├── static <-- tempat menyimpan file statis
└── themes <-- tempat menyimpan template blog
Kerangka yang dibuat hanya memiliki 2 file yaitu file konfigurasi blog dan file template markdown.
Secara default hugo menggunakan format konfigurasi toml
, tapi kamu juga bisa menggunakan format yaml
dengan menambahkan
opsi/flag --format=yaml
ketika membuat kerangka blog.
hugo new site kaleeblog --format=yaml
Untuk tutorial ini kita akan menggunakan format konfigurasi toml untuk konfigurasi blog,
kita bisa mengedit file config.toml
dan sesuaikan dengan konfigurasi blog yang kita inginkan seperti contoh:
baseURL = 'https://kal.my.id/'
languageCode = 'en-id'
title = 'Yaka Lee Blog'
Membuat Postingan blog
Di hugo kita menggunakan file dengan format markdown untuk membuat halaman postingan blog, jadi kita perlu membuat file dan menuliskan
semua isi konten postingan post didalamnya termasuk metadata postingan seperti judul, kategori, tag, tanggal publikasi dan lain-lainya.
Untuk memudahkan membuat postingan blog kita bisa menggunakan perintah hugo new
dan diikuti nama section dan nama artikel yang akan kita buat.
Sebagai contoh kita akan membuat postingan pertama di section blog
yaitu halo-dunia.md
.
> hugo new blog/halo-dunia.md
Content "/home/kal/kaleeblog/content/blog/halo-dunia.md" created
Ketika kita mengunakan perintah hugo new
, hugo akan menggunakan template markdown yang berada di folder archetypes
untuk memudahkan kita
membuat judul, tanggal dan sebagianya. Jadi ketika kita membuka file postingan yang baru saja kita buat maka akan terdapat teks seperti berikut.
---
title: "Halo Dunia"
date: 2022-07-06T20:18:25+07:00
draft: true
---
Konten blog ditulis disini
Hal yang kita perlukan selanjutnya adalah menulis isi postingan setelah baris diatas dan mengubah nilai draft
menjadi false
ketika kita
ingin mempublish artikel blog tersebut.
Selanjutnya
Sampai disini kita sudah bisa membuat postingan pada kerangka blog yang telah kita buat menggunakan hugo, tapi kita belum bisa menampilkan blog sebagai sebuah website dikarenakan kita belum memiliki template untuk blog yang kita buat.
Jadi pada tutorial selanjutnya kita akan membahas tentang membuat template blog untuk blog yang telah kita buat pada praktek ini.