Instalasi & Konfigurasi Hermit: Hugo - Hermit (2)

17 July 2019

Pada tahap sebelumnya , kita sudah berhasil membuat sebuah site bernama fatoni dengan Hugo.

Congratulations! Your new Hugo site is created in D:\fatoni.

Just a few more steps and you're ready to go:

1. Download a theme into the same-named folder.
   Choose a theme from https://themes.gohugo.io/, or
   create your own with the "hugo new theme " command.
2. Perhaps you want to add some content. You can add single files
   with "hugo new \.".
3. Start the built-in live server via "hugo server".

Visit https://gohugo.io/ for quickstart guide and full documentation.

Tahap berikutnya, kalau kita baca result layar paska pembuatan site di atas adalah mengunduh sebuah theme dan diletakkan di folder themes.

Namun, sebelum kita melakukan tahap penginstalan theme. Ada baiknya kita mengenal nama berikutnya setelah Hugo pada judul tulisan ini.

Hermit

Hermit adalah nama theme yang akan kita gunakan untuk site Hugo yang sudah kita buat sebelumnya. Mengapa saya memilih Hermit? Saya menginginkan desain yang sederhana, elegan, dan punya fitur highlight pada code block. Font yang readable, layout yang responsive sesuai layar device yang dipakai, warna theme yang dark, dan tak kalah pentingnya adalah ringan saat diakses. Hermit, sejauh yang saya lihat, memiliki syarat-syarat itu. Saat melihat pertama kalinya di gallery theme Hugo, saya langsung suka, terlebih desainnya yang simple dan padu. Hermit dibuat oleh Track3 , seorang Hobiis teknologi digital asal china.

Sebelum menginstall Hermit di Hugo. Pastikan komputer kamu sudah terinstal git sebelumnya (cek dengan perintah git --version). Jika belum, click cara-menginstal-git-di-windows.html untuk melihat cara instalasinya.

Instalasi Hermit

Melalui Command Prompt, pergi ke lokasi folder site Hugo yang ingin diinstall theme Hermit. Sebagai contoh yang saya pakai adalah site fatoni.

cd fatoni
# Masuk ke folder fatoni
git init
# Inisiasi git

Jalankan perintah di bawah ini untuk memulai download Hermit:

git submodule add https://github.com/Track3/hermit.git themes/hermit

Hasilnya bisa dilihat pada folder themes. Jika instalasi berhasil maka akan sudah ada folder hermit di dalamnya.

Konfigurasi Hugo

Paska penginstalan Hermit, kamu perlu mengonfigurasi Hugo agar dapat menggunakan theme Hermit. File untuk konfigurasi terletak di folder root, yaitu config.toml.

Pada config.toml, jika dibuka, isinya tiga baris berikut:

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

Lakukan perubahan jika dibutuhkan, misal ganti languageCode"en-us” menjadi “id-id”. Ganti title “My New Hugo Site” dengan “My Blog”, atau namamu —misal “Fatoni's Blog”. Jika site Hugo kamu sudah di-hosting, ubah BashURL dengan url domain yang digunakan agar dapat memanggil file CSS-nya.

Selain melakukan perubahan pada 3 baris konfigurasi tersebut di atas, kamu perlu untuk menambahkan konfigurasi baru untuk theme Hermit.

Jalankan perintah berikut:

echo theme = "hermit" >> config.toml

Hasilnya terdapat satu baris baru di dalam file config.toml. Kemudian di bawah baris theme: “hermit”, tambahkan konfigurasi Hermit yang bisa kamu lihat di dalam folder themes/hermit/exampleSite/config.toml:

Hasil akhirnya, file config.toml yang kita punya sekarang:

baseURL = "http://example.org/"
languageCode = "en-us"
title = "My New Hugo Site"
theme = "hermit"
# enableGitInfo = true
pygmentsCodefences  = true
pygmentsUseClasses  = true
# hasCJKLanguage = true  # If Chinese/Japanese/Korean is your main content language, enable this to make wordCount works right.
rssLimit = 10  # Maximum number of items in the RSS feed.
copyright = "This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License." # This message is only used by the RSS template.
enableEmoji = true  # Shorthand emojis in content files - https://gohugo.io/functions/emojify/
# googleAnalytics = "UA-123-45"
# disqusShortname = "yourdiscussshortname"

[author]
  name = "John Doe"

[blackfriday]
  # hrefTargetBlank = true
  # noreferrerLinks = true
  # nofollowLinks = true

[taxonomies]
  tag = "tags"
  # Categories are disabled by default.

[params]
  dateform        = "Jan 2, 2006"
  dateformShort   = "Jan 2"
  dateformNum     = "2006-01-02"
  dateformNumTime = "2006-01-02 15:04 -0700"

  # Metadata mostly used in document's head
  # description = ""
  # images = [""]
  themeColor = "#494f5c"

  homeSubtitle = "A minimal and fast theme for Hugo."
  footerCopyright = ' · CC BY-NC 4.0'
  # bgImg = ""  # Homepage background-image URL

  # Prefix of link to the git commit detail page. GitInfo must be enabled.
  # gitUrl = "https://github.com/username/repository/commit/"

  # Toggling this option needs to rebuild SCSS, requires Hugo extended version
  justifyContent = false  # Set "text-align: justify" to `.content`.

  relatedPosts = false  # Add a related content section to all single posts page

  # Add custom css
  # customCSS = ["css/foo.css", "css/bar.css"]

  # Social Icons
  # Check https://github.com/Track3/hermit#social-icons for more info.
  [[params.social]]
    name = "twitter"
    url = "https://twitter.com/"

  [[params.social]]
    name = "instagram"
    url = "https://instagram.com/"

  [[params.social]]
    name = "github"
    url = "https://github.com/"

[menu]

  [[menu.main]]
    name = "Posts"
    url = "posts/"
    weight = 10

  [[menu.main]]
    name = "About"
    url = "about-hugo/"
    weight = 20

Simpan file tersebut.

Langkah terakhir pada tahap ini yaitu mencoba menjalankan server Hugo agar dapat dilihat di web browser.

hugo server

Buka web browser kamu, ketik pada address bar: localhost:1313, maka akan tampil:

Tampilan Halaman Depan Hugo Hermit

Selamat, Hugo kamu sudah dapat tampil di localhost.

Tahap berikutnya adalah membuat posting-an pertama dengan Hugo, yang akan kita coba buat di tulisan berikutnya.

17 July 2019