Cara Membuat Blog dengan Hugo Gratis, Cepat & Aman

deuxly.id

Jujur aja, banyak teman yang minta diajarin Cara Membuat Blog dengan Hugo karena mereka mulai ngerasa WordPress itu overkill. Terlalu berat, ribet urus plugin, dan kalau apes dikit databasenya bisa kena hack.

Kalau kamu pengen blog yang set and forget, sekali bikin, gratis hosting selamanya, dan super aman jawabannya memang Hugo.

Tapi ingat, Hugo ini bukan CMS biasa. Dia adalah Static Site Generator. Kerjanya merender tulisan kamu jadi file HTML murni yang siap tayang. Makanya dia ngebut banget. Sini, aku temenin kamu bangun blog Hugo dari nol, pakai cara paling fresh dan rapi.

Persiapan Membuat Blog Hugo

Sebelum kita ketik-ketik kode di layar hitam (terminal), pastikan laptop kamu udah siap. Jangan skip bagian ini kalau ngga mau error di tengah jalan.

Kita butuh 3 senjata utama:

1. Git: Anggap aja ini fitur Save Game buat kodingan kamu. Wajib ada buat download tema dan upload ke hosting nanti.
2. VS Code: Text editor paling nyaman sejagat raya.
3. Hugo (Versi Extended): Nah, ini kuncinya.

Cara Install Hugo

Banyak tutorial lama nyuruh kamu download file .exe manual, ekstrak, lalu setting Environment Variable sendiri. Big No! Itu cara purba yang bikin ribet kalau mau update versi.

Di Windows, cara yang paling elegan adalah pakai Chocolatey atau Scoop. Di tutorial ini, kita pakai Chocolatey aja karena paling umum.

Install Chocolatey

Buka PowerShell sebagai Administrator Klik kanan tombol Start > Terminal (Admin) / PowerShell (Admin). Lalu copy kode di bawah ini:

Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))

Tunggu sampai prosesnya selesai, kemudian tutup PowerShell dan buka lagi.

Install Hugo Extended

Sekarang, ketik perintah simpel ini buat install Hugo sekaligus Git kalau belum ada:

choco install hugo-extended git -y

Tunggu proses download selesai. Enaknya pakai cara ini, Chocolatey bakal otomatis ngurusin setting path di Windowsmu. Rapi bersih.

Verifikasi Instalasi

Buat memastikan Hugo udah siap kita acak-acak, ketik:

hugo version

Kalau muncul tulisan kayak hugo v0.140.0+extended, selamat! Kamu udah resmi jadi calon pengguna Hugo. Perhatikan ada kata +extended di belakangnya. Itu tandanya kita berhasil install versi yang kita butuhin.

deuxly.id

Cara Membuat Blog dengan Hugo

Sekarang saatnya kita generate struktur folder blog hugo kamu. Buka lagi terminal atau VS Code, lalu buka folder di mana kamu mau simpan file blog ini (contohnya di Documents).

Ketik perintah di bawah ini untuk membuat blog:

hugo new site blog-hugo-pertamaku

Note: Ganti blog-hugo-pertamaku dengan nama folder yang kamu mau.

Setelah itu, masuk ke folder yang barusan dibuat:

cd blog-hugo-pertamaku

Coba lihat isinya. Kamu bakal lihat beberapa folder kosong. Jangan bingung, ini fungsi utamanya:

• content/: Ini kertas kamu. Semua tulisan artikel dalam format Markdown bakal disimpan di sini.
• static/: Tempat simpan gambar, logo, atau file CSS tambahan. File di sini bakal dicopy mentah-mentah pada saat build.
• themes/: Tempat simpan tema blog kamu.
• hugo.toml: Ini otaknya. Semua pengaturan (judul blog, menu, link sosmed) diatur di sini.

Pasang Tema Blog Hugo

Ini kesalahan fatal yang sering dilakukan: Download file tema .zip, dan diekstrak manual ke folder themes.

Kenapa itu salah? Karena kalau si pembuat temanya rilis update (perbaikan bug atau rilis fitur baru), kamu harus download ulang lagi dan wajib timpa file lama. Itu ribet dan beresiko bikin settingan kamu hilang.

Cara Benar: Kita pakai Git Submodule. Ini kayak kita nempel link repository tema orang lain ke blog kita. Kalau mau update, tinggal tarik data baru via Git. Simpel.

Inisialisasi Git Dulu

Sebelum pasang tema, kita harus jadikan folder blog kita sebagai repository Git.

git init

Install Tema

Di tutorial ini, aku rekomendasiin tema PaperMod. Ini tema super cepat, bersih, dan favorit banyak developer.

Ketik perintah ini buat download temanya sebagai submodule:

git submodule add --depth=1 https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod

Tunggu sampai proses download kelar.

Aktifkan Tema di Konfigurasi

Sekarang tema sudah terdownload, tapi Hugo belum ngerti kalau kita mau pakai tema itu. Kita harus kasih tau di hugo.toml.

Buka file hugo.toml di VS Code, lalu tambahin baris ini di paling bawah (atau edit config lama):

theme = "PaperMod"
baseURL = "https://domainblogmu.com/"
languageCode = "id-id"
title = "Blog Hugo Pertama Aku"

deuxly.id

Sekarang tema blog kamu sudah siap. Tapi isinya masih kosong melompong. Kita isi konten perdana di langkah selanjutnya.

Bikin Konten Pertama

Kerangka udah, tema udah. Sekarang kita isi blog hugonya.

Di Hugo, kita bikin artikel lewat terminal biar formatnya otomatis rapi dan sesuai standar (namanya Archetypes).

Ketik perintah ini:

hugo new posts/hellowerld.md

Sekarang, buka file content/posts/hellowerld.md di VS Code. Kamu bakal lihat kotak dengan garis putus-putus di bagian atas dan bawah file. Itu namanya Front Matter.

---
title: "Halo Dunia"
date: 2025-12-19T08:00:00+07:00
draft: true
---

Tulis artikel kamu di sini. Pakai format Markdown ya!
## Subjudul Artikel
Ini paragraf pertama aku.

* Ini list poin 1
* Ini list poin 2

Cara Memasukkan Gambar

Ini sering bikin bingung. Kalau mau masukin gambar, JANGAN taruh di folder content.

1. Copy gambarmu ke folder static/images/ (buat folder images kalau belum ada).
2. Di artikel Markdown, panggil gambarnya tanpa awalan static.

Contoh: ![Kucing Lucu](/images/kucingku.jpg)

Hugo otomatis tau kalau root / itu mengarah ke folder static.

Test Drive Blog

Oke, artikel udah dibuat. Sekarang kita lihat hasilnya di browser.

Balik ke terminal, ketik kode ini untuk tayang di localhost server:

hugo server -D

Perhatikan huruf -D besar itu! Itu singkatan dari buildDrafts. Ingat kan di Front Matter tadi ada tulisan draft: true?

• Kalau kamu jalankan hugo server (tanpa -D), artikel kamu ngga bakal muncul. Kosong.
• Kalau pakai -D, Hugo dipaksa menampilkan semua artikel walaupun statusnya masih draft.

Sekarang buka browser dan ketik alamat: http://localhost:1313/

deuxly.id

Deploy Hugo ke Cloudflare Pages

Blog di localhost cuma bisa dilihat sama kamu sendiri. Biar bisa di akses publik, kita harus upload. Alurnya gini:

Upload Kode ke GitHub

Pastikan kamu udah buat akun GitHub ya. Bikin repository baru (pilih Public), kasih nama bebas (misal: blog-hugo-pertamaku).

Balik lagi ke terminal di folder blog kamu, ketik urutan ini:

git add .
git commit -m "First commit: Bismillah jadi blog"
git branch -M main
git remote add origin https://github.com/USERNAME/REPO-KAMU.git
git push -u origin main

(Ganti URL GitHub sesuai sama repo yang barusan kamu buat).

Connect ke Cloudflare Pages

1. Login ke dash.cloudflare.com .
2. Pilih menu Workers & Pages di sidebar kiri.
3. Klik Create Application > pilih tab Pages > Connect to Git.
4. Pilih repository blog-hugo-pertamaku yang tadi kamu buat.

Konfigurasi Build

Di halaman setup, isi bagian ini:

• Project name: (bebas)
• Production branch: main
• Framework preset: Pilih Hugo.
• Build command: hugo (atau hugo --gc --minify biar lebih bersih)
• Build output directory: public

Klik Save and Deploy. Tunggu sekitar 1-2 menit. Kalau sukses, Cloudflare bakal kasih URL (misal: blog-hugo-pertamaku.pages.dev).

Selamat! Blog kamu sudah online.

Error yang Sering Bikin Panik

Namanya juga ngoding, pasti ada error dikit. Jangan panik, ini solusi buat masalah paling umum:

Tema Hancur / Blank Putih

Pas di localhost bagus, pas di Cloudflare kok jadi hancur gini? Penyebab: Cloudflare gagal download tema kamu. Solusi: Cek file .gitmodules di root folder kamu. Pastikan file itu ikut keupload di GitHub. Cloudflare butuh file ini buat tau temanya.

Gambar Tidak Muncul

Penyebab: Salah path URL. Solusi:

• Salah: C:/Users/Budi/Documents/blog/static/images/foto.jpg
• Benar: /images/foto.jpg Selalu pakai relative path dari folder static supaya ngga error.

3. Artikel Hilang di Versi Live

Penyebab: Lupa ganti status Draft. Solusi: Buka file artikel .md kamu, ganti draft: true jadi draft: false. Lalu push ulang ke GitHub (git add ., git commit, git push).

FAQ: Orang Juga Bertanya

Kesimpulan

Bikin blog dengan Hugo ngga susah kalau udah paham sama strukturnya, malahan lebih bersih dibanding wordpress. Kamu dapat kontrol penuh, kecepatan website yang gila gilaan, dan ini yang bikin aku migrasi dari wordpress ke hugo yaitu hosting gratis seumur hidup.

Sekarang giliranmu. Coba praktekkan, kalau ada error, copy pesan errornya dan tanyain di sini atau Google.