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.
Sumber : CODEPOLITAN
.jpg)
