Membuat blog menggunakan Hugo | #sepekan_seproject

6 min readJan 8, 2023

Project pertama dari series #sepekan_seproject

Bismillah,

Setelah lama ada di kepala, Alhamdulillah tulisan pertama tentang #sepekan_seproject akhirnya bisa di tulis. Di tulisan pertama ini aku mau membuat sebuah mini project yaitu membuat sebuah website CMS menggunakan HUGO.

Sebelum lebih jauh ke teknis nya, mari kita berkenalan dulu dengan si Hugo ini.

Apa itu Hugo ?

Jadi Hugo adalah sebuah framework yang digunakan untuk membuat sebuah content atau singkatnya CMS menggunakan bahasa Go-lang. Mungkin pada bertanya ya kenapa namanya Hugo, sebetulnya aku juga nggak terlalu tahu tapi kemungkinan besar kenapa nama nya Hugo karena di buat dengan bahasa Go-lang.

Lantas, kenapa kita harus memakai Hugo ?

Sebetulnya di luar sana banyak website untuk membangun sebuah content atau CMS seperti Gatsby, Next js dan wordpress yang paling populer, namun aku suka saja sama stuktur dan kecepatan dari si Hugo ini, karena seperti yang ia cantumkan di website resminya bahwa Hugo adalah

The world’s fastest framework for building websites

Contoh website yang di bangun menggunakan Hugo seperti

Setelah kita cukup berkenalan dengan si Hugo dan kenapa kita memakai si Hugo ini mari kita lanjutkan dengan langsung membuat blog menggunakan si Hugo ini, namun sebelumnya di laptop teman-teman harus sudah terinstall beberapa hal berikut ini :

Terinstall Git
Terinstall Go lang
Terinstall Hugo

Mari kita install satu persatu, disini saya menggunkan system operasi Linux ya, jadi bagi teman-teman yang menggunakan Macbook ataupun windows bisa menyesuaikan saja ya,

Install Git

Untuk meng-install git di dalam linux, bisa ketikkan perintah berikut di terminal nya

sudo apt install git

Setelah berhasil ter-install di laptopnya, teman-teman bisa check dengan mengetikan perintah berikut di terminal

git --version

Disini saya menggunakan git versi 2.25.1

Nah kalau git sudah terinstall, mari lanjut ke meng-install bahasa go di laptop kita

Install Go-lang

Untuk meng-install Go-lang ada beberapa cara, namun disini saya akan menggunakan apt seperti meng-install git sebelumnya. Ketikkan perintah berikut di terminal nya

sudo apt install go

Setelah selesai proses install nya, untuk memastikan teman-teman berhasil atau tidak meng-install nya bisa ketikkan perintah berikut di terminalnya

go version

Setelah berhasil meng-install git dan go, sekarang kita akan meng-install si Hugo nya

Install Hugo

Untuk meng-install Hugo di laptopnya, sebetulnya ada dua cara. Namun disini saya akan meng-install versi terbarunya langsung dari github, nah teman-teman bisa mengetikkan perintah berikut di terminalnya

wget https://github.com/gohugoio/hugo/releases/download/v0.109.0/hugo_extended_0.109.0_linux-amd64.deb

Karena extensionnya berbentuk deb, maka kita perlu untuk meng-extract nya lebih dahulu. Ketikkan perintah dibawah ini di terminal

sudo apt deb hugo_extended_0.109.0_linux-amd64.deb

Nah setelah berhasil, teman-teman bisa check di terminalnya dengan mengetikan perintah berikut

hugo version

Disini saya menggunakan hugo versi 0.109.0

Setelah semua yang kita butuhkan sudah ter-install di laptop kita, sekarang tinggal yang paling ditunggu-tunggu, yaitu meng-install Hugo nya.

Membuat blog sederhana menggunakan hugo

Untuk membuat sebuah blog di Hugo, sangat simple. Teman-teman cukup ketikkan perintah berikut di terminalnya

hugo new site [Nama folder untuk project blognya]

Nah disini saya akan membuat sebuah project hugo dengan nama blog,

hugo new site blog

Nah ketika teman-teman berhasil meng-install hugo, maka akan ada tulisan seperti di atas. Jangan bingung itu tandanya hugo nya sudah berhasil di buat.

Congratulations :)

Namun jangan berpuas diri dulu ya, itu baru awal.

Mari kita lanjutkan…

Nah untuk menjalankan hugo di local server, kita bisa mengetikkan perintah berikut di terminal

hugo server

Ketika teman-teman berhasil men-running perintahnya maka akan ada pesan seperti di atas.

Nah untuk melihat hasil nya, teman-teman bisa ketikkan http://localhost:1313/ di browser kesayangan teman-teman.

Ketika berhasil di running di browser maka akan terlihat seperti gambar di atas, namun kenapa tulisannya itu Page Not Found ? karena kita belum kasih apapun ya, itu masih default dari si Hugo nya.

Nah kita akan membuat sebuah tulisan sederhana saja yang meng-indikasikan bahwa kita berhasil meng-edit file index hugo nya.

Namun sebelum itu, ketikkan perintah berikut di terminalnya supaya si local server nya mati.

ctrl + c

Setelah berhasil di matikkan local servernya

Nah untuk meng-update file index.html nya, maka kita perlu meng-edit nya di text editor supaya mudah. Disini saya menggunakan vim sebagai text-editor nya, teman-teman bisa menggunakan yang biasa teman-teman pakai.

Nah untuk file nya karena by default tidak ada, maka kita perlu membuat dulu file nya di dalam folder /layout. Nah untuk membuat file di dalam linux teman-teman bisa ketikkan perintah berikut di terminalnya

Nah setelah file index.html nya sudah tersebut, maka tambahkanlah kode berikut di dalam file nya

 <!doctype html>
  1 <html>
  2 <head>
  3   <meta charset="UTF-8">
  4   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5   <script src="https://cdn.tailwindcss.com"></script>
  6 </head>
  7 <body>
  8   <h1 class="text-3xl font-bold text-center h-screen flex justify-center items-center bg-slate-900 text-white">
  9     Selamat Datang Di Blog Syafiq
 10   </h1>
 11 </body>
 12 </html>

Setelah berhasil di save, maka kita perlu untuk menghidupkan kembali local server hugo nya dengan perintah di bawah ini

hugo server

Setelah local server hugo berhasil di running, coba masuk lagi ke browser dan ketikkan di url nya http://localhost:1313

Ketika berhasil maka akan tampil halaman seperti gambar di atas.

congratulations, teman-teman sudah berhasil membuat sebuah blog sederhana.

Aku ucapkan congratulation karena telah berhasil membuat sebuah blog sederhana, meskipun ini hanya baru sekedarnya. InsyaAllah next week saya akan update lagi tulisannya, ditunggu saja ya >_<

Namun sebelum berakhir, mari kita buat kesimpulannya terlebih dahulu, sejauh ini kita sudah belajar tentang :

Meng-install git, go-lang dan hugo di local komputer kita
Membuat starter template hugo di local komputer kita
Men-running hugo di local server kita
Meng-update content hugo dengan html sederhana

Wah, tidak terasa ya…

Teman-teman sudah belajar banyak di artikel kali ini, semoga bermanfaat ya :)

Kalau ada pertanyaan ataupun saran dan kritik bisa sampaikan di kolom komentar atau DM langsung saya di https://www.instagram.com/syafiqrzf/

Terima kasih sudah membaca artikel ini, insyaAllah series #sepekan_seproject di tiap minggunya di tahun ini akan terus ada. Minta do’a dan semangat dari teman-teman semuanya ya,

See u in the next article guys >_<

Big thanks to Petani kode