Cara Membuat Website Statis dengan Framework Hugo di LocalHost

Cara Membuat Website Statis dengan Framework Hugo di LocalHost ~ Hugo merupakan sebuah framework untuk membuat website statis yang cukup mudah digunakan..

Jika pada umumnya framework website dibuat dengan bahasa PHP atau JavaScript, maka Hugo agak berbeda karena dibuat dengan menggunakan bahasa Go (Golang) yang merupakan bahasa pemrograman yang di kembangkan oleh Google.

Disini, saya tentu tidak akan menjelaskan dengan detail mengenai apa itu Hugo? Karena sejujurnya saya juga masih belum begitu paham juga mengenai framework ini.

Akan tetapi, disini saya akan berbagi bagaimana cara menggunakan Hugo (membuat website statis dengan Hugo di localhost).

Berikut ini adalah contoh website sederhana saya yang saya bikin dengan Hugo di localhost.

Cara Membuat Website Statis dengan Framework Hugo — Make using HUGO

Daftar Isi show

Menginstall Hugo di macOS & Linux

Agar bisa membuat website statis dengan Hugo di localhost, pertama kita harus menginstall Hugo tersebut di sistem yang kita gunakan.

Jika sobat menggunakan macOS atau Linux, sobat bisa menjalankan command berikut di terminal sobat.

brew install hugo

Jika sobat belum menginstall brew di Linux sobat, sobat bisa menggunakan command berikut.

// Debian or Ubuntu
sudo apt install hugo

// Fedora
sudo dnf install hugo

Membuat Website Dengan HUGO

Membuat website dengan Hugo sangat mudah, kita hanya perlu menjalankan command berikut di terminal.

hugo new site rezaspace

Kemudian secara otomatis kita akan dibuatkan folder bernama ex: “rezaspace”. Kemudian masuk ke directori tersebut dan jalankan perintah perintah berikut.

cd rezaspace

git init

Sampai disini, pembuatan website dengan hugo sudah berhasil, hanya saja masih belum dapat diakses sebelum kita menambahkan tema didalamnya.

Install Tema Untuk Hugo :

Sobat bisa mencari tema yang sobat sukai di themes.gohugo.io, pada contoh ini saya menggunakan tema “paper“.

Install tema “paper” dengan command dibawah ini. Pastikan sobat berada di folder website hugo sobat.

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

Setelah tema di install, buka file config.toml di dalam folder website hugo sobat. Kemudian tambahkan baris berikut di config.toml agar temanya bisa muncul.

baseURL = 'http://example.org/'
languageCode = 'en-us'
title = 'My New Hugo Site'
theme = 'paper'

Untuk baseURL, languageCode dan title, bisa sobat ganti sesuai kebutuhan sobat.

Selanjutnya, jalankan command di bawah ini untuk menjalankan server hugo di localhost.

hugo server

Oh iya, karena Hugo merupakan website statis yang tidak membutuhkan database, jadi kita bisa menjalankan langsung perintah hugo server tanpa bantuan aplikasi web server localhost seperti XAMPP.

Setelah menjalankan hugo server, sobat bisa cek di browser dengan alamat yang tertera ex: localhost:1313.

Loh kok kosong?.. Yaps, karena kita belum menambahkan konfigurasi lainnya di config.toml. Agar tampilannya sesuai dengan tema paper yang sudah ada diatas, sobat bisa copy script berikut di config.toml.

baseURL = 'localhost:1313'
languageCode = 'en-us'
title = 'reza.space'
theme = 'paper'

disqusShortname = 'rezaichsani' 

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

  # header social icons
  twitter = 'rezaichs'
  github = 'RezaIchsani'
  instagram = 'rezaichs'


  # home page profile
  avatar = '[email protected]' # gravatar email or image url
  name = 'Reza Ichsani'
  bio = 'Fullstack Developer'

  [menu]

  [[menu.main]]
    identifier = "about"
    name = "About"
    url = "/about/"
    weight = 10
  [[menu.main]]
    identifier = "contact"
    name = "Contact"
    url = "/contact/"
    weight = 20
  [[menu.main]]
    identifier = "blog"
    name = "Blog"
    url = "/post/"
    weight = 30
  
[taxonomies]
  category = 'categories'
  tag = 'tags'

  # 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)

Ubah saja sesuai kebutuhan sobat, kemudian simpan dan coba lihat kembali halaman website Hugo sobat.

Nah sekarang sudah ada sedikit perubahan, terdapat menu dan juga sosial media di bagian navigasinya.

Selanjutnya, kita perlu menambahkan postingan atau artikel baru di website Hugo yang sudah kita buat.

Jalankan command berikut untuk membuat artikel baru.

hugo new post/hello-world.md

Pastikan selalu menyertakan extensi .md di akhir nama artikel yang akan kita buat. Karena Hugo menggunakan markdown untuk membuat setiap postingan ataupun halaman.

Lalu buka folder website Hugo sobat, kemudian di folder content/post/ terdapat file baru bernama hello-world.md, yang sudah dibuat sebelumnya.

Pada bagian title bisa sobat ganti namanya, kemudian di bagian draft yang awalnya true ubah menjadi false. Agar postingannya ter publis.

Simpan, kemudian coba lihat kembali website Hugo sobat di browser.. Pastikan sobat sudah menjalankan hugo server.

Yeay.. kita sudah berhasil membuat website dengan Hugo di localhost. Selanutnya sobat bisa bereksperimen sendiri untuk mengetahui lebih banyak tentang website berbasis framework Hugo.

Kesimpulannya..

Hugo merupakan framework website statis yang dibuat menggunakan bahasa Go. Website dengan Hugo tidak membutuhkan database, namun untuk membuat artikel baru kita membutuhkan teks editor, seperti VS Code ataupun Vim.

Kelihatannya memang agak ribet, namun kalau sobat sudah mencobanya, biasanya akan tertarik untuk menggunakan Hugo. Seperti yang saya alami, hehe..

Oke sob, sekian cara membuat website statis dengan framework Hugo, semoga bermanfaat. Terima kasih ^_^.