Mudah Membuat Web Hugo Menggunakan Hugo

 

Hugo merupakan platfrom yang berfungsi untuk membuat website dengan menggunakan bahasa Go. Sama halnya dengan wordpress, dengan menggunakan hugo kamu bisa membuat sebuah halaman website.

Selain hal tersebut hugo juga terbilang cepat dari jekyll, Octopres, dll. Sebelum memulai membuat web menggunakan hugo, ada beberapa alat yang di perlukan yaitu.

• git untuk deploy repository ke hugo.
• Go bahasa pemograman golang.
• hugo mesin untuk membuat blog

Untuk menginstal git di linux gunakan perintah berikut.

$ apt install git
$ git --version

Kemudian instal golang ke dalam linux, jika belum terinstal kamu bisa menginstalnya dengan menggunakan perintah berikut.

$ apt install go
$ go --version

Jika git dan golang telah terinstal, langkah berikutnya ialah menginstal hugo. Silahkan buka repository hugo.

Sebagai contoh kita akan menginstal hugo versi0.107.0 mennggunakan perintah wget.

$ wget https://github.com/gohugoio/hugo/releases/download/v0.107.1/hugo_0.107.1_Linux-64bit.deb
$ apt deb hugo_0.107.1_Linux-64bit.deb

Periksa apakah sudah berhasil terinstal atau belum.

$ hugo version

Membuat blog baru dengan hugo

Untuk memulai membuat blog baru ke dalam hugo menggunakan perintah.

$ hugo new site [nama-blog]

nama-blog isi dengan nama blog yang hendak kamu buat

Selanjutnya hugo akan membuat direktor baru serta strukturnya, silahkan buka direktori tersebut menggunkan teks editor.

Secara bawaan, website baru yang berhasil di generated di hugo memiliki struktur seperti di bawah ini,

rembele.my.id
├── archetypes
├── config.toml
├── content
├── data
├── layouts
├── static
└── themes

diretory archetypes berisi archetype atau template Front Matter dari konten. Misalkan kamu ingin membuat sebuah kontent produk, protofolio, proyek, podcast. Maka kita membuat archestypes default content, silahkan tambahkan file default.md di dalamnya. Lalu isi kode berikut.

+++
title = "{{ replace .TranslationBaseName "-" " " | title }}"
date = "{{ .Date }}"
draft = true
+++

Kemudian juga terdapat directori content yang merupakan kontent dari blog dengan menggunakan format markdown. Untuk drectori data menggunakan format JSON, YAML, TOML dan lain-lain. 

Contohnya untuk pemanggilanya seprti di bawah ini.

<a href="{{ .Data.facebook }}">Facebook</a>

File config.toml merupakan file configurasi blog, contohnya seperti di bawah ini.

title = "Pitaurusnet - beljar linux dan programing"
baseurl = "https://www.pintaurusnet.com/"
languageCode = "id-id"
defaultContentLanguage = "id"

copyright = "Copyright (c) 2017, Petani Kode; all rights reserved."
MetaDataFormat = "yaml"

# theme to use (located by default in /themes/THEMENAME/)
themesDir = "themes"
theme = "kacang"

disqusShortname = "pintaurusnet"

[author]
    name = "Ardianta Pargo"
    homepage = "https://twitter.com/ardiantapargo"
    bio = "Pengamat Langit"
    image = "https://lh5.googleusercontent.com/-h2tLsyijw8Q/AAAAAAAAAAI/AAAAAAAACys/WBpjN_34z3o/s32-c/photo.jpg"

[permalinks]
    artikel = "/:slug/"

[taxonomies]
    tag = "topik"
    category = "kategori"
    series = "seri"

Coba ganti konfigurasi blog yang sudah di buat.

baseURL = "https://pintaurus.net"
languageCode = "en-us"
title = "internet"

Variabel baseURL dan title wajib di isi. Ada banyak tema hugo yang bisa kamu gunakan silahkan cek di Hugo Themas pilih salah satu di tema tersebut. 

Konfigurasinya seperti di bawah ini.

baseURL = "https://www.pintaurus.net/"
languageCode = "en-us"
title = "pinturus"
disablePathToLower = false

#themesDir = "themes"
theme = "Hugo-Octopress"


# Disqus shortcode
# Disable comments for any individual post by adding "comments: false" in its frontmatter
disqusShortname = "lombokfoss"



# Number of blog posts in each pagination page
paginate = 6

[permalinks]

# Configures post URLs
post = "/:slug/"

# Make tags and categories work
[indexes]
    tag = "tags"
    category = "categories"

[params]

    # If false, all of blog post will appear on front page (and in pagination)
    truncate = true

    # Author's name (appears in meta tags and under posts)
    author = "Ardianta Pargo"

    # This text appears in site header under website title
    subtitle = "Blog Pengguna Linux dari Lombok"

    # Search engine URL
    searchEngineURL = "https://www.google.com/search"

    # Text of the "Continue Reading" label. → == right arrow, but it gets messed up in the string so it was added to index.html manually
    continueReadingText = "Baca selengkapnya..."

    # Google analytics code - remove if you do not have/want Google Analytics - needs JavaScript
    googleAnalytics = "UA-XXXXX-X"

  # Switch to true to enable RSS icon link
    rss = true

  # Set to true to use a text label for RSS instead of an icon
  # This is overwritten by the "rss" setting
  textrss = false

    # Website's default description
    defaultDescription = ""

    # Populate this with your own search keywords - these will appear in meta tags
    # defaultKeywords = ["keyword1" , "keyword2" , "keyword3" , "keyword4"]

  # Set to true to hide ReadingTime on posts
  disableReadingTime = false

  # Set to true to disable downloading of remote Google fonts
  disableGoogleFonts = false

Kemudian tambahkan themanya, masuk kedalam direktori pintaurusnet/themes melalui terminal.

$ cd pinturusnet/themes/
$ git clone https://github.com/parsiya/Hugo-Octopress.git

Untuk menambahkan artikel ke dalam hugo, gunakan perintah berikut.

$ hugo new post/[nama-file-konten].md

Maka file baru akan dibuat pada direktori content/post/ dengan nama kontenkamu.md.Silahkan buka file tersebut dan modifikasi isinya