DEV Community

Cover image for Bikin Blog Super Cepat & Gratis dengan Hugo (Bye-bye WordPress!)
deuxly
deuxly

Posted on • Originally published at deuxly.id

Bikin Blog Super Cepat & Gratis dengan Hugo (Bye-bye WordPress!)

#hugo #webdev #tutorial #beginners

Masih pakai platform blogging yang berat dan harus bayar hosting bulanan? Mungkin ini saatnya kamu kenalan sama Hugo.

Hugo adalah Static Site Generator (SSG) yang lagi naik daun banget. Kenapa? Karena dia cepat, aman (nggak ada database yang bisa diretas), dan bisa di-hosting gratis di GitHub Pages atau Cloudflare Pages.

Di artikel ini, saya mau share cara singkat bangun blog impian kamu pakai Hugo. Yuk, gas! πŸš€

Apa yang Kamu Butuhkan?

Sebelum mulai, pastikan di laptop kamu sudah terinstall:

  1. Git (Wajib buat version control).
  2. Code Editor (VS Code sangat disarankan).
  3. Hugo (Tentu saja).

Langkah 1: Install Hugo

Buat pengguna Windows, cara paling gampang pakai Chocolatey. Buka terminal (Run as Admin):

choco install hugo-extended -confirm
Buat pengguna Mac (Homebrew):
Enter fullscreen mode Exit fullscreen mode 

brew install hugo
Enter fullscreen mode Exit fullscreen mode

Cek apakah sudah sukses dengan ketik hugo version.

Langkah 2: Bikin Situs Baru
Buka terminal di folder di mana kamu mau simpan project blog ini, lalu ketik:

hugo new site blog-keren-saya
cd blog-keren-saya
Enter fullscreen mode Exit fullscreen mode

Sekarang kamu punya kerangka folder kosong. Tapi ini belum bisa jalan karena belum ada "baju" alias temanya.

Langkah 3: Pasang Tema (Theme)
Hugo punya ribuan tema gratis. Salah satu yang populer dan bersih adalah PaperMod. Kita install pakai Git Submodule supaya gampang update nanti.


git init
git submodule add [https://github.com/adityatelange/hugo-PaperMod](https://github.com/adityatelange/hugo-PaperMod) themes/PaperMod
Enter fullscreen mode Exit fullscreen mode

Lalu, buka file hugo.toml (atau config.toml) di text editor kamu, dan tambahkan baris ini:


theme = "PaperMod"
baseURL = "[https://username.github.io/](https://username.github.io/)"
title = "Blog Keren Saya"
languageCode = "id-ID"
Enter fullscreen mode Exit fullscreen mode

Langkah 4: Tulis Artikel Pertamamu
Ini bagian serunya. Di Hugo, kita nulis pakai format Markdown.

Bikin file baru lewat terminal:


hugo new posts/halo-dunia.md
Enter fullscreen mode Exit fullscreen mode

File itu akan muncul di folder content/posts/. Isinya kurang lebih begini (ini namanya Frontmatter):


---
title: "Halo Dunia"
date: 2025-10-01T10:00:00+07:00
draft: true
---


Selamat datang di blog baru saya! Ini adalah postingan pertama pakai Hugo.
Ternyata nulis pakai Markdown itu asik ya.
Enter fullscreen mode Exit fullscreen mode

Ubah draft: true jadi false kalau sudah siap publish.

Langkah 5: Jalankan Server Lokal
Mau lihat hasilnya? Jalankan perintah ini:


hugo server -D
Enter fullscreen mode Exit fullscreen mode

Buka browser dan akses http://localhost:1313. Voila! Blog kamu sudah jadi di lokal.

Langkah 6: Hosting Gratis (GitHub Pages)
Supaya bisa diakses seluruh dunia, kita push ke GitHub.

Buat repository baru di GitHub (misal: blog-saya).

Push kode kamu ke sana.

Masuk ke Settings > Pages di repository GitHub.

Pilih Source: GitHub Actions (Hugo punya action bawaan yang canggih sekarang).

GitHub akan otomatis build dan deploy website kamu. Gratis selamanya!

Kesimpulan
Membuat blog dengan Hugo mungkin terlihat teknis di awal, tapi sekali set-up, kamu bakal merasakan performa yang jauh di atas CMS biasa. Loadingnya instan, skor SEO-nya gampang dapet 100, dan tentunya developer-friendly banget.

Ada pertanyaan soal Hugo ? Tulis di kolom komentar ya!

Terima kasih sudah membaca! Artikel ini pertama kali dipublikasikan di blog pribadi saya. Untuk tutorial lebih lengkap dan tips seputar Hugo lainnya, silakan mampir ke deuxly.id.

Gimana? Kelihatan profesional kan? 😎

Top comments (0)