Dulu pernah punya website sendiri, kemudian mati karena tidak ter-maintain dan keburu expire domain-nya. Kemudian kepingin buat lagi tapi cari yang gratis akhirnya ke Medium. Kemudian lagi, kepingin punya website sendiri yang bener-bener website sendiri lumayan biar di CV ada website-nya gitu. Awalnya agak-agak males karena harus setup Laravel dari awal, install database, dan lain-lain. Kemudian ngobrol dengan Babang Feri kalau beliau buat web pakai Hugo.

Pada artikel ini saya akan berbagi cara mudah install Hugo dan cara post artikel. Disclaimer dulu, artikel ini instalasi versi saya ya berdasarkan dokumentasi dan pengalaman ya. Kalau ada yang berbeda, bisa di sesuaikan atau kembali ke dokumentasi asli Hugo.

Apa itu Hugo

Hugo adalah static web generator yang dibuath menggunakan bahasa pemrograman Go. Penggunaan Hugo ini sangat mudah antara lain untuk setting up ya tinggal install Golang di komputer, setelah terinstall setup file configuration, kemudian yang paling unik, semua file postingan dalam bentuk Markdown (*.md). Jadi ya kita juga harus paham bagaimana format penulisan Markdown. Tapi sudah banyak dibahas di internet silakan googling.

Namanya static web artinya setiap post kita harus koding ulang menjadi file file terpisah. Tidak seperti Wordpress yang merupakan CMS (Content Management System) dimana kita bisa membuat postingan di dalam website. Memang secara teknikal dibutuhkan kemampuan koding, tapi tidak harus. Yang penting bisa install dan paham cara menggunakan Hugo sudah cukup. So, banyak membaca dokumentasi Hugo is a must.

Instalasi

Dokumentasi instalasi Hugo bisa di lihat pada website Hugo. Beberapa hal yang perlu di install di komputer adalah.

1. Git

Git digunakan untuk menyimpan source code pada Github atau repo manapun. Selain itu, untuk menggunakan template web kita juga akan men-submodule-kan repository template ke dalam source code kita. Asumsikan kita sudah paham bagaimana menggunakan git, jadi kalau ada yang bingung, silakan kembali pelajari git. Link instalasi

2. Golang

Karena Hugo dibuat menggunakan Golang, maka kita juga harus meng-install-nya di komputer supaya file Markdown dapat ter-generate menjadi HTML dan CSS. Link instalasi

3. Visual Studio

Tentu saja sebagai editor untuk proses koding. Link instalasi

Membuat Web di Localhost

Pada tahap ini, asumsikan Hugo sudah terinstall dengan baik dan lengkap. Selanjutnya kita akan membuat sebuah website menggunakan Hugo.

Cek apakah Hugo sudah terinstall

Eksekusi command di bawah untuk memastikan Hugo sudah terinstall atau belum, kemudian akan terlihat versi Hugo.

hugo version

Inisiasi Source Code Hugo

Buka terminal atau command promp, arahkan ke lokasi penempatan source code. Kemudian eksekusi command dibawah ini:

hugo new site <nama-website>

Kemudian akan terlihat dengan jelas apa yang selanjutnya harus kita lakukan.

Just a few more steps...

1. Change the current directory to /your/dir/nama-website.
2. Create or install a theme:
   - Create a new theme with the command "hugo new theme <THEMENAME>"
   - Or, install a theme from https://themes.gohugo.io/
3. Edit hugo.toml, setting the "theme" property to the theme name.
4. Create new content with the command "hugo new content <SECTIONNAME>/<FILENAME>.<FORMAT>".
5. Start the embedded web server with the command "hugo server --buildDrafts".

Jangan lupa git init pada folder.

Memahami Fungsi Folder

Setelah source Hugo terbentuk, akan terlihat beberapa file dan folder. Saya hanya akan membahas yang sekiranya penting untuk kebutuhan pembuatan website saja ya. Untuk pembuatan template sendiri, semoga ada waktunya saya bahas di lain artikel.

nama-website
    -- archetype
    -- assets
    -- content -------> lokasi file kontent dan folder kategori
    -- data
    -- i18n
    -- layouts
    -- static -------> lokasi file-file assets seperti gambar, favicon, dan lain-lain
    -- themes -------> lokasi theme yang akan digunakan untuk tampilan website
    -- hugo.toml -------> file konfigurasi (penting)

Install Theme

1. Kunjungi web Hugo Theme. Klik salah satu theme yang di inginkan.
2. Klik tombol Download sehingga akan terbuka halaman Github.
3. Copy URL Github layaknya mau clone source code.
4. Eksekusi command di bawah untuk clone repo tersebut sebagai submodule di folder themes.

cd themes
git submodule add <repo-github>

Jalankan di Localhost

Semudah eksekusi command dibawah ini di dalam folder utama source code.

hugo serve

Kemudian buka browser ke localhost:1313.

Konfigurasi Website

File konfigurasi ada di hugo.toml. Hugo memiliki base configuration seperti yang ada di Dokumentasi. Tinggal di ikuti saja.

Namun, setiap theme bisa memiliki konfigurasi yang berbeda-beda. Maka, pelajari juga dokumentasi di repo Github theme yang kalian pakai.

Membuat Postingan

Untuk membuat post juga cukup simpel, tinggal eksekusi command dibawah ini

hugo new content/post/<judul-postingan>

Maka, akan terbentuk file *.md baru dan tinggal kalian tulis menggunakan format Markdown.

Selanjutnya

Setelah website terbentuk, suatu saat akan saya buat artikel lain untuk deploy website Hugo kita.

• Next Post →