Cara Membuat Website Statis dengan Hugo ~ Hugo merupakan salah satu framework website statis yang dapat digunakan secara cuma-cuma alias gratis.

..Selain itu, themes yang tersedia secara gratis juga banyak sekali (bisa sobat cek di themes.gohugo.io).

Hugo dirancang dengan bahasa pemrograman Go, yang merupakan bahasa pemrograman yang dirancang oleh Google.

Website statis yang dibuat dengan Hugo terasa lebih cepat dibandingkan dengan framework lainnya (menurut saya sih hehe).

..Tapi meskipun demikian, penggunaan website statis dengan Hugo ini menurut saya agak ribet kalau ditujukan bagi seorang pemula.

Meskipun ribet, tapi cukup seru dan menyenangkan kok. Jadi sekalipun sobat masih pemula sekalipun, boleh-boleh saja mencoba membuat website statis dengan Hugo. Karena saya juga masih sama-sama pemula, hehe…

..Oke sob, mari kita coba langsung saja cara bikin website statis dengan Hugo 🙂

Oh iya, pada contoh ini, saya menginstall dan membuat website statis dengan Hugo secara localhost. Meskipun demikian, kita tidak perlu memiliki aplikasi webserver seperti XAMPP atau semacamnya. Sebab, Hugo sudah memilikinya sendiri..

#1 Install Hugo di Komputer

Pertama, agar dapat membuat website statis secara localhost dengan Hugo, tentu kita harus menginstall terlebih dahulu Hugo-nya itu..

..Bagaimana cara installnya?

Untuk pengguna macOS atau Linux (yang sudah menginstall homebrew) bisa menginstall Hugo dengan script berikut :

brew install hugo

Jika sobat tidak memiliki homebrew di Linux sobat, bisa mencoba seperti yang dibawah ini.

// Debian atau Ubuntu
sudo apt install hugo

// Fedora
sudo dnf install hugo

Jika sobat menggunakan distro Linux yang lainnya atau pengguna Windows, bisa sobat cek disini cara instalasinya.

Pada gambar diatas, saya sebelumnya sudah menginstall Hugo di komputer saya, jadi muncul keterangan “hugo … is already installed” yang artinya sudah terinstall.

..Jika sobat sudah menginstall Hugo di komputer sobat, selanjutnya coba ketikkan perintah hugo version, untuk melihat versinya.

#2 Cara Membuat Website dengan Hugo

Setelah Hugo berhasil di install, selanjutnya kita bisa langsung membuat website statis dengan Hugo..

Jalankan perintah berikut untuk membuat website dengan Hugo.

hugo new site nama_situs

Misal, saya akan membuat website dengan Hugo dengan nama “lizia”.

Setelah itu, masuk ke dalam directory atau folder website hugo sobat. Kemudian jalankan perintah git init.

cd lizia

git init

#3 Install Themes

Agar dapat digunakan dan muncul tampilan website statisnya, maka kita perlu menginstall tema untuk Hugonya terlebih dahulu..

..Daftar tema untuk website statis Hugo bisa sobat cek di website resminya -> themes.gohugo.io.

Biasanya saya suka pakai tema “Paper”, bisa sobat lihat demonya berikut -> hugo-paper.vercel.app.

Jika sobat juga ingin menggunakan tema yang sama, langsung saja jalankan perintah berikut, untuk menginstall Hugo Paper.

git submodule add https://github.com/nanxiaobei/hugo-paper themes/paper

..Oh iya, ketika hendak menginstall tema, pastikan terminal sobat sudah berada didalam folder atau root directory website Hugo sobat.

Selanjutnya.. edit file config.tom, kemudian tambahkan baris theme = 'paper', untuk menerapkan tema yang sudah di install tersebut. Jangan lupa untuk disimpan terlebih dahulu.

Supaya konfigurasi tema-nya lebih lengkap, bisa sobat tambahkan juga script berikut dibawahnya.

disqusShortname = 'YOUR_DISQUS_SHORTNAME'   # use disqus comments

[params]
  # color style
  color = 'linen'                           # linen, wheat, gray, light

  # header social icons
  twitter = 'YOUR_TWITTER_ID'               # twitter.com/YOUR_TWITTER_ID
  github = 'YOUR_GITHUB_ID'                 # github.com/YOUR_GITHUB_ID
  instagram = 'YOUR_INSTAGRAM_ID'           # instagram.com/YOUR_INSTAGRAM_ID
  mastodon = 'YOUR_MASTODON_LINK'           # e.g. 'https://mastodon.instance/@xxx'
  rss = true                                # show rss icon

  # home page profile
  avatar = 'GRAVATAR_EMAIL'                 # gravatar email or image url
  name = 'YOUR_NAME'
  bio = 'YOUR_BIO'


  # misc
  disableHLJS = true                        # disable highlight.js
  monoDarkIcon = true                       # show monochrome dark mode icon
  gravatarCdn = 'GRAVATAR_CDN_LINK'         # e.g. 'https://cdn.v2ex.com/gravatar/'
  graphCommentId = "YOUR_GRAPH_COMMENT_ID"  # use graph comment (disqus alternative)

Silahkan sobat utik-utik saja konfigurasi yang perlu diubah, ditambah ataupun dihapus.

Jika sudah, jalankan hugo server di terminal sobat, untuk menjalankan website hugo secara localhost.

hugo server

Kemudian kita buka browser, dan akses locahost:1313.

..Loh kok kosong? Iyaps, karena memang belum ada artikelnya.

Untuk menambahkan postingan artikel, silahkan tulis perintah hugo new post/nama-postingan.md.

Pastikan untuk selalu menyertakan extensi .md. Oh iya, hugo servernya boleh sobat matikan dulu dengan menekan CTRL + C. Atau sobat bisa buka tab baru saja di terminal sobat.

Kemudian, silahkan edit file postingan yang sudah dibuat tersebut. Pada bagian draft : true ubah menjadi draft: false. Agar postingannya bisa muncul.

Simpan, lalu jalankan hugo server lagi. Kemudian silahkan sobat cek halaman website statis Hugo sobat di localhost:1313.

Nah kurang lebih seperti itulah tampilan website statis yang dibuat dengan Hugo didalam komputer lokal (localhost).

Kebetulan saya juga membuat website statis dengan Hugo, yang saya host ke github.com. Berikut blognya -> rezaichsani.github.io.

Baca Juga : Cara Install XAMPP di Windows & Install WordPress LocalHost

Kesimpulan..

Jadi kesimpulannya adalah : membuat website dengan Hugo ternyata tidak begitu sulit, serta bisa dijalankan di komputer lokal maupun secara online menggunakan github pages..

Oke sob, mungkin begitu saja mengenai cara membuat website statis dengan Hugo. Semoga bermanfaat daan, terima kasih 🙂 .