Cara Hosting Hugo di Netlify, Cepat tidak Sampai 30 detik..
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.
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 pernah pakai yang starter dan sudah berjalan hampir selama 2 tahun. 😊
Tapi karena ramainya pengunjung, membuat bandwidth-nya cepat habis. Netlify memberikan jatah 100GB bandwidth per bulan untuk paket starter.
Jika melewati batasan bandwidth tersebut, websitemu tidak akan bisa dibuka.
Persiapan untuk Hosting Hugo di Netlify
Sebelum kita mulai, ada beberapa hal yang harus dipersiapkan:
- Web Hugo yang sudah jadi atau siap untuk di-hosting;
- Git;
- Akun Netlify ( Silakan daftar di sini).
Pendaftaran di Netlify bisa menggunakan akun Github, Gitlab, Bitbucket, dan alamat email.
Silakan gunakan salah satu.
Jika sudah, mari kita mulai…
Deploy Hugo di Netlify
Langkah pertama yang harus dilakukan adalah meng-upload web yang sudah jadi ke Github, Gitlab, atau Bitbucket.
Silakan 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.
Kemudian buka Netlify, klik New Site from Git.
Lalu pilih Github sebagai Git Provider, karena kita menggunakan Github.
Berikutnya pilih repositori web hugo yang akan di-deploy.
Berikutnya kita akan diminta untuk menentukan pengaturan untuk deployment. Seperti branch, perintah untuk build, dan publish dir.
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:
Ini artinya website kita sedang di-deploy.
Kita bisa pantau prosesnya dari Deploy Log.
Jika proses deploy sudah selesai, kita bisa lihat hasilnya dengan mengklik tombol Preview.
Hasilnya kira-kira akan seperti ini:
Selamat 🎉 websitenya sudah mengudara berkat Netlify!
Bagaimana 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.
Netlify akan otomatis mendeteksi 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 bandwidth. Hal ini bisa kita pantau melalui halaman billing.
Manajemen DNS di Netlify
Netlify menyediakan fitur untuk mengelola DNS, ini bisa kita temukan pada menu Domains.
Kamu bisa menambahkan ataupun membeli domain bari dari sana.
Jika kita sudah memiliki domain dari penyedia hosting yang lain, maka kita bisa arahkan alamat nameserver di CPanel menggunakan nameserver yang disediakan oleh 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: Petani Kode.comNah, 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!
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, JavaScript, 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.
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 Environment Variable.
Caranya masuk ke menu Site->Settings->Build & Deploy, lalu pilih Environment.
Di sana ada variabel bernama HUGO_VERSION yang berisi versi
dari Hugo yang akan digunakan pada saat build.
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
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.
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 silakan kamu explore sendiri, biar makin tahu.