Cara membuat blog dengan hugo - Sebelumnya di penakode.com telah membahas sekilas tentang apa itu hugo? Sekarang kita akan membahas tentang cara membuat blog atau sebuah web dengan menggunakan Static Site Generator Hugo.

Membangun sebuah blog atau web dengan hugo tidaklah berbeda seperti kita membuat dengan menggunakan HTML. Hugo juga akan membuat file-file berbentuk HTML agar bisa terbaca oleh browser dan menjadi file-file statis. Untuk memulai membuat blog akan saya sampaikan secara bertahap agar dapat mudah dimengerti sehingga pemula pun bisa mengikutinya.

Untuk pembahasan yang akan diterapkan meliputi:

  • Installasi Hugo
  • Struktur Hugo
  • Membuat posting artikel
  • Memulai Server Hugo
  • Memilih Tema

Baiklah mari kita mulai membuat blog dengan mudah step-by-step melalui terminal. Jadi sebelumnya kamu harus familiar dengan git dan text editor karena kita akan membuat blog dengan cara baru yaitu dengan menggunakan text editor.

Installasi Hugo

Hal pertama yang harus dilakukan yang perlu disiapkan yaitu memasang Hugo di desktop atau laptop kamu. Untuk tahap installasi hugo bisa dilakukan sesuai sistem operasi yang berjalan di desktop atau laptop kamu ya. Hugo dapat berjalan di Windows, Linux dan Mac.

Memasang Hugo di Linux

Bagi pengguna linux hugo dapat diinstal melalui brew dengan perintah sebagai berikut:

brew install hugo

Memasang Hugo di Windows

Apabila menggunakan windows kamu bisa menginstal hugo melalui chocolately dengan mengetikan kode berikut:

choco install hugo -confirm

tetapi ada cara lain yang saya lebih suka yang simpel apabila menggunakan windows yaitu:

  1. Download hugo disini, dan yang saya gunakan adalah versi 0.58
  2. Extract file yang sudah di download dan taruh di folder C://hugo/bin
  3. kemudian cek apakah hugo sudah bisa berjalan dan kita cek versi hugo yang digunakan. Buka terminal atau cmd seperti dibawah ini. hugo-version
  4. Apabila versi hugo muncul maka installasi berhasil
note: untuk menggunakan hugo di windows sudah bisa dijalankan tetapi hanya bisa dijalankan di folder C://hugo. Agar hugo bisa dijalankan di folder manapun maka harus mengikuti beberapa settingan berikut ini:
  • buka “view advanced system settings” environtment-variabel
  • pilih “Environtment Variabel”
  • Klik 2x pada pilihan “path”
  • kemudian klik “new” dan tambahkan C:\hugo\bin path
  • lalu klik OK
  • selesai, hugo bisa dijalankan di folder manapun

Menjalankan Hugo

  • untuk memulai membuat blog dengan hugo cukup dengan mengetik perintah “hugo new site nama_blog”

    hugo new site blog
    

    hugo-site

  • jika berhasil, maka hugo akan men-generate file-file secara otomatis

Apakah sudah berhasil membuat website baru sampai disitu?

Belum, karena blog kita belum bisa dijalankan karena belum ada artikel atau content serta memilih tema.

Mari kita lihat struktur file yang sudah dibuat oleh Hugo

Karena hugo sudah berhasil dipasang dan telah membuat nama_blog, kita lihat dulu struktur hugo berikut ini:

blog
    archetypes
    content
    data
    layouts
    static
    themes
    config.toml

archetypes: tempat pendefinisian komponen seperti tag, kategori, tipe artikel seperti yang saya gunakan post dan page.

content: tempat menyimpan file-file statis berupa markdown.

data: tempat menyimpan data seperti konfigurasi, data sosial media, disqus,dll.

layouts: disinilah tempat menyimpan template tampilan dari web kita.

static: folder ini digunakan untuk menyimpan file-file berupa css, javascript ataupun gambar.

themes: ini adalah tempat menyimpan tema yang dapat diunduh dari github atau juga tema yang kita buat sendiri.

config: adalah konfigurasi yang mengatur nama website, url, bahasa atau konfigurasi lain yang akan digunakan.

Membuat Posting Artikel

Mari kita buat postingan artikel pertama kita dengan perintah “hugo new nama_folder/nama_file.md”

C:\hugo>blog>hugo new post/latihan-posting.md

C:\hugo\blog\content\post\latihan-posting.md created

perintah tadi diatas akan membuat file baru bernama latihan-posting.md, untuk melihatnya mari kita lihat dengan menggunakan teks editor.

---
title: "Latihan Posting"
date: 2019-10-15T00:20:58+07:00
draft: true
---

isinya masih kosong karena masih berisi front matter.

Front Matter

Front Matter digunakan untuk mengatur konfigurasi postingan artikel yang dibuat. Default nya terdiri dari judul, tanggal dan draft.

Draft harus dirubah nilainya menjadi false apabila ingin postingan muncul di web hugo.

contoh artikel yang akan diposting

---
title: "Latihan Posting"
date: 2019-10-15T00:20:58+07:00
draft: false
---

### tes membuat artikel

lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum

lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum

lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum

lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum

Menjalankan Server Hugo

Selanjutnya, setelah kita berhasil membuat postingan artikel. Kita akan mencoba menampilkannya di tampilan depan web yang sudah dibuat. Sekarang saatnya menjalankan server:

hugo server

hugo-server

Selanjutnya, silahkan buka browser hugo di http://localhost:1313/.

Ups, koq di browser tidak muncul postingannya? ya, karena kita belum memilih tema hugo, sehingga tampilannya masih blank.

Memilih Tema yang akan digunakan

Hugo memberikan banyak pilihan tema yang bisa dipilih secara gratis. Kita dapat menggunduhnya di https://themes.gohugo.io/.

Silahkan diunduh file temanya atau clone menggunakan git ke folder themes hugo ya. Catatan penting adalah jangan lupa untuk melakukan konfigurasi file config.toml sesuai dengan settingan tema yang diunduh ya supaya tema yang digunakan dapat berjalan maksimal.

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

Disini saya menggunakan tema “Mainroad”

contoh-blog-hugo

contoh-blog-hugo

Penutup

Website atau blog sudah bisa dibuat menggunakan file statis dari hugo. Wajib diingat adalah kita sudah bisa membuat blog atau website secara offline di laptop/desktop dengan menggunakan teks editor seperti cara-cara diatas, apabila mengikuti tutorial cara membuat blog dengan hugo dengan benar akan terasa mudah.

Selanjutnya, kita akan membahas tentang bagaimana menaruh file hugo di hosting.