Tutorial membuat static site memakai Hugo

Tertarik dengan kecepatan situs salah seorang teman, mas Kurnia Ramadhan, dengan websitenya karangan.id, saya akhirnya iseng ingin tahu websitenya itu dijalankan memakai apa.

Dari footer, ada keterangan bahwa websitenya dijalankan memakai Hugo!

Ok, jika dilihat dari segi pemakaian memory, Hugo ini tidak memerlukan Nginx, tidak memerlukan Php sebagai pemroses filenya, melainkan hanya satu file saja, yaitu hugo itu sendiri, Jadi misalnya hugo dijalankan pada ip dan port 80, maka bisa otomatis resolve ke domain, dan tentunya bisa portable alias mudah dipindahkan.

Untuk bisa menjalankan Hugo, bisa dengan menginstallnya, ataupun langsung mendownload filenya dari Github

Kali ini saya ingin menjalankan Hugo langsung dari filenya, tanpa proses install, pada sebuah vps Debian 8 64bit

 

  • Buat direktory untuk penyimpanan file

  • Download hugo

  • Extract hugo

  • Copy hugo ke /usr/bin/hugo

  • Coba jalankan hugo dimanapun, jika berhasil maka akan muncul seperti dibawah

 

Pembuatan static site

  • Sekarang kita pindah ke /var/www/hugo untuk membuat static sitenya

Akan muncul direktori seperti dibawah :

  • Salah satu themes kesukaan saya yaitu Hyde-Y bisa dipakai untuk contoh kali ini :

  • Konfigurasi /var/www/hugo/config.toml

  • Selanjutnya kita coba memberikan perintah kepada hugo untuk membuat contoh post

Akan terbuat file dengan lokasi /var/www/hugo/content/post/my-first-post.md. Secara default, Hugo akan membaca file yang disimpan pada direktori content/post dan menampilkan pada halaman posts.

  • Coba kita jalankan hugo server dengan perintah berikut jika ingin mengakses memakai IP, selama proses testing

Silakan sesuaikan IP dan portnya, kemudian coba buka ip dan port tersebut dari browser, dan kita akan melihat contoh halamannya.

Untuk menjalankan Hugo saat boot, bisa dengan menambahkan baris di /etc/rc.local ataupun mengikuti tutorial yang ada di internet.

Keuntungan memakai Hugo, adalah kita hanya perlu mengkompress satu direktory untuk kemudian dijalankan di tempat lain, tanpa perlu mengatur konfigurasi webserver.

  • Setelah merasa siap untuk live, kita perlu menjalankan Hugo agar resolve ke domain tanpa menampilkan port

  • Dan untuk keperluan proxy dari Nginx ke Hugo, bisa dengan memakai contoh konfigurasi Nginx saya :

Dengan memakai perintah diatas, maka domain erawan.space dapat diakses memakai www ataupun tanpa www, dengan kondisi memakai https

Contoh tutorial ini, bisa saya jalankan pada Raspberry Pi dengan memory 512MB, maupun VPS dari Prometeus dengan memory 50MB 🙂

4 thoughts on “Tutorial membuat static site memakai Hugo

  1. Keren banget kang tutorialnya 🙂

    Saya make Caddyserver sebagai servernya, kemudian saya tambahin plugin hugo di caddy, sehingga saya bisa nulis artikel via web dan bisa langsung compile postingan dengan hugo via web juga. Aman dan kenceng kang, karena cuma html doank dan enak backupnya.

    • Wah makasih ilmunya mas 😀

      Kemarin saya lihat dari postingan, memakai caddy dan plugin file manager. Untuk caddy sendiri, apakah bisa untuk multisite mas?
      Karena di vps ini, ada beberapa domain yang saya host

Leave a Comment