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-2020-08-31-at-3-17-57-PM.pngScreen Shot homepage Render


[[table-content]]


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.pngScreen 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.


Screen-Shot-2020-08-31-at-3-28-32-PM.pngmenghubungkan 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!"


Screen-Shot-2020-08-31-at-3-34-20-PM.pngtampilan 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-2020-08-31-at-4-11-23-PM.pngScreen Shot webhook github



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



hugo
avatar hilmanski

Ditulis oleh @hilmanski

"luaskan ilmu & luaskan manfaat"