Cara Belajar Membuat Blog dengan Go Hugo Bagian 1
Menulis konten teknis adalah sebuah keterampilan. Seperti halnya keterampilan lain, satu-satunya cara untuk meningkatkannya adalah dengan berlatih. Cara mudah untuk menulis dan membagikan konten teknis adalah dengan membuat blog dan berbagi pengalaman teknologi Anda dengan orang lain di internet.
Banyak orang beranggapan bahwa membuat situs web atau blog sendiri memerlukan keahlian teknis (seperti pengetahuan tentang server basis data, server web, atau sistem manajemen konten seperti WordPress atau Joomla) serta investasi finansial untuk membeli domain atau membayar layanan hosting VPS.
Idealnya, kita sebaiknya memiliki tiga tujuan saat membuat dan mengelola blog sendiri:
- No/Low-Cost : Gratis atau berbiaya rendah
- Productive : Mudah ditulis, disunting, dan dipelihara
- Cloud Native : Memanfaatkan layanan cloud publik untuk hosting, yang memungkinkan skalabilitas tanpa batas.
Untuk mewujudkan ketiga hal di atas, kita dapat menggunakan teknologi berikut guna mencapai tujuan tersebut:
- Markdown - Bahasa markup yang dapat dibaca secara alami, mudah ditulis, dan dapat dikonversi dengan mudah ke HTML.
- Hugo - Generator situs statis yang ditulis dalam bahasa Go yang memungkinkan konten dalam format Markdown dirender menjadi halaman web HTML.
- GitHub Pages - Sebuah layanan GitHub yang menampung konten web (seperti halaman web HTML) yang tersimpan di dalam repositori GitHub.
Dalam postingan ini, kami akan menunjukkan cara membuat blog sendiri secara gratis menggunakan ketiga teknologi tersebut. Pada artikel ini, kami menggunakan sistem FreeBSD 13.2 untuk membangun blog yang dapat dipublikasikan secara daring melalui internet.
Anda juga dapat mempraktikkan materi dalam artikel ini secara langsung menggunakan sistem Linux seperti Ubuntu, CentOS, atau Debian maupun sistem operasi Windows dan macOS.
1. System Specifications
- OS: FreeBSD 14.5-PRERELEASE
- Hostname: ns6
- Domain: datainchi.com
- IPv4: 192.168.17.7
- IPv6: 2001:470:36:61c:4000::2003
- Golang version: go1.26.4
- GoHugo version: hugo v0.166.0+withdeploy freebsd/amd64
- Port Gohugo: 8999
2. Membuat Proyek Baru
Sebagai langkah awal dalam membuat blog menggunakan Hugo, kita perlu menyiapkan nama proyek baru. Proyek ini akan kita gunakan sebagai folder untuk menyimpan seluruh data blog. Ikuti langkah-langkah di bawah ini untuk membuat proyek blog dengan GoHugo.
root@ns1:~ # cd /var
root@ns1:/var # mkdir -p blog
root@ns1:/var # cd blog
root@ns1:/var/blog # hugo new site blogspot
Congratulations! Your new Hugo site is created in /var/blog/blogspot.
Tinggal beberapa langkah lagi dan Anda siap untuk memulai dan memiliki blog sendiri:
1. Download a theme into the same-named folder.
Choose a theme from https://themes.gohugo.io/ or
create your own with the "hugo new theme <THEMENAME>" command.
2. Perhaps you want to add some content. You can add single files
with "hugo new <SECTIONNAME>/<FILENAME>.<FORMAT>".
3. Start the built-in live server via "hugo server".
Visit https://gohugo.io/ for quickstart guide and full documentation.
root@ns1:/var/blog #
Pada skrip di atas, kita membuat proyek bernama "blogspot" yang ditempatkan di dalam folder /var/blog, sementara skrip "hugo new site blogspot" membuat blog menggunakan Gohugo dan folder untuk menyimpan data bagi semua blog kita diberi nama "blogspot".
Dengan skrip tersebut, kita kini memiliki blog sendiri bernama "blogspot" yang siap untuk disunting atau dimodifikasi, misalnya untuk menyusun struktur data, menulis artikel, dan sebagainya.
Sekarang, mari kita lihat isi folder /var/blog/blogspot.
root@ns1:/var/blog # cd blogspot
root@ns1:/var/blog/blogspot # ls
archetypes assets config.toml content data layouts public static themes
Jika kita menggambarkannya, tampilannya akan seperti berikut:
blogspot/
+-- archetypes
| ¦
| +-- default.md
+-- config.toml
+-- content
+-- data
+-- layouts
+-- static
+-- themes
Langkah berikutnya, hapus isi file "/var/blog/blogspot/hugo.toml" dan ganti dengan skrip di bawah ini.
baseURL = 'https://datainchi.com/'
languageCode = 'en-us'
tittle = "Exploring the Operating Sistem of Linux"
Anda dapat menyesuaikan isi file "/var/blog/blogspot/hugo.toml" dengan spesifikasi mesin server yang sedang Anda gunakan.
Hal ini dikarenakan dalam artikel ini, kami menggunakan domain "datainchi.com" pada bagian baseURL sesuai dengan nama domain yang kami gunakan.
3. Membuat Home Page
Pada sub-bab ini, kita akan membahas cara membuat tata letak untuk halaman beranda serta tata letak lainnya untuk halaman-halaman blog kita. Kita akan menempatkan tata letak halaman beranda ini di dalam folder /var/blog/blogspot/layouts/index.html.
Berikut adalah skrip yang harus Anda ketik di dalam berkas "/var/blog/blogspot/layouts/index.html".
root@ns6:/var/blog/blogspot # touch /var/blog/blogspot/layouts/index.html
root@ns6:/var/blog/blogspot # ee /var/blog/blogspot/layouts/index.html
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>{{ .Site.Title }}</title>
</head>
<body>
<h1>{{ .Site.Title}}</h1>
{{ .Content }}
</body>
</html>
Skrip {{ .Content }} menampilkan konten halaman beranda, yang berasal dari blog yang telah kita buat dan diambil dari folder /var/blog/blogspot/content yang kita buat sebelumnya.
Untuk halaman beranda situs, Hugo akan mencari konten di dalam file bernama _index.md di direktori konten.
Nama file khusus inilah yang digunakan Hugo untuk menemukan konten bagi semua halaman indeks, seperti halaman beranda serta daftar konten misalnya tag, kategori, atau kumpulan lainnya yang akan kita buat.
Langkah berikutnya adalah membuat file "/var/blog/blogspot/content/_index.md". Kita dapat memasukkan konten Markdown yang valid ke dalam file ini.
Ketik skrip berikut di dalam file tersebut.
root@ns6:/var/blog/blogspot # touch /var/blog/blogspot/content/_index.md
root@ns6:/var/blog/blogspot # ee /var/blog/blogspot/content/_index.md
Exploring the Operating Sistem of Linux
Think Globally For Linux because Linux is for human life. Datainchi Born to explore Linux
* About Us
* Sitemap
* FeedRSS
Setelah kita membuat file konten di /var/blog/blogspot/content/_index.md, langkah selanjutnya adalah menjalankan GoHugo. Ketik perintah berikut untuk menjalankan server GoHugo.
root@ns1:/var/blog/blogspot # hugo server --bind=192.168.17.7 --baseURL=http://192.168.17.7 --port=8999
Skrip di atas digunakan untuk menjalankan server Gohugo. Dalam skrip tersebut, kita menjalankan Gohugo pada alamat IP 192.168.17.7 dengan port 8999, sesuai dengan spesifikasi sistem yang telah kita tentukan dalam pembahasan di subbab 1 di atas.
Langkah berikutnya adalah menguji apakah Gohugo dapat dibuka menggunakan peramban web. Buka peramban web Yandex atau Google Chrome, lalu ketik "http://192.168.17.7:8999/" pada bilah alamat; hasilnya akan tampak seperti berikut:
4. Membuat Konten dengan Archetypes
Saat Anda membuat konten menggunakan file /var/blog/blogspot/content/_index.md, itu berarti Anda membuat file konten tersebut secara manual. Kita bisa meminta Hugo untuk membuat halaman konten yang sudah memuat placeholder konten.
Dengan cara ini, kita tidak perlu memulai dari nol saat membuat konten. Hugo menggunakan Archetype untuk menentukan konten bawaan ini. Ketik perintah di bawah ini untuk mulai membuat konten menggunakan archetype.
root@ns1:/var/blog/blogspot # hugo new about.md
Content "/var/blog/blogspot/content/about.md" created
Skrip di atas akan menghasilkan file konten "about.md" yang terletak di "/var/blog/blogspot/content/about.md".
Setelah itu, buka file tersebut, hapus seluruh isinya, lalu ganti dengan skrip di bawah ini.
date = '2025-05-30T09:34:02+07:00'
draft = true
title = 'About'
Think Globally For Linux because Linux is for human life. Datainchi Born to explore Linux
Setelah itu, kita lanjutkan dengan membuat folder baru bernama _default. Ketik skrip berikut untuk membuat folder tersebut.
root@ns1:/var/blog/blogspot # mkdir -p /var/blog/blogspot/layouts/_default
Kita lanjutkan dengan menyalin file index.html; berikut adalah skrip yang kita ketik untuk menyalin file tersebut.
root@ns1:/var/blog/blogspot # cp layouts/index.html layouts/_default/single.html
Kemudian, hapus semua skrip di dalam file "/var/blog/blogspot/layouts/_default/single.html" dan ganti dengan skrip di bawah ini.
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>{{ .Site.Title }}</title>
</head>
<body>
<h1>{{ .Site.Title}}</h1>
<h2>{{ .Title }}</h2>
{{ .Content }}
</body>
</html>
Jalankan server GoHugo.
root@ns1:/var/blog/blogspot # hugo server --bind=192.168.17.7 --baseURL=http://192.168.17.7 --port=8999
Kita dapat melihat hasilnya dengan membuka peramban web Google Chrome dan mengetikkan "http://192.168.17.7:8999/about/".
Sepertinya cukup cukup pembahasan pada part 1 disini, kita lanjutkan ke part 2 dengan pembahasan yang lebih sulit tentunya dari part 1. Semoga artikel pada part 1 ini menjadi bahan referensi kita semua agar tetap semangat dan terus mempelajari GoHugo sebagai aplikasi pembuatan Blog Statis.