Cara Deploy Hugo ke GitHub, Netlify, Vercel & Cloudflare

deuxly.id

Punya blog keren tapi cuma nangkring di laptop sendiri? Sayang banget! Padahal, performa Hugo itu juara kalau udah melesat di internet. Nah, di artikel ini, Deuxly akan memandu kamu langkah demi langkah tentang cara deploy Hugo ke berbagai platform hosting gratis terbaik saat ini.

Kamu bebas memilih mau pakai metode apa. Kita akan bahas tuntas mulai dari cara deploy Hugo di GitHub yang klasik, kemudahan cara deploy Hugo di Netlify, kecepatan cara deploy Hugo di Vercel, hingga performa “ngebut” dari cara deploy Hugo di Cloudflare. Semuanya gratis, tanpa biaya server sepeser pun!

Udah siap bikin blog kamu live dan bisa diakses seluruh dunia? Yuk, simak panduannya.

Persiapan: Kemasi Koper Digitalmu (Git)

Sebelum blog kamu bisa pindah rumah ke internet, kita harus membungkusnya dulu menggunakan Git. Ini syarat mutlak ya. Berbeda dengan cara lama yang harus upload file satu per satu, kita akan pakai sistem otomatis (CI/CD). Jadi, nanti kalau kamu update artikel, website otomatis berubah sendiri.

Pastikan kamu udah install Git dan punya akun GitHub. Kalau udah, mari kita upload kodenya:

1. Buka terminal/CMD di dalam folder blog Hugo kamu.
2. Kita mulai dengan inisialisasi Git:

   git init
       

3. Tips Penting: Pastikan kamu punya file .gitignore. Masukkan folder public dan resources di dalamnya agar file sampah tidak ikut ter-upload.
4. Jalankan perintah berikut untuk mengirim kodemu ke GitHub:

git add .
git commit -m "Upload pertama blog Hugo aku"
git branch -M main
# Ganti URL di bawah dengan URL repository GitHub kamu
git remote add origin https://github.com/username-kamu/nama-repo.git
git push -u origin main

Udah masuk GitHub? Oke, sekarang saatnya memilih rumah untuk blog kamu.

Deploy ke GitHub Pages (Solusi Satu Atap)

Ini adalah opsi paling populer karena repository dan hostingnya berada di tempat yang sama. GitHub Pages sekarang udah jauh lebih canggih berkat fitur GitHub Actions. Kamu ngga perlu lagi push folder public secara manual.

Langkah Mudah:

1. Buka repository blog kamu yang tadi udah di-push.
2. Masuk ke menu Settings (ikon gerigi) > cari menu Pages di sidebar kiri.
3. Lihat bagian Build and deployment. Ubah opsi “Source” menjadi GitHub Actions.
4. Cari logo Hugo, lalu klik Configure.
5. GitHub akan membuatkan skrip otomatis. Kamu cukup klik Commit changes (tombol hijau).
6. Tunggu sebentar, lalu refresh halaman Settings > Pages tadi. Link blog kamu akan muncul di sana!

Deploy ke Netlify (Paling Anti Ribet)

Kalau kamu cari pengalaman pengguna (UX) yang paling nyaman, Netlify adalah jawabannya. Aku sering menyarankan ini untuk pemula karena prosesnya yang sangat visual dan drag and drop friendly (meski kita tetap pakai Git).

Caranya:

1. Login ke Dashboard Netlify (bisa langsung pakai akun GitHub).
2. Klik “Add new site” > pilih “Import an existing project”.
3. Pilih tombol GitHub.
4. Cari nama repository blog kamu.
5. Di bagian pengaturan build, biasanya Netlify udah otomatis tahu isinya. Tapi pastikan:
   • Build command: hugo --gc --minify
   • Publish directory: public
6. Klik Deploy Site.

Selesai! Blog kamu langsung online dengan domain unik dari Netlify .

[build]
publish = "public"
command = "hugo --gc --minify"

[context.production.environment]
HUGO_VERSION = "0.120.0"  # Sesuaikan versinya dengan yang di laptopmu

Deploy ke Vercel (Kombinasi Cepat & Stabil)

Meskipun Vercel itu rumahnya Next.js, ternyata mereka sangat ramah untuk pengguna Hugo. Infrastruktur mereka terkenal sangat responsif.

Langkah Cepat:

1. Buka Vercel dan login via GitHub.
2. Klik “Add New…” lalu pilih “Project”.
3. Import repository Hugo kamu.
4. Di bagian Framework Preset, pastikan udah terpilih Hugo.
5. Klik Deploy.

Tunggu sebentar sampai animasinya selesai, Blog kamu udah live. Salah satu yang aku suka dari Vercel adalah tampilan dashboardnya yang bersih dan subdomain .vercel.app yang terlihat profesional.

Deploy ke Cloudflare Pages (Raja Kecepatan)

Ini dia favorit baru banyak developer: Cloudflare Pages. Kenapa? Karena blog kamu akan diduplikasi ke ratusan server di seluruh dunia (Edge Network). Hasilnya? Loading super cepat dari negara manapun!

Caranya:

1. Masuk ke Dashboard Cloudflare.
2. Cari menu Workers & Pages posisinya pas di samping kiri.
3. Klik Create Application > pilih tab Pages.
4. Klik Connect to Git dan pilih repo kamu.
5. Setting bagian buildnya:
   • Framework preset: Pilih Hugo.
   • Build command: hugo --minify
   • Output directory: public
6. Save and Deploy.

Selain cepat, Cloudflare juga memberikan unlimited bandwidth. Jadi kalau tulisan kamu viral, kamu ngga perlu khawatir situs down atau kena tagihan.

Rangkuman: Mana yang Harus Dipilih?

Biar ngga bingung, ini perbandingan singkat versi Deuxly:

Saran:

• Pilih Netlify kalau kamu baru belajar dan butuh fitur tambahan seperti contact form.
• Pilih Cloudflare Pages kalau kamu obsesi sama kecepatan loading (Core Web Vitals).

Penutup

Nah, ternyata gampang kan membuat blog Hugo online? Kamu ngga perlu pusing mikirin biaya hosting bulanan. Cukup modal kemauan dan sedikit ketelitian di awal.

Sekarang tugas teknisnya udah selesai. Giliran kamu untuk fokus mengisi blog tersebut dengan konten-konten berkualitas. Pilih salah satu cara di atas yang paling sreg di hati, dan biarkan dunia membaca karyamu.

Selamat berkarya, Sobat! Kalau ada error saat deploy, coba cek lagi versi Hugonya, ya!