Hugo sebenarnya bisa di-hosting di mana saja.

Di Shared Hosting, VPS, Cloud Hosting, Firebase, Netlify, dll.

Pada intinya—untuk hosting hugo—kita hanya perlu meng-upload semua file yang ada di dalam folder public ke web server.

Namun…

Beda tempat hosting, beda lagi cara deploy-nya.

Deploy atau Deployment adalah sebuah proses atau aktifitas untuk membuat aplikasi agar dapat digunakan. 1

Netlify mengklaim:

Proses deployment di Netlify tidak sampai 30 detik.

Apakah benar demikian?

Mari kita coba buktikan…

Apa itu Netlify?

Netlify adalah penyedia layanan hosting untuk static site dengan berbagai fitur menarik.

Netlify menyediakan semua kebutuhan untuk workflow web development zaman now.

Mengapa saya bilang zaman now?

Karena di Netlify tidak menggunakan FTP seperti yang biasa kita temukan pada shared hosting.

Netlify menggunakan Git dan CI/CD untuk melakukan deployment. Kedua alat ini sangat membantu dalam melakukan deployment.

Selain itu, Netlify juga menyediakan fitur untuk mengelola DNS, SSL atau HTTPS diberikan gratis, form, function, dan lain-lain.

Soal Harga bagaimana?

Tenang saja, kabar baiknya Netlify sangat bersahabat dengan kantong mahasiswa. Cek saja di halaman pricing untuk melihat paket hosting yang tersedia.

Harga paket hosting di Netlify

Ada paket Starter, yang ini gratis. Tapi jika ingin berlangganan yang Pro juga bisa.

Saran saya, mulai dulu pakai paket Starter. Kalau ingin fitur yang lebih, baru upgrade ke Pro.

Oh iya, web petanikode juga pakai yang starter dan sudah berjalan hampir selama 2 tahun. 😊

Tapi sepertinya sebentar lagi akan melakukan upgrade, karena kebanjiran trafik yang membuat badwidh-nya cepat habis.

Oh iya, Netlify memberikan jatah 100GB bandwidth untuk paket starter.

Persiapan untuk Hosting Hugo di Netlify

Sebelum kita mulai, ada beberapa hal yang harus dipersiapkan:

  1. Web Hugo yang sudah jadi atau siap untuk di-hosting;
  2. Git;
  3. Akun Netlify (Silahkan daftar di sini).

Pedanftaran di Netlify bisa menggunakan akun Github, Gitlab, Bitbucket, dan alamat email.

Halaman Register Netlify

Silahkan gunakan salah satu.

Jika sudah, mari kita mulai…

Deploy Hugo di Netlify

Langhkah pertama yang harus dilakukan adalah mengupload web yang sudah jadi ke Github, Gitlab, atau Bitbucket.

Silahkan pilih salah satu.

Sebagai contoh, saya akan gunakan blog saya yang di Github. Oh iya, repo-nya boleh public atau private. Bagi netlify, itu gak masalah. Karena akun kita sudah dihubungkan dengan akun Github.

Repository blog saya di github

Kemudian buka Netlify, klik New Site from Git.

Membuat Web baru dari Git

Lalu pilih Github sebagai Git Provider, karena kita menggunakan Github.

Memilih Git Provider

Berikutnya pilih repositori web hugo yang akan di-deploy.

Memilih repositori

Berikutnya kita akan diminta untuk menentukan pengaturan untuk deployment. Seperti branch, perintah untuk build, dan piblish dir.

Menentukan pengaturan deploy

Perintah hugo --minify adalah perintah untuk build web hugo dengan hasil yang sudah dioptimasi. Lalu public adalah direktori hasil dari build hugo.

Setelah itu klik Deploy Site untuk memulai deployment.

Berikutnya akan muncul seperti ini:

Deploy sedang berjalan

Ini artinya website kita sedang di-deploy.

Kita bisa pantau prosesnya dari Deploy Log.

Log deploy

Jika proses deploy sudah selesai, kita bisa lihat hasilnya dengan mengklik tombol Preview.

Hasilnya kira-kira akan seperti ini:

Preview hasil deploy

Selamat 🎉 websitenya sudah mengudara berkat Netlify!

Bagimana Jika Saya Ingin Melakukan Update?

Update adalah sesuatu yang akan sering dilakukan. Saya cukup sering update artikel dan template.

Lalu bagaimana cara update website yang di-hosting di Netlify?

Gampang!

Kita hanya perlu melakukan “git push” saja ke remote repository di Github, Gitlab, atau Bitbucket.

Workflow Netlify

Netlify akan otomatis medeteksi kalau ada commit terbaru di repositori atau branch yang sudah ditentukan, kemudian akan melakukan deploy secara otomatis juga.

Oh ya, kamu harus memperhatikan juga jatah waktu build atau deploy yang diberikan Netlify.

Netlify memberikan 300 build minutes tiap bulan untuk paket starter, artinya dalam sehari kita diberikan 10 menit.

Tapi tenang saja, website dengan konten yang banyak seperti Petani Kode membutuhkan waktu deploy sekitar 1 menit. Artinya, saya bisa deploy sebanyak 10x tiap hari.

Bagaimana jika melebihi batas?

Kita akan diminta upgrade atau membeli add-on untuk penambahan waktu maupun bandwidh. Hal ini bisa kita pantau melalui halaman billing.

Informasi billing di netlify

DNS Manajemen di Netlify

Netlify menyediakan fitur untuk mengelola DNS, ini bisa kita temukan pada menu Domains.

Domain manajemen di Netlify

Kamu bisa menambahkan ataupun membeli domain bari dari sana.

Jika kita sudah memiliki domain dari penyedia hosting yang lain, maka kita bisa arahkan alamat nameserve di CPanel menggunakan nameserver yang disediakan oleh Netlify.

Nameserver netlify

Setelah itu, mungkin akan membutuhkan waktu 2x24 untuk propagasi.

Redirect di Netlify

Subdomain gratis yang diberikan oleh netlify akan tetap bisa dibuka, meskipun kita sudah menggunakan kustom domain.

Domain Gratis: petanikode.netlify.com
Custom Domain: Petanikode.com

Nah, bagaimana caranya agar subdomain tidak bisa diakses?

Ya kita harus melakukan redirect atau pengalihan.

Caranya?

Caranya tambahkan file _redirects pada folder static Hugo dengan isi seperti ini:

# Redirect default Netlify subdomain to primary domain
http://petanikode.netlify.com/* http://www.petanikode.com/:splat 301!
redirect halaman di Hugo

Maka, subdomain akan dialihkan ke domain custom secara permanen.

Asset Optimization

Asset Optimization akan membantu kita melakukan optimasi aset seperti mengecilkan ukuran file HTML, CSS, Javascrip, dan Gambar.

Ini akan meningkatkan kecepatan download dari website.

Cara mengaktifkan fitur ini, kita tinggal masuk ke Site->Settings->Build & Deploy, lalu pilih Post Processing.

Optimisasi aset di Netlify

Nah, pada menu ini.. kita bisa memilih aset mana saja yang akan dioptimisasi.

Jika ingin semuanya dioptimisasi, tinggal centang aja seperti pada gambar di atas.

Tapi, ini akan menambah waktu build dari website.

Environment Variable

Jika ingin mengubah versi Hugo yang digunakan pada Netlify, kita bisa mengaturnya pada Environtment Variable.

Caranya masuk ke menu Site->Settings->Build & Deploy, lalu pilih Environtment.

Di sana ada variabel bernama HUGO_VERSION yang berisi versi dari Hugo yang akan digunakan pada saat build.

Versi Hugo yang digunakan pada Netlify

Ini bisa kita ubah nilainya sesuai dengan kebutuhan.

Oh iya, untuk nomer versi hugo. Kita bisa melihatnya pada halaman ini: https://github.com/gohugoio/hugo/releases

Versi Hugo yang digunakan pada Netlify

Menggunakan File netlify.toml

Jika kamu tidak ingin menggunakan control panel Netlify untuk mengatur websitemu, maka bisa juga menggunakan file netlify.toml.

File ini harus kita tambahkan pada root direktori.

File Netlify

Di sana kita bisa menambahkan beberapa env variabel, build command, redirect, dll.

Apa Selanjutnya?

Nah itu dia cara deploy Hugo di Netlify…

Sebenarnya masih banyak yang belum kita bahas, seperti Form, Identity, Function, dan lain-lain.

Mungkin nanti akan dibahas di artikel yang berbeda.

Atau silahkan kamu eksplore sendiri, biar makin tahu.