Cara Membuat Blog dengan Hugo: Setup Awal sampai Jadi

Terakhir di Update December 12, 2025

Pernah merasa blog WordPress kamu makin lama makin berat saat diakses? Atau kamu mungkin bosan harus terus-terusan update plugin biar nggak kena hack? Kalau iya, berarti kamu butuh solusi yang lebih segar. Di artikel ini, aku bakal share panduan lengkap cara membuat blog dengan Hugo, sebuah Static Site Generator (SSG) yang terkenal super ngebut dan aman. Hugo ini jadi primadona di kalangan developer karena kemudahannya mengubah file teks sederhana menjadi website yang cantik tanpa butuh database yang ribet.

Cara Membuat Blog dengan Hugo: Setup Awal sampai Jadi
Dec 12, 2025
5 min read
0 Views
0 Komentar

Pernah merasa blog WordPress kamu makin lama makin berat saat diakses? Atau kamu mungkin bosan harus terus-terusan update plugin biar nggak kena hack? Kalau iya, berarti kamu butuh solusi yang lebih segar. Di artikel ini, aku bakal share panduan lengkap cara membuat blog dengan Hugo, sebuah Static Site Generator (SSG) yang terkenal super ngebut dan aman. Hugo ini jadi primadona di kalangan developer karena kemudahannya mengubah file teks sederhana menjadi website yang cantik tanpa butuh database yang ribet.

Mari kita bedah bareng-bareng prosesnya dari nol sampai blog kamu siap online.

Kenapa Harus Pakai Hugo?

Sebelum kita masuk ke teknis, aku mau kasih tahu kenapa banyak orang (termasuk aku) pindah ke Hugo. Pertama, kecepatan. Karena Hugo menghasilkan file HTML statis, blog kamu bakal di-load browser secepat kilat. Nggak ada lagi proses query database yang bikin lemot.

Kedua, keamanan. Tanpa database dan tanpa plugin PHP yang rentan, celah keamanan di blog kamu jadi sangat minim. Ketiga, pengalaman menulis. Buat kamu yang suka clean writing, nulis pakai format Markdown di teks editor rasanya jauh lebih fokus dan menyenangkan dibanding ngetik di dashboard CMS konvensional.

Persiapan Tools Pendukung

Hugo nggak bisa berdiri sendirian. Ada beberapa tools dasar yang perlu kamu siapkan di komputer biar proses instalasi dan manajemen blog nanti berjalan mulus.

Install Git

Git ini wajib hukumnya. Selain buat version control (biar kalau salah edit bisa di-undo), Git juga kita pakai buat download tema Hugo nanti. Kamu bisa download installer Git di situs resminya dan install seperti biasa.

Install Go Lang

Hugo itu dibangun menggunakan bahasa pemrograman Go (Golang) dari Google. Jadi, pastikan komputer kamu sudah terinstall Go agar Hugo bisa berjalan optimal. Nggak perlu jago coding Go kok, cukup install saja runtime-nya.

Instalasi Hugo di Komputer

Nah, sekarang kita masuk ke menu utama. Untuk instalasi, aku sangat menyarankan kamu menginstall versi Hugo Extended. Versi ini punya fitur lebih lengkap, terutama kemampuannya memproses SCSS/SASS yang dipakai oleh tema-tema modern. Kalau install versi biasa, nanti sering error saat pasang tema bagus.

Pengguna Windows

Cara paling gampang dan rapi buat pengguna Windows adalah pakai Chocolatey (package manager). Buka PowerShell sebagai Administrator, lalu ketik perintah ini:

choco install hugo-extended

Pengguna macOS

Buat anak Mac, kita pakai Homebrew. Cukup buka terminal kamu dan jalankan perintah:

brew install hugo

Cek Verifikasi Instalasi

Setelah proses instalasi selesai, kita perlu pastikan Hugo sudah benar-benar terpasang. Ketik perintah ini di terminal atau command prompt:

hugo version

Kalau muncul tulisan seperti hugo v0.1xx.0+extended, selamat! Kamu sudah siap tempur.

Tampilan terminal yang menunjukkan versi Hugo Extended berhasil terinstall

Generate Situs Baru

Sekarang saatnya membuat kerangka blog kamu. Tentukan dulu di folder mana kamu mau menyimpan file blog ini. Buka terminal di folder tersebut, lalu ketik perintah sakti ini:

hugo new site blog-aku

Kamu bisa ganti blog-aku dengan nama folder yang kamu mau. Setelah di-enter, Hugo bakal otomatis membuat satu folder baru berisi struktur direktori lengkap buat blog kamu. Isinya kurang lebih seperti ini:

Screenshot struktur folder default Hugo setelah generate site

Memilih dan Memasang Tema

Blog Hugo yang baru dibuat itu masih kosong melompong, belum ada bajunya. Kita perlu pasang tema biar tampilannya oke.

Mencari Tema yang Cocok

Kamu bisa meluncur ke themes.gohugo.io. Di sana ada ratusan tema gratis. Pilih yang paling sesuai selera, apakah mau yang minimalis, magazine style, atau portofolio.

Download Tema via Git

Setelah nemu yang cocok, jangan di-download manual zip-nya. Lebih baik pakai fitur git submodule biar kalau temanya ada update, kamu gampang memperbaruinya. Masuk ke folder blog kamu dulu via terminal:

cd blog-aku
git init
git submodule add https://github.com/link-repo-tema-pilihanmu.git themes/nama-tema

Konfigurasi Dasar

Buka file hugo.toml (atau config.toml) di text editor (aku saranin pakai VS Code). Tambahkan baris ini untuk mengaktifkan tema:

theme = "nama-tema"
baseURL = "https://nama-domain-kamu.com/"
title = "Blog Keren Aku"

Pastikan nama tema sesuai dengan nama folder yang ada di dalam folder themes.

Membuat Konten Artikel

Di Hugo, kita menulis konten menggunakan format Markdown (.md). Nggak perlu bikin file manual, Hugo sudah sediakan perintahnya.

hugo new posts/artikel-pertama.md

Memahami Front Matter

Coba buka file artikel-pertama.md yang baru dibuat di folder content/posts. Kamu bakal lihat bagian di paling atas yang diapit tanda +++ atau ---. Itu namanya Front Matter.

Contoh tampilan file markdown dan front matter di VS Code

Perhatikan bagian draft: true. Ini tandanya artikel kamu masih dalam mode konsep dan belum bakal muncul di versi final kecuali kita paksa. Ubah jadi false kalau sudah siap terbit.

Menjalankan Server Lokal

Penasaran kan gimana hasil tulisan dan tema yang sudah dipasang? Hugo punya fitur Live Reload yang canggih. Jalankan perintah ini:

hugo server -D

Tambahan -D itu fungsinya untuk menampilkan artikel yang statusnya masih draft. Sekarang buka browser dan akses http://localhost:1313. Coba edit tulisan kamu dan save, browser bakal otomatis me-refresh tampilannya. Ajaib, kan?

Preview blog Hugo yang berjalan di localhost browser

Build dan Deploy ke Internet

Kalau kamu sudah puas dengan tampilan di lokal, saatnya “memasak” blog ini biar jadi file HTML yang siap di-upload.

Generate Folder Public

Matikan server lokal (Ctrl+C), lalu ketik perintah simpel ini:

hugo

Hugo akan memproses semua file Markdown dan tema kamu, lalu hasilnya akan disimpan di folder bernama public. Isi folder public inilah yang nantinya kamu upload ke hosting.

Opsi Hosting Gratis

Kabar baiknya, hosting blog statis itu banyak yang gratis! Kamu bisa hubungkan folder proyek kamu ke GitHub, lalu koneksikan ke Netlify atau Vercel. Setiap kali kamu push tulisan baru ke GitHub, Netlify akan otomatis melakukan build dan blog kamu langsung terupdate dalam hitungan detik.

Kesimpulan

Gimana, ternyata nggak serumit yang dibayangkan, kan? Meskipun awalnya terasa teknis karena banyak main di terminal, tapi begitu workflow-nya sudah terbentuk, ngeblog pakai Hugo itu nagih banget. Kamu bisa fokus total ke konten tanpa pusing mikirin maintenance server.

Selamat berkarya dengan blog barumu!

Iklan Bawah Artikel
0
Cara Membuat Blog dengan Hugo: Setup Awal sampai Jadi
Cara Membuat Blog dengan Hugo: Setup Awal sampai Jadi

Pernah merasa blog WordPress kamu makin lama makin berat saat diakses? Atau kamu mungkin bosan harus …

Bagikan ke aplikasi lainnya:
  • WhatsApp
  • Facebook
  • Twitter

Komentar (0)

Paste kode HTML/Script di sini untuk di-parse (Encode).
Membalas: ...
Guest
Support Markdown
Memuat komentar...