Hosting website statis Hugo kamu di Render

Setelah kamu belajar berbagai macam tips dan trik membuat website statis dengan Hugo, baik itu tema yang kamu ambil atau tema buatan sendiri, sekarang waktunya kita menunjukkan hasil karya ini ke dunia! hehe. Alias waktunya kita Hosting :).

Ada banyak pilihan tempat hosting untuk website statis seperti Hugo, termasuk yang menawarkan secara gratis. Salah satunya, yang akan kita lihat sekarang, dan menurut saya paling mudah adalah Render.

Screen Shot homepage Render

Bikin Repository di GitHub

Sebelum kita mulai menggunakan Render, jangan lupa untuk mengupload kode kamu ke service GitHub atau GitLab.

*Kalau kamu belum familiar dengan Git atau Github, bisa belajar Github di sini

Silahkan buat repository kamu di github dan masukkan proyek kamu seperti biasa.

Daftar Render.com gratis

Lalu, silahkan mulai dengan membuat akun di Render. Gratis.

Masukkan email, atau Kamu juga bisa menghubungkan github, gitlab atau google.

Render.com berbaik hati, untuk hosting website statis, kita tidak perlu memasukkan informasi credit card alias membayar.

Berapa fitur untuk static site yang kamu dapatkan langsung

Screen Shot 2020-08-31 at 4.05.25 PM.png

Start new Web Service

Di Render, klik bagian "new web service" atau bikin proyek web service baru. Kita akan diminta untuk memasukkan "public repository URL" dari proyek Hugo yang sebelumnya sudah kita taro di github. Silahkan copy-paste link repository kamu dan pilih reponya.

menghubungkan repo di render

Beberapa setup konfigurasi

Nama Website

*terserah kamu

Environment

pilih "static-site"

Branch Repositorynya

(default master) tidak perlu apa-apa

Di Kolom Build Command, masukkan

hugo --gc --minify

Publis Directory

tulis public

Setelah semua selesai, klik tombol submit (saat ini tulisannya

"CREATE WEB SERVICE".

Render akan mengarahkan kamu ke progress buildnya, tunggu sampai tulisan "your site is live!"

tampilan saat membuat website.png

Sekarang klik link di bawah nama website kamu, dan...

website kamu siap dinikmati oleh semua orang!

Catatan:

Jika Link url Hugo kamu bermasalah, cek di config.toml

isi dari baseURL kamu, silahkan disesuaikan dengan nama URLnya yang baru (nama domainnya)

Bagaimana jika ingin mengupdate konten?

Sama seperti biasa, bikin file dengan "hugo new. ..".

Setelah itu:

1. add dan commit perubahan tersebut di git
2. push kodenya ke github.
3. Di Dashboard render, ada tombol dropdown "manual deploy", klik dan pilih "deploy latest commit"

Auto deploy saat ada perubahan

Render punya fitur untuk membuat proses build website Hugo nya menjadi automatis, cukup push kode baru kamu ke github dan dia akan melakukan perubahannya.

1. Di Dashboard proyek render.com kamu, ke bagian setting.
2. Copy url yang ada di bagian "deploy hook" nya

URL ini perlu kita beritahu untuk repository github yang kita buat.

Sekarang, ke repository github kamu.

Klik setting, bagian webhook, dan "add webhook" (tambahkan webhook baru). paste urlnya dan save webhook baru kita ini. Kosongkan bagian "secret" dan tidak perlu mengubah yang lain.

Screen Shot webhook github

Sekarang, coba lakukan perubahan, Render akan automatis diberitahu oleh github dan membangun website baru kamu.