Langkah Membuat Blog

Saya membuat post ini agar saya tidak lupa di kemudian hari dan barangkali ada seseorang di luar sana yang membutuhkan tutorial mengenai Hugo. Semua perintah (command), alamat file, dan lain-lain saya tulis berdasarkan sistem operasi yang saya pakai, yaitu EndeavourOS (berbasis Arch Linux).

Persiapan #

Ada beberapa syarat dan persiapan yang diperlukan sebelum memulai blogging, yaitu

• Aplikasi pengolah kata. Saya menggunakan KATE yang merupakan software bawaan dari KDE.
• Terminal. Saya menggunakan Konsole yang juga bawaan dari KDE.
• Peramban atau browser.
• Buat akun Github klik di sini  .
• Buat akun Cloudflare Pages klik di sini  .
• Kemauan untuk menggunakan terminal secara intensif karena Hugo tidak memiliki tampilan antarmuka.

Menginstal Hugo #

Setelah semua persiapan selesai. Langkah pertama adalah menginstal Hugo yang dilakukan lewat terminal

sudo pacman -S hugo

Setelah instalasi selesai, lakukan pengecekan apakah Hugo sudah terinstal atau belum.

hugo version

hugo v0.148.2 …

Apabila hasil seperti di atas muncul, maka selamat, Hugo sudah terinstal!

Menginstal Git #

Saya menggambarkan Git sebagai seorang asisten yang mengelola proyek. Git bisa menyimpan riwayat sebuah proyek, sehingga penggunanya tidak perlu ribet menyimpan file dengan versi-versi seperti final.txt, final_fix.txt, final_fix_tinggalprint.txt, dan seterusnya. Apabila pengguna tidak menyukai perubahan yang dia buat, Git bisa mengembalikan file tersebut ke versi sebelum ada perubahan. Bahkan dalam skala tim, Git akan menyimpan data mengenai siapa yang mengubah apa, kapan, dan apa saja yang diubah.

Instalasi Git dan Github untuk Arch Linux dilakukan dengan perintah berikut

sudo pacman -S git github-cli

Sama seperti Hugo, gunakan perintah di bawah untuk memastikan apakah git sudah terinstal dengan baik atau belum.

git --version

Nah, Git sudah terinstal tapi akun Github belum terhubung. Untuk itu, masukkan email dan username Github dengan perintah berikut.

git config --global user.email  "email@email.com"
git config --global user.name  "username"

Kemudian akan muncul peringatan mengenai penggunaan kata master yang kurang sensitif terhadap sejarah. Nama master bisa diganti dengan kata lain, seperti main.

git config --global init.defaultBranch main

Setelah git selesai terinstal, langkah selanjutnya adalah konfigurasi dan autentikasi github-cli.

gh auth login

• Pilih Github.com
• Pilih HTTPS
• Kemudian pilih login with a web browser
• Buka tautan yang tertera di terminal, yaitu [https://github.com/login/device]
• Masukkan 8 digit kode yang muncul di terminal
• Konfirmasi
• Selesai, repositori lokal sudah terverifikasi oleh repositori remote Github.com!

Memilih Tema #

Bagian ini adalah bagian yang paling saya sukai, yaitu memilih tema! Tema adalah gerbang awal yang menunjukkan seperti apa pribadi seorang pemilik blog sebelum pengunjung membaca tulisan-tulisannya. Saya memilih tema Typo  yang minimalis, enak dibaca, namun tetap terlihat elegan.

Komunitas Hugo menciptakan ratusan tema yang dapat diakses di situs resmi Hugo klik di sini  . Selain itu, ada beberapa situs lain yang menyediakan tema Hugo, baik gratis maupun berbayar.

Beberapa tema yang menurut saya menarik yaitu

• Neopost  yang memadukan blog geocities ala tahun 2000an dengan konsep modern.
• Resume  yang cocok digunakan sebagai CV online.
• Monochrome  yang terlihat rapi.
• XMin  blog super minimalis namun tetap terlihat elegan.

Setelah memilih tema yang diinginkan, langkah selanjutnya adalah

• Klik Download, yang akan diarahkan ke repositori Github tema tersebut.
• Setelah itu, klik tombol Code di pojok kanan atas.
• Salin alamat url yang ada di Local > HTTPS. Alamat url yang benar akan memiliki akhiran .git.
• Membaca panduan teknis di repositori Github tema tersebut sangat direkomendasikan karena banyak pengaturan tambahan oleh pembuat tema.

Jika tema sudah dipilih, tahap selanjutnya adalah membuat folder berisi file-file esensial sebagai repositori lokal dengan menggunakan Hugo. Folder ini disebut juga sebagai root dan akan menjadi tempat menyimpan semua konten yang akan diunggah ke Github. Perintah yang digunakan yaitu:

hugo new namablog
cd namablog
git init
git submodule add [urlnamatema.git] themes/namatema
echo "theme = 'namatema'" >> hugo.toml

Barisan perintah tersebut akan

• Hugo membuat sebuah folder di /home dengan nama namablog.
• Terminal akan masuk ke folder namablog, ada perubahan pada alamat di terminal dari [user@PC ~] menjadi [user@PC namablog]. Semua perintah yang setelah ini akan dijalankan di folder /home/namablog. Untuk kembali ke home, gunakan cd.
• Inisiasi git yang bertujuan untuk memberitahu git bahwa folder /home/namablog merupakan sebuah repositori.
• Menginstal tema yang dipilih sebagai submodule sekaligus menginstal tema tersebut di folder /themes/namatema.
• Meski tema sudah terinstal, namun Hugo belum tahu bahwa tema tersebut adalah tema yang harus dipakai. Untuk itu, baris theme = 'namatema' ke file hugo.toml perlu ditambahkan. Selain lewat terminal, tahap ini juga bisa dilakukan lewat aplikasi pengolah kata.

Sampai tahap ini, hugo sudah terinstal, git sudah mengetahui bahwa folder namablog adalah sebuah repositori, tema sudah terunduh dan saya sudah mengatur tema yang akan dipakai. Langkah selanjutnya adalah melihat secara langsung bagaimana blog saya akan muncul di browser.

Kembali ke terminal, ketik command berikutnya

hugo server

Terminal akan menampilkan serangkaian proses yang diakhiri dengan dua baris penting berikut

Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)

Press Ctrl+C to stop

Sesuai dengan kalimat di atas, kunjungi http://localhost:1313 untuk melihat bagaimana blog saya akan ditampilkan. Semua perubahan yang terjadi pada blog dan konten-kontennya akan langsung diproses dan ditampilkan oleh Hugo, alias live preview. Setelah selesai melihat live preview, jalankan Ctrl+C di terminal.

Kedua command hugo server dan Ctrl+C sangat penting untuk diingat karena ke depannya akan sering digunakan.

Mengatur Global Settings #

Selain mengatur tema, hugo.toml juga mengatur seluruh konten dan fungsi yang ada di blog. File ini bisa diubah dengan aplikasi pengolah kata atau langsung di terminal dengan perintah nano. Sebuah file konfigurasi sederhana memiliki konten seperti ini

baseURL = '[alamat url]'
languageCode = '[kode bahasa]'
title = '[nama]'
theme = '[tema]'

File konfigurasi ini akan memberitahukan Hugo mengenai:

• baseURL akan menentukan alamat blog ini nantinya. Untuk sekarang, bagian ini bisa dikosongkan dulu.
• languageCode dapat memberitahukan browser mengenai bahasa yang digunakan oleh blog.
• Sesuai namanya, title adalah judul blog yang akan muncul di berbagai tempat seperti header dan tab bar.
• Sedangkan theme adalah baris baru yang sudah ditambahkan di tahap sebelumnya.
• Semua konten yang diawali dengan tanda pagar # dalam satu baris menunjukkan bahwa konten tersebut adalah sebuah comment yang akan diabaikan oleh Hugo dan bahasa pemrograman lain.

Dokumentasi Configuration  memiliki banyak pengaturan tambahan yang dapat dimasukkan ke dalam hugo.toml. Selain dokumentasi resmi, setiap tema juga memiliki pengaturan tambahan. Oleh karena itu, panduan teknis pada repositori tema sangat wajib untuk dibaca.

Tambahkan File .gitignore #

File .gitignore adalah file yang berisi daftar file-file apa saja yang dapat dihiraukan oleh git sehingga tidak muncul di repositori remote. File ini bisa ditulis secara manual atau menggunakan situs gitignore.io  . Cukup masukkan Hugo ke kotak pencarian, lalu simpan hasilnya di folder namablog dengan nama gitignore tanpa ekstensi.

Push ke Github #

Setiap kali perubahan terjadi di repositori lokal, perlu adanya proses push agar konten yang ada di repositori remote selaras dengan repositori lokal. Perintah yang dijalankan di terminal yaitu

git add .
git commit -m "deskripsikan perubahan yang terjadi"
git push origin main

Dalam beberapa detik atau menit, semua file yang ada di folder blog juga akan muncul di akun Github, tersimpan rapi dan aman di sana.

Publikasikan Blog ke Cloudflare Pages #

Sebenarnya, Github juga menyediakan fitur blog gratis dan mudah bagi penggunanya, yaitu Github Pages. Namun saya memutuskan untuk menggunakan Cloudflare Pages (CF) karena CF dapat mengakses repositori meskipun repositorinya bersifat privat. Suatu kelebihan yang tidak dimiliki Github. Untuk melakukan publikasi ke CF, langkah yang harus dijalankan yaitu

• Login ke Cloudflare Pages
• Pada halaman utama, akan ada menu Get started with Workers and Pages, pilih Pages.
• Pilih Create by importing an existing Git repository, lalu klik Connect to Git untuk login ke Github.
• Setelah login, akan muncul tampilan Deploy a site from your account.
• Pilih Github, akun, dan repositori yang ingin dibuat sebagai blog, lalu klik Begin setup.
• Pada halaman kedua, isikan sesuai data di bawah

Project name: namablog
Framework preset: Hugo
Build command: `hugo --gc --minify`
Environmental variables: Add variable
VARIABLE_NAME: HUGO_VERSION
Value: 0.148.1

• Pada tahap terakhir, klik Save and Deploy dan tunggu hingga blog berhasil online dan dapat diakses siapa saja yang memiliki alamat namablog.pages.dev.

Kembali Edit Global Settings #

Pada tahap sebelumnya, baseURL = pada hugo.toml masih menggunakan alamat default. Agar semua link yang diklik mengarah ke halaman utama blog, bagian ini perlu diisi dengan alamat url https://namablog.pages.dev. Setelah itu, push perubahan yang sudah dilakukan. Cloudflare akan memantau setiap perubahan yang terjadi di repositori remote, lalu mengaplikasikannya ke blog.

Selesai #

Selesai. Blog dengan tema yang menarik sudah selesai dipublikasikan. Masih ada beberapa hal yang dapat dilakukan seperti mengubah warna tema, menambahkan konfigurasi di hugo.toml, dan yang terpenting, menambahkan tulisan-tulisan ke blog.