Mudah Membuat Blog dari Terminal dengan Hugo Bagian 1

Pembaca pastilah mengenal Wordpress sebagai sebuah produk yang dipakai untuk membuat blog. Seiring dengan berjalannya waktu, Wordpress menjelma lebih dari sekedar mesin blog. Ia bisa dipakai untuk emmbuat website e-commerce, forum, situs tanya jawab, dll. Karena sistemnya yang cukup besar dan kompleks, untuk sekedar sarana untuk mempublikasikan tulisan Wordpress cukup merepotkan. Agar bisa jalan di server sendiri, kita juga mesti menyiapkan hosting untuk sistem PHP dan MySQL sebagai databasenya.

Karena alasan itulah banyak orang mencoba mengembangkan sistem bernama static site generator (SSG). Cara kerjanya, kita menulis konten mentah (biasanya dalam file Markdown) lalu SSG akan membuatkan file-file HTML, CSS, JavaScript secara otomatis. Yang kita publikasikan adalah file-file statis tersebut (karena itulah dinamakan static site generator).

Sistem ini tidak mengharuskan kita mengatur sistem backend seperti PHP dan MySQL karena yang kita miliki hanyalah file-file HTML biasa. Dengan ini, website yang dihasilkan oleh SSG relatif lebih cepat karena hanya terdiri dari file-file HTML biasa tanpa melakukan baca-tulis ke dan dari database. Meski fitur ini bisa dilihat sebagai kelebihan, namun juga bisa dianggap sebagai kekurangan. Situs-situs statis seperti ini kurang bisa membuat sistem yang dinamis.

Memasang Hugo

Disini penulis mencontohkan dari Linux Ubuntu 17.10. Contoh di sini bisa diaplikasikan di hampir semua sistem turunan Debian dan Ubuntu. Untuk distro lain tinggal menyesuaikan dengan caranya masing-masing. Pengguna Mac OS dan Windows bisa menggunakan brew dan chocolatey.

Pertama, unduh dulu file hugo dari sini. Pilih rilis yang paling sesuai. Karena penulis memakai Ubuntu 17.10, maka penulis mengunduh hugo_0.36_Linux-64bit.deb.

Setelah selesai mengunduh, masuk ke folder Downloads dan pasang hugo dengan perintah:

$ cd Downloads/
$ sudo dpkg -i hugo_0.36_Linux-64bit.deb

Jangan lupa untuk menyesuaikan nama folder juga nama file yang diunduh.

Untuk memastikan bahwa hugo telah terpasang, jalanka perintah berikut:

masgan@lobothijau:~/Downloads$ hugo version
Hugo Static Site Generator v0.36 linux/amd64 BuildDate: 2018-02-05T15:22:28Z

Membuat Website Baru dengan Hugo

Karena Hugo telah terpasang, selanjutnya, kita perlu membuat website baru dengannya. Pilih folder utama tempat menyimpan file-file website Hugo. Penulis memilih folder Projects di direktori /home.

$ cd ~
$ cd Projects
$ hugo new site lobothijau

Ganti lobothijau dengan nama blog baru yang diinginkan.

Struktur utama sistem Hugo adalah sebagai berikut:

lobothijau/
├── archetypes
│   └── default.md
├── config.toml
├── content
├── data
├── layouts
├── static
└── themes

• archetypes: adalah tempat pendefinisian komponen seperti tag, kategori, juga tipe artikel seperti tutorial, atau yang lain.
• config.toml: adalah konfigurasi yang mengatur nama website, bahasa, url, dan data lain.
• content: adalah tempat menyimpan file-file konten website (file mentahnya/Markdown-nya).
• data: adalah tempat menyimpan data seperti konfigurasi lokalisasi, data sosial media, disqus, dll.
• layouts: adalah tempat menyimpan template tampilan website yang dipakai Hugo.
• static: adalah tempat menyimpan file static yang dihasilkan oleh Hugo (file yang akan dilihat oleh pengunjung).
• themes: adalah tempat menyimpan tema-tema yang diunduh dari Github atau tema yang kita buat sendiri.

My First Post

Mari kita coba membuat satu postingan baru di website Hugo ini. Perintah untuk membuat postingan baru adalah sebagai berikut:

$ hugo new post/coba-coba-ah.md
/home/masgan/Projects/lobothijau/content/post/coba-coba-ah.md created

Perintah di atas akan membuat file baru bernama coba-coba-ah.md di folder content/post. Coba buka dengan editor teks favorit pembaca.

---
title: "Coba Coba Ah"
date: 2018-02-10T11:35:30+07:00
draft: true
---

Bagian yang ada diantara dua --- dinamakan front matter. Apa itu front matter?

Front Matter

Front matter adalah konfigurasi yang mengatur data sebuah postingan. Misalnya, ia menentukan postingan kita memiliki judul apa, dibuat tanggal berapa, statusnya apakah masih draft atau sudah di publish, dll. Setiap kita membuat file postingan, ia secara otomatis akan muncul. Darimana munculnya? Dari file archetypes/default.md:

---
title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }}
draft: true
---

Kita tak perlu menyentuh isi file ini. Pengaturan bawaannya sudah mencukupi untuk kebutuhan blog kita. Sekarang kita selesaikan isi coba-coba-ah.md menjadi (isi saja sesuai keinginan pembaca):

---
title: "Coba Coba Ah"
date: 2018-02-10T11:35:30+07:00
draft: false
---

# Tenuit lenta alis tum sanguine verus inde

## Qualia modo mihi Stymphalides furor ac adulantes

**Lorem** markdownum retinebat. Quod quem Atlas inposuit turaque erat.

Iram quod, ululatibus **molimine** utque, occurret et humus potitur Colchis
manant; visa omnia generi duxit fallaci. Similisque repente valle nubila qua
Inachis secura, nisi Oriente amans domus, adsueta. Ab **litus oculos**, iam,
saevit, superabat cum violentam et possent inritus aera color est totidem iussa,
ramos. Vota diversa! Tutus matri ferrum corpus, et mittit victum.

## Est Phoebus mortalia subit

Conpagibus positi declivis mirum et ignis. Ille sonant sedet fuit, fugientia
timet successisse cutis suffusus prius: publica conditor. Unda tantum.

## Est essent corpore

Argumenta colerent, armat erat pariter differt *Phoebi* defuit si et. Potest
magis quae aries culpa! A [prodidit habet](http://per.io/imago-moriens) excipit,
socii sagax et pompae aspera, surgit. Somnus prodet sub [enim pertimuit
nulla](http://www.letovidetur.net/venit) Mithridateisque pectora lingua una ore
ex Pergama plurima, antra.

## Tempore vicerat poena

Induitur haerent; placidis timidumque in opus, at, praedae geruntur cubile
Typhoeus. Vento pectore tutus vipereis
[mittit](http://www.sonuit-et.net/etiam-mane.html), rate tellus mitis;
furibundus formae scylla. Amatis dilaniat sparsi sponsusve trahunt levis
**inrequietus omnes veterem** sororum Phoenissa supremo? Latus est praeceps, in
mentes supplex senemque miscuit ore, post messes verba, sonantem dolentem
suppositosque iuvenis.

## Gravitas laborum est pennae posito Alcidae iugulo

Ora et fluxit lacrimas dum diligis sacra. **Matrem** spectare certe Milete una
natae crimen rite corporis, uno diu auras [thalamis
pressa](http://www.meae.org/requiram-antiquam) et, bracchia.

- Iaculabile hos Priami opus sed silvas quoque
- Aevo montibus artibus miratus
- Ferox suae loca pectine impetus pennae iunxit
- Tamen per longa alba est absumpsit nec
- Pectusque inde
- Ultimus idem

*Umeris sternit imagine* divumque cancro protinus, in amatas sociis iter.
Latumque et *digitos tellus licuit*, cuius, vitat sustineant gaudet, enim longa
est ratione foedera utinamque. Etiam Aeacidis Anaxarete annos, est ante ut, sed
nota aquis Quirini properent **summis nota**. Ait non, da movit hospes
cohaeserat tenebat mare, hoc?

Sistem penulisan di Hugo menggunakan Markdown, jadi silahkan kenali dulu aturan-aturan penulisan menggunakan Markdown. Lalu jangna lupa untuk mengganti nilai draft menjadi false jika sudah selesai menulis agar bisa ditampilkan (postingan nilai draft true tidak akan dimunculkan di halaman depan).

Mulai Server Hugo

Oke, dari tadi kita belum melihat bagaimana tampilan website yang dibuat dengan Hugo. Mari kita lihat dengan memulai dulu servernya:

$ hugo server
                   | EN  
+------------------+----+
  Pages            |  4  
  Paginator pages  |  0  
  Non-page files   |  0  
  Static files     |  0  
  Processed images |  0  
  Aliases          |  0  
  Sitemaps         |  1  
  Cleaned          |  0  

Total in 23 ms
Watching for changes in /home/masgan/Projects/lobothijau/{content,data,layouts,static}
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

Dari pesan yang muncul, kita bisa lihat bahwa server Hugo ada di http://localhost:1313/. Tapi saat kita buka ternyata masih blank. Kenapa? Hal ini karena kita belum memilih tema.

Memilih Tema

Memasang tema untuk Hugo sangatlah mudah. Kita cukup mengunduh tema-tema yang ada di https://themes.gohugo.io/ ke dalam folder themes. Di sini penulis akan memasang tema Hello Programmer karya Bang Donggeun.

$ cd themes/
$ git clone https://github.com/lubang/hugo-hello-programmer-theme.git
Cloning into 'hugo-hello-programmer-theme'...
remote: Counting objects: 214, done.
remote: Compressing objects: 100% (11/11), done.
remote: Total 214 (delta 3), reused 12 (delta 3), pack-reused 198
Receiving objects: 100% (214/214), 586.54 KiB | 339.00 KiB/s, done.
Resolving deltas: 100% (90/90), done.

Selanjutnya, kita akan aktifkan tema ini lewat file config.toml:

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

Perhatikan baris yang terakhir. Baris itulah yang mengaktifkan tema yang tadi sudah diunduh. Setiap tema biasanya memiliki konfigurasi tertentu, jadi silahkan cek halaman tema masing-masing untuk melihat opsi apa saja yang harus dibuat.

Selanjutnya, jalankan lagi server Hugo dan coba akses link yang tadi.

Yes, blog Hugo kita sudah bisa jalan dan tinggal merapikannya saja. Sekali lagi, cek halaman masing-masing tema untuk mengetahui konfigurasi apa saja yang perlu dilakukan.

Penutup

Kita baru selesai melakukan konfigurasi hugo untuk komputer lokal. Tentu saja, orang lain belum bisa menemukannya di Internet. Di artikel selanjutnya kita akan belajar bagaimana meng-online-kan blog yang sudah kita buat ini.