Punya blog bagus, seo friendly tapi URL masih numpang itu rasanya kaya blogspot ga si? Makanya, bahasan cara custom domain di Hugo ini penting banget buat kamu yang pengen naikin branding blog statis tanpa ribet. Aku bakal tunjukin prosesnya biar url blogmu jadi lebih profesional dan gampang diingat orang.
Daftar Isi
Persiapan DNS Record
Hal pertama yang wajib kamu urus adalah pengaturan di registrar tempat kamu beli domain. Kamu perlu mengarahkan domain tersebut ke server hosting yang kamu pakai. Biasanya ada dua jenis record yang paling sering dioprek yaitu A Record dan CNAME Record. Kalau kamu pakai subdomain seperti blog.domainkita.com maka CNAME jadi pilihan utama. Tapi buat domain utama atau naked domain kamu butuh A Record yang mengarah ke IP address penyedia hosting seperti GitHub Pages, Cloudflare Pages atau Netlify.
Atur BaseURL di Konfigurasi
Salah satu kesalahan umum yang sering terjadi adalah lupa ganti pengaturan dasar di dalam file konfigurasi Hugo. Kamu harus memastikan baseURL sudah mengarah ke domain baru supaya semua link internal dan aset gambar bisa termuat dengan benar. Coba cek file hugo.toml atau config.toml kalau pakai .toml, hugo.yaml atau config.yaml kalau pakai .yaml di root project kamu dan sesuaikan baris kodenya dengan nama domain yang sudah kamu beli.
baseURL = 'https://www.namadomainkita.com/'
languageCode = 'id-id'
title = 'Blog Hugo Kita'File CNAME Khusus GitHub Pages
Buat kamu yang hosting di GitHub Pages ada satu file krusial yang ngga boleh ketinggalan. GitHub butuh file bernama CNAME (huruf kapital semua tanpa ekstensi) yang diletakkin di dalam folder static. Isinya cuma satu baris yaitu nama domainmu. Kalau file ini nggak ada, GitHub bakal sering mereset custom domain setiap kali kamu melakukan push update baru dari repository lokal.
www.namadomaikita.comKonfigurasi DNS Record Lengkap
Bagian ini adalah inti dari segala proses custom domain hugo. Kamu harus masuk ke dashboard registrar tempat kamu beli domain lalu cari menu bernama DNS Management atau Zone Editor. Tujuan kita di sini adalah memberitahu domain kamu agar bisa mengarah ke alamat server tempat file Hugo kamu disimpan. Kita akan menggunakan contoh konfigurasi untuk GitHub Pages karena ini yang paling umum dipakai pengguna Hugo.
Mengatur A Record untuk Apex Domain
Apex domain atau naked domain adalah alamat situs kamu tanpa awalan www seperti namadomainkita.com. Untuk menghubungkan ini kamu perlu membuat A Record yang mengarah ke IP Address server GitHub. Kamu wajib memasukkan keempat IP Address berikut ini satu per satu ke dalam daftar record kamu agar koneksi lebih stabil dan punya cadangan jika salah satu server down.
| Type | Name / Host | Value / Target |
|---|---|---|
| A | @ | 185.199.108.153 |
| A | @ | 185.199.109.153 |
| A | @ | 185.199.110.153 |
| A | @ | 185.199.111.153 |
Simbol @ pada kolom Name mewakili root domain kamu. Pastikan tidak ada A Record lain selain empat IP di atas yang mengarah ke host @ agar tidak terjadi konflik alamat IP yang bisa membuat situs gagal diakses.
Mengatur CNAME untuk Subdomain WWW
Selain domain utama kamu juga pasti ingin blog bisa diakses menggunakan awalan www. Untuk itu kamu perlu membuat CNAME Record. Record ini berfungsi sebagai alias yang akan meneruskan pengunjung dari www.namadomain.com ke alamat asli repository kamu.
| Type | Name / Host | Value / Target |
|---|---|---|
| CNAME | www | username.github.io |
Isi kolom Value dengan URL standar GitHub Pages kamu (biasanya username.github.io atau organisasi.github.io). Jangan arahkan CNAME ke IP Address tapi arahkan ke nama host. Kelebihan menggunakan CNAME adalah jika GitHub mengubah IP server mereka di masa depan domain kamu akan tetap aman karena CNAME akan mengikuti perubahan tersebut secara otomatis.
Pengaturan di Netlify
Kalau kamu tim Netlify caranya jauh lebih simpel karena antarmukanya sangat enak dilihat. Kamu tinggal masuk ke bagian Domain Management di dashboard project. Di sana ada opsi Add custom domain dan Netlify bakal otomatis mendeteksi konfigurasi DNS kamu. Netlify biasanya langsung mengurus sertifikat SSL otomatis lewat Let’s Encrypt jadi blogmu langsung aman dengan HTTPS tanpa perlu nih keluarin biaya tambahan.
Verifikasi SSL dan HTTPS
Setelah semua pengaturan selesai kamu perlu memastikan gembok hijau atau HTTPS sudah aktif. Jangan biarkan pengunjung mengakses blog lewat HTTP biasa karena browser modern bakal ngasih peringatan kalau situs kamu nggak aman. Baik GitHub Pages maupun Netlify punya opsi Enforce HTTPS yang harus kamu centang supaya semua trafik dipaksa lewat jalur aman dan data pengunjung lebih terlindungi.
