Cara Membuat Blog dengan Hugo: Tutorial Deploy Gratis di Vercel

deuxly.dev

deuxly.dev: Blog pakai WordPress itu enak, fitur banyak, plugin lengkap, mau apa aja ada. Tapi kalau soal keamanan dan kecepatan? WordPress terbilang banyak masalah. Di tutorial ini aku mau membagikan panduan lengkap cara membuat blog dengan Hugo yang aman, cepat, dan gratis selamanya.

Dalam tutorial membuat blog dengan Hugo ini, kita akan bikin blog menggunakan Hugo framework static site generator tercepat di dunia. Bukan cuma jalan di komputer sendiri (localhost), tapi aku bakal bantu kamu sampai blog tersebut terdeploy pakai hosting gratis dari Vercel dengan keamanan HTTPS.

Apa yang kamu dapatkan dari tutorial Hugo ini?

• Blog dengan skor Google PageSpeed 100/100
• Biaya hosting Rp 0 selamanya
• Loading time di bawah 1 detik
• Keamanan tingkat tinggi (karena tidak punya database yang bisa dihack)
• Website yang disukai Google untuk SEO

Apa itu Hugo dan Kenapa Harus Pakai Hugo?

Hugo adalah static site generator (SSG) yang ditulis dalam bahasa Go. Hugo ngubah file Markdown jadi website HTML yang super cepat ngga perlu pakai database. Dikembangin sejak 2013, Hugo kini udah jadi salah satu SSG paling populer dengan lebih dari 85.000 stars di GitHub.

Keunggulan Hugo dibanding platform lain:

• 35x lebih cepat dari Jekyll dalam membangun website
• Memproses 10.000 halaman hanya dalam 10 detik
• Tidak perlu install Node.js, Ruby, atau dependencies berat lainnya
• File executable tunggal, install sekali langsung jalan

Hugo vs WordPress vs Jekyll vs Gatsby

Sebelum mulai tutorial Cara Membuat Blog dengan Hugo, penting untuk tahu perbandingannya dengan platform lain:

Secara garis besar, Hugo sendiri masih terbilang SSG yang masih baru namun udah menguasai pasar. Hugo yang mengeklaim kalau static site generator milik mereka memiliki kecepatan yang sangat cepat dan tercepat di antara SSG lainnya.

Soal keamanan? Jangan diragukan, kita bisa menyimpan data kita secara aman bahkan hitungannya sudah sekaligus backup data saat melakukan proses push ke GitHub.

Lalu apa bedanya dengan WordPress? Kalau kita bahas dari keamanan, aku secara pribadi akan pilih Hugo. Kalau soal fleksibilitas untuk non-programmer? Aku pilih WordPress.

Alat-Alat untuk Membuat Blog Hugo

Sebelum mulai tutorial membuat blog dengan Hugo, pastikan kamu punya tools berikut:

1. Visual Studio Code - Text editor untuk coding
2. Git - Version control system
3. Hugo Extended - Framework Hugo versi extended (WAJIB!)
4. Akun GitHub - Untuk menyimpan source code
5. Akun Vercel - Untuk hosting gratis

Wajib hukumnya untuk ambil Hugo yang versi extended, kenapa? Kebanyakan tema Hugo pakai Hugo versi extended. Kalau kamu pakai Hugo versi standar, kemungkinan besar tema yang mau dipasang akan gagal karena beda version.

Cara Install Hugo Cepat (Via Terminal)

Untuk Pengguna Windows (via Chocolatey):

choco install hugo-extended -confirm
choco install git -confirm

Untuk Pengguna Mac (via Homebrew):

brew install hugo

Untuk Pengguna Linux (via Snap):

snap install hugo

Cek instalasi Hugo dengan ketik di terminal command hugo version. Pastikan muncul kata extended.

Membuat Struktur Blog Hugo dari Nol

Buka terminal atau Command Prompt kesayanganmu, arahkan ke folder di mana kamu mau nyimpan project blog Hugo, dan ketik command di bawah ini:

hugo new site blog-hugoku

Selamat! Kerangka blog Hugo sudah jadi. Sekarang kita bedah dikit folder penting di dalamnya:

• content/ - Di sini tempat kita nulis artikel dalam format Markdown
• themes/ - Tempat menyimpan template (theme) blog
• hugo.toml / hugo.yaml - File konfigurasi utama blog
• static/ - Tempat untuk menyimpan file gambar atau file yang tidak mau diproses Hugo
• layouts/ - Custom template HTML (optional)
• public/ - Output hasil build (jangan di-edit manual)

Untuk pemahaman lebih dalam tentang struktur folder Hugo, baca: Memahami Struktur Direktori Hugo

Memasang Tema Hugo dengan Git Submodule (Cara Modern)

Banyak tutorial yang nyuruh kamu download file ZIP tema. JANGAN PERNAH! Itu cara lama yang berujung bikin kamu susah update tema nantinya.

Kita akan pakai teknik Git Submodule—cara profesional yang dipakai developer berpengalaman.

Pertama, masuk ke folder blog dan inisialisasi Git:

cd blog-hugoku
git init

Kita akan menggunakan tema Hugo PaperMod, salah satu tema Hugo tercepat dan paling banyak dipakai saat ini (lebih dari 9.000 stars di GitHub).

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

Keuntungan pakai Git Submodule:

• Update tema cukup satu command
• Tidak merusak customization kamu
• Source code tema terpisah dari kode blogmu
• Lebih professional dan maintainable

Dengan cara ini, kalau nantinya si creator tema update tema, kamu tinggal tarik aja updatenya dengan command git submodule update --remote --merge.

Konfigurasi Dasar Hugo (hugo.yaml)

Buka file hugo.toml di VS Code. Hapus isinya, dan ganti dengan konfigurasi dasar berikut agar tema PaperMod berjalan:

baseURL: https://project-hugo.vercel.app/
languageCode: id-ID
title: Blog Hugo Pertama
theme: PaperMod

params:
  defaultTheme: auto
  ShowReadingTime: true
  ShowShareButtons: true
  ShowPostNavLinks: true
  ShowBreadCrumbs: true
  ShowCodeCopyButtons: true
  
  homeInfoParams:
    Title: "Selamat Datang di Blog Hugo"
    Content: "Blog super cepat yang dibangun dengan Hugo"

menu:
  main:
    - identifier: categories
      name: Kategori
      url: /categories/
      weight: 10
    - identifier: tags
      name: Tags
      url: /tags/
      weight: 20
    - identifier: archives
      name: Arsip
      url: /archives/
      weight: 30

Membuat Artikel Pertama di Hugo dengan Markdown

Saatnya menulis artikel! Di Hugo, kita nulis artikel pakai format Markdown format teks sederhana yang mudah dipelajari. Buat file baru pakai terminal dengan perintah:

hugo new posts/halo-dunia.md

File baru akan muncul di dalam folder content/posts/. Buka file tersebut di VS Code, kamu akan lihat bagian atas yang disebut Front Matter:

---
title: "Halo Dunia"
date: 2025-01-01T10:00:00+07:00
draft: true
categories: ["Tutorial"]
tags: ["Hugo", "Pemula"]
---

Halo! Ini adalah artikel pertamaku menggunakan Hugo.

Aku menulis ini dengan **Markdown**. Loading blog ini sangat cepat!

## Kenapa Aku Memilih Hugo?

1. Kecepatan luar biasa
2. Gratis selamanya
3. Aman dari hack
4. SEO-friendly

Lihat tutorial lengkapnya di [artikel utama](/).

Untuk melihat hasilnya di browser, jalankan server lokal dengan mode draft:

hugo server -D

Buka http://localhost:1313 di browser. Blog kamu sudah jalan dan bisa diakses!

Shortcut keyboard berguna:

• Ctrl + C - Stop server Hugo
• Ctrl + S - Save file (auto-reload browser)

Deploy Blog Hugo di Vercel (Hosting Gratis Selamanya)

Tutorial lain mungkin cuma ngebahas sampai di localhost, tapi kita akan membuat blog Hugo kamu tayang di internet dan bisa diakses semua orang. Kita pilih Vercel karena:

• Server global yang sangat kencang (CDN worldwide)
• HTTPS gratis otomatis
• Deploy unlimited gratis untuk personal project
• Auto-deploy setiap kali push ke GitHub

Upload Blog Hugo ke GitHub

1. Buat repository baru di akun GitHub kamu (misal: blog-hugoku). Jangan centang “Initialize with README”.
2. Balik lagi ke terminal VS Code, jalankan perintah ini:

git add .
git commit -m "Initial commit: Setup blog Hugo"
git branch -M main
git remote add origin https://github.com/USERNAME-KAMU/blog-hugoku.git
git push -u origin main

Ganti USERNAME-KAMU dengan username GitHub kamu.

Sambungkan GitHub ke Vercel

1. Buka Vercel.com dan daftar/login pakai akun GitHub
2. Klik “Add New Project” atau “Import Project”
3. Pilih repository blog-hugoku yang baru kamu buat, klik Import
4. Di bagian Framework Preset, Vercel biasanya otomatis detect Hugo
5. Di Environment Variables, tambahkan:
   • Key: HUGO_VERSION
   • Value: 0.139.3 (atau versi terbaru Hugo Extended)
6. Klik Deploy

Tunggu sekitar 30-60 detik. Setelah proses deploy selesai, Vercel akan memberikan link blog Hugo dengan subdomain Vercel (misalnya blog-hugoku.vercel.app). Klik link tersebut.

deuxly.dev

Selamat! Blog Hugo kamu sudah online dan bisa diakses siapa saja di dunia dengan kecepatan luar biasa.

Troubleshooting: Masalah Umum Saat Membuat Blog Hugo

Error: Theme not found

Penyebab: Tema belum di-install atau nama tema salah di config.

Solusi:

# Pastikan tema ada di folder themes
ls themes/

# Kalau kosong, install ulang tema
git submodule add https://github.com/adityatelange/hugo-PaperMod themes/PaperMod

Error: failed to extract shortcode

Penyebab: Syntax shortcode salah atau tema tidak support shortcode tersebut.

Solusi: Cek dokumentasi tema untuk shortcode yang supported. Untuk PaperMod, gunakan standard Hugo shortcodes.

Gambar Tidak Muncul di Vercel

Penyebab: Path gambar salah atau case-sensitive issue.

Solusi:

1. Simpan gambar di folder static/images/
2. Panggil dengan path /images/nama-gambar.jpg (huruf kecil semua)
3. Linux server case-sensitive: Gambar.jpg ≠ gambar.jpg

Build Failed di Vercel

Penyebab: Versi Hugo di Vercel beda dengan lokal.

Solusi:

1. Cek versi Hugo lokal: hugo version
2. Set environment variable HUGO_VERSION di Vercel sesuai versi lokal
3. Re-deploy

CSS Tidak Load (Tampilan Berantakan)

Penyebab: baseURL di config tidak sesuai dengan URL deploy.

Solusi: Update hugo.yaml:

baseURL: https://blog-hugoku.vercel.app/

Ganti dengan URL Vercel kamu yang sebenarnya.

Optimasi Blog Hugo untuk Performa Maksimal

Minifikasi HTML, CSS, JS

Tambahkan di hugo.yaml:

minify:
  disableCSS: false
  disableHTML: false
  disableJS: false
  disableJSON: false
  disableXML: false

Kompresi Gambar Otomatis

Hugo punya fitur image processing built-in. Gunakan di artikel:

{{< figure src="/images/foto.jpg" width="800" >}}

Lazy Loading Gambar

Tema PaperMod sudah support lazy loading by default. Pastikan tidak di-disable.

Custom Domain (Optional)

Di Vercel dashboard:

1. Masuk ke project settings
2. Pilih Domains
3. Tambahkan domain custom kamu (misal: blog.namakamu.com)
4. Ikuti instruksi DNS setting

FAQ: Pertanyaan Umum Seputar Cara Membuat Blog Hugo

Apakah Hugo benar-benar gratis selamanya?

Ya, 100% gratis. Hugo adalah software open-source tanpa biaya lisensi. Hosting di Vercel, Netlify, atau GitHub Pages juga gratis untuk personal project dengan traffic normal (sampai jutaan pageviews per bulan).

Aku ngga jago ngoding, apakah susah pakai Hugo?

Jujur, kurva belajar sedikit lebih curam dibanding WordPress di awal. Kamu perlu terbiasa dengan Terminal/Command Prompt dan Markdown.

Tapi setelah setup awal selesai, proses nulis artikel sangat simpel (seperti nulis di Notepad). Keuntungannya: tidak perlu pusing urusin plugin error, update keamanan WordPress, atau blog yang lemot.

Estimasi waktu belajar:

• Pemula: 2-3 hari untuk mahir basic
• Ada basic programming: 1 hari sudah bisa produktif

Gimana cara masang kolom komentar di blog Hugo?

Karena blog statis tidak punya database, gunakan layanan pihak ketiga:

Rekomendasi terbaik 2025:

1. Giscus (GRATIS) - Pakai GitHub Discussions, modern dan ringan
2. Disqus - Populer tapi agak berat dan ada iklan di free tier
3. Utterances - Pakai GitHub Issues, simpel dan gratis

Cara install Giscus di Hugo PaperMod: tambahkan di hugo.yaml:

params:
  giscus:
    repo: "username/repo-comments"
    repoId: "your-repo-id"
    category: "Announcements"
    categoryId: "your-category-id"

Bagaimana cara update tema Hugo?

Karena pakai Git Submodule, update sangat mudah:

# Update tema ke versi terbaru
git submodule update --remote --merge

# Push perubahan
git add .
git commit -m "Update theme to latest version"
git push

Vercel akan otomatis re-deploy dengan tema terbaru.

Apakah blog Hugo ramah SEO?

Sangat ramah SEO. Hugo secara default menghasilkan:

• Struktur HTML semantik yang rapi
• Sitemap.xml otomatis
• Canonical tags
• Schema markup untuk artikel
• Loading speed <1 detik (Core Web Vitals perfect)

Google memprioritaskan website dengan loading cepat dan Core Web Vitals yang baik. Blog Hugo biasanya score 95-100 di Google PageSpeed Insights.

Bisakah migrasi dari WordPress ke Hugo?

Bisa. Ada beberapa tools untuk konversi:

1. wordpress-to-hugo-exporter - Plugin WordPress
2. ExitWP - Script Python untuk konversi
3. Manual export (copy-paste konten)

Yang perlu diperhatikan:

• Komentar harus pindah ke sistem eksternal (Disqus/Giscus)
• Plugin WordPress tidak ada padanannya di Hugo
• Redirect 301 harus di-setup untuk SEO

Apakah Hugo cocok untuk toko online?

Tidak disarankan. Hugo tidak punya backend untuk:

• Processing payment real-time
• Inventory management dinamis
• User authentication

Tapi bisa untuk:

• Landing page produk (static)
• Blog e-commerce
• Documentation site
• Portfolio produk

Untuk e-commerce penuh, pakai Shopify, WooCommerce, atau Next.js + Stripe.

Berapa lama waktu build untuk blog Hugo dengan banyak artikel?

Hugo sangat cepat:

• 100 artikel: ~1 detik
• 1,000 artikel: ~5 detik
• 10,000 artikel: ~10 detik

Bandingkan dengan Jekyll (5 menit untuk 1,000 artikel) atau Gatsby (30+ menit).

Kesimpulan: Saatnya Pindah ke Hugo

Kamu baru saja menyelesaikan tutorial lengkap cara membuat blog dengan Hugo dari nol sampai deploy gratis di Vercel. Blog kamu sekarang punya:

✅ Performa luar biasa - Loading <1 detik, PageSpeed 100/100
✅ Biaya hosting Rp 0 - Gratis selamanya di Vercel
✅ Keamanan tinggi - Tidak ada database yang bisa dihack
✅ SEO-friendly - Struktur yang disukai Google
✅ Scalability - Siap untuk ribuan artikel tanpa lemot

Langkah selanjutnya:

1. Tulis 5-10 artikel berkualitas untuk konten awal
2. Submit sitemap ke Google Search Console
3. Optimasi gambar dan meta description
4. Promosikan blog di social media
5. Konsisten publish konten (minimal 1x per minggu)

Instalasi selesai! Sekarang fokus pada yang terpenting: membuat konten berkualitas untuk pembaca.

Artikel Lanjutan yang Wajib Dibaca:

Punya pertanyaan? Drop comment di bawah.