Cara Belajar Membuat Blog dengan Go Hugo Bagian 2
Pada bagian pertama, kita telah mempelajari cara membuat blog sederhana; dalam pembahasan kali ini, kita akan belajar membuat tema dasar untuk mempercantik tampilan blog tersebut. Ada banyak tema Hugo yang bisa kita gunakan, namun tema-tema siap pakai sering kali cukup kompleks dengan beragam fitur yang memerlukan waktu untuk dikonfigurasi dengan benar. Sebaiknya kita memahami cara kerja sebuah tema sebelum mulai membedah kode buatan orang lain yang ada di dalam tema tersebut.
Dalam artikel ini, kita akan membuat tema sendiri. Meskipun tema yang kita buat sangat sederhana, hal terpenting adalah kita memahami struktur kode di dalamnya; barulah setelah itu kita bisa membandingkannya dengan tema-tema buatan orang lain yang banyak tersedia di internet.
1. Membuat Tema Hugo
Kita dapat membuat tema dengan cara membuat direktori baru di dalam folder "themes" situs Anda, namun Hugo memiliki generator tema bawaan yang membuat semua komponen yang diperlukan untuk tema tersebut. Jalankan perintah berikut dari direktori akar situs Hugo Anda untuk membuat tema baru bernama "basic".
root@ns1:~ # cd /var/blog/blogspot
root@ns1:/var/blog/blogspot # hugo new theme basic
Creating theme at /var/blog/blogspot/themes/basic
Setelah tema "basic" berhasil dibuat, struktur tema akan terbentuk di dalam folder /var/blog/blogspot/themes/basic. Berikut adalah struktur tema yang kita buat menggunakan perintah di atas.
Langkah berikutnya adalah memindahkan beberapa berkas dari folder /var/blog/blogspot/layouts ke folder /var/blog/blogspot/themes.
root@ns1:/var/blog/blogspot # mkdir -p /var/blog/blogspot/themes/basic/layouts/_default
root@ns1:/var/blog/blogspot # mv /var/blog/blogspot/layouts/index.html /var/blog/blogspot/themes/basic/layouts/index.html
root@ns1:/var/blog/blogspot # mv /var/blog/blogspot/layouts/_default/single.html /var/blog/blogspot/themes/basic/layouts/_default/single.html
Setelah itu, kita mengedit file /var/blog/blogspot/config.toml dan menambahkan perintah theme = "basic" di bagian akhir skrip. Berikut adalah contoh lengkap file /var/blog/blogspot/hugo.toml setelah diedit.
baseURL = 'https://datainchi.com/'
languageCode = 'en-us'
title = 'Exploring the Operating Sistem of Linux'
theme = "basic"
Jalankan server Gohugo kami dengan mengetikkan perintah berikut.
root@ns1:/var/blog/blogspot # hugo server --bind=192.168.17.7 --baseURL=http://192.168.17.7 --port=8999
Buka Google Chrome dan ketik "http://192.168.17.7:8999/", lalu tampilan blog dari server GoHugo kita akan muncul.
2. Menggunakan Blok Konten dan Partial
Baik tata letak halaman beranda maupun tata letak halaman tunggal sama-sama memuat kerangka skrip HTML. Kerangka tersebut akan menjadi lebih kompleks begitu kita menambahkan header, footer, dan navigasi. Alih-alih menduplikasi kode tersebut di berbagai tempat, Hugo menyediakan satu lokasi khusus untuk menempatkan kerangka tersebut sehingga semua tata letak lainnya dapat dibangun berdasarkan kode itu. Saat kita membuat sebuah tema, tema tersebut dibuat untuk memperindah tampilan blog kita.
Bukalah berkas "/var/blog/blogspot/themes/basic/layouts/_default/baseof.html" dan perhatikan kode skrip di dalamnya. Sesuai dengan namanya, berkas ini akan menjadi "basis" bagi setiap tata letak lain yang akan kita buat. Berikut adalah isi dari berkas "/var/blog/blogspot/themes/basic/layouts/_default/baseof.html".
root@ns1:/var/blog/blogspot # touch /var/blog/blogspot/themes/basic/layouts/_default/baseof.html
root@ns1:/var/blog/blogspot # ee /var/blog/blogspot/themes/basic/layouts/_default/baseof.html
<!DOCTYPE html>
<html>
{{- partial "head.html" . -}}
<body>
{{- partial "header.html" . -}}
<div id="content">
{{- block "main" . }}{{- end }}
</div>
{{- partial "footer.html" . -}}
</body>
</html>
Bagian pertama yang tercantum dalam file baseof.html adalah file head.html, yang terletak di folder /var/blog/blogspot/themes/basic/layouts/partials. File ini akan memuat kode yang biasanya muncul di bagian head sebuah situs web atau blog. Masukkan skrip di bawah ini ke dalam file /var/blog/blogspot/themes/basic/layouts/partials/head.html.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{ .Site.Title }}</title>
</head>
Referensi parsial berikutnya adalah file header.html; file ini akan menyimpan bagian header halaman Anda. Di sinilah Anda akan menempatkan banner dan navigasi. Tambahkan kode berikut ke dalam file /var/blog/blogspot/themes/basic/layouts/partials/header.html.
<header>
<h1>{{ .Site.Title }}</h1>
</header>
<nav>
<a href="/">Home</a>
<a href="/about">About Us</a>
<a href="/resume">Privacy Policy</a>
<a href="/contact">Disclaimer</a>
</nav>
Terakhir, kita akan membuat folder untuk tata letak Footer; ketik skrip di bawah ini pada file "/var/blog/blogspot/themes/basic/layouts/partials/footer.html".
<footer>
<small>Copyright {{now.Format "2006"}} Exploring the Operating Sistem of Linux.</small>
</footer>
Langkah berikutnya adalah menentukan blok-blok pada tata letak halaman beranda blog yang akan kita buat. Buka file /var/blog/blogspot/themes/basic/layouts/index.html, hapus isi skripnya, lalu ganti dengan skrip di bawah ini.
{{ define "main" }}
{{ .Content }}
{{ end }}
Saat server GoHugo melakukan proses build pada blog yang kita buat, server tersebut akan menghasilkan halaman beranda dengan menggabungkan berkas konten (/var/blog/blogspot/content/_index.md) dan berkas tata letak (layout), yang kemudian memanfaatkan berkas baseof. Sebagian atau seluruh konten digabungkan untuk membentuk satu halaman utuh.
Berkas tata letak index.html hanya memengaruhi halaman beranda blog yang kita buat; oleh karena itu, ubahlah kode skrip pada berkas /var/blog/blogspot/themes/basic/layouts/_default/single.html agar tata letak halaman tunggal (single page) berfungsi dengan cara yang sama. Berikut adalah isi skrip dari berkas /var/blog/blogspot/themes/basic/layouts/_default/single.html.
{{ define "main" }}
<h2>{{ .Title }}</h2>
{{ .Content }}
{{ end }}
Setelah itu, jalankan server GoHugo dengan mengetikkan skrip di bawah ini.
root@ns1:/var/blog/blogspot # hugo server --bind=192.168.17.7 --baseURL=http://192.168.17.7 --port=8999
Kita dapat melihat hasilnya dengan membuka peramban web Google Chrome dan mengetikkan "http://192.168.17.7:8999/", tampilannya akan seperti yang terlihat pada gambar di bawah ini.
Tampilan di atas masih terlihat kacau dan tidak rapi. Kita akan merapikan tampilan gambar tersebut menggunakan CSS.
3. Mengatur Tema dengan CSS
Selain file tata letak (layout), file tema juga memuat gambar, skrip, dan style sheet yang mengatur aspek visual situs blog, seperti warna, jenis huruf (font), dan penempatan konten. Aset-aset ini ditempatkan di dalam direktori /var/blog/blogspot/static. Di dalam folder tersebut, terdapat folder CSS dan folder JS.
Sebelum mulai menggunakan CSS, mari kita tambahkan struktur pada tata letak agar kita memiliki kendali lebih besar atas lebar halaman. Hal ini akan bermanfaat saat situs ditampilkan di perangkat dengan layar lebih besar. Ubah file baseof dengan membungkus seluruh konten di dalam elemen div yang memiliki kelas container, serta ubah tag div yang ada di sekeliling blok utama menjadi tag main HTML. Penggunaan tag main akan memudahkan teknologi bantu (assistive technologies) dalam mengenali konten utama situs blog, sedangkan div dengan kelas container memungkinkan kita mengatur lebar situs pada layar monitor yang lebih besar saat kita menerapkan CSS nantinya.
Buka dan edit file /var/blog/blogspot/themes/basic/layouts/_default/baseof.html agar kodenya menjadi seperti di bawah ini.
<!DOCTYPE html>
<html>
{{- partial "head.html" . -}}
<body>
<div class="container">
{{- partial "header.html" . -}}
<main>
{{- block "main" . }}{{- end }}
</main>
{{- partial "footer.html" . -}}
</div>
</body>
</html>
Setelah itu, kita lanjutkan dengan membuat file stylesheet CSS. Di dalam folder /var/blog/blogspot/themes/basic/static/css, kita membuat file bernama "style.css" dan mengetikkan skrip di bawah ini ke dalam file /var/blog/blogspot/themes/basic/static/css/style.css.
root@ns1:/var/blog/blogspot # mkdir -p /var/blog/blogspot/themes/basic/static/css
root@ns1:/var/blog/blogspot # ee /var/blog/blogspot/themes/basic/static/css/style.css
.container {
margin: 0 auto;
width: 80%;
}
nav, footer {
background-color: #333;
color: #fff;
text-align: center;
}
nav {
display: flex;
flex-direction: column;
}
nav > a {
flex: 1;
text-align: center;
text-decoration: none;
color: #fff;
}
@media only screen and (min-width: 768px) {
nav { flex-direction: row; }
}
Sebagai langkah terakhir, kita mengedit file /var/blog/blogspot/themes/basic/layouts/partials/head.html dan mengetikkan skrip berikut di dalam file tersebut.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{ .Site.Title }}</title>
<link rel="stylesheet" href="{{ "css/style.css" | relURL }}">
</head>
Kemudian, kita jalankan server Gohugo.
root@ns1:/var/blog/blogspot # hugo server --bind=192.168.17.7 --baseURL=http://192.168.17.7 --port=8999
Untuk melihat hasilnya, kita buka peramban web Yandex atau Google Chrome dan ketik "http://192.168.5.2:8999/", lalu tampilannya akan muncul seperti pada gambar di bawah ini.
Kini tampilan blog kita menjadi sedikit lebih rapi dan terlihat lebih manis serta enak dipandang. Kita akhiri pembahasan bagian kedua ini sampai di sini. Semoga pengetahuan Anda bertambah melalui artikel bagian kedua ini. Kita akan melanjutkan pembahasan ke bagian ketiga, dengan skrip yang lebih rumit dan tentunya lebih menantang.