balloon_head
balloon_head
balloon_head
balloon_head
Persiapan

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

  • Text editor. Saya menggunakan KATE yang merupakan bawaan dari KDE. Untuk penggunaan yang lebih praktis, kalian bisa menggunakan Visual Studio Code yang bisa diunduh dengan klik di sini.
  • Terminal. Saya menggunakan Konsole yang juga bawaan dari KDE. Untuk pengguna Windows, bisa unduh Powershell klik di sini.
  • Browser. Browser apa saja bisa digunakan, kok.
  • Buat akun Github klik di sini.
  • Buat akun Cloudflare Pages klik di sini.
  • Kemauan untuk menggunakan terminal secara intensif. Hugo tidak memiliki Graphical User Interface (GUI), secara kasarnya tidak ada aplikasi yang bisa diklik-klik. Jangan khawatir karena terminal dalam konteks Hugo ini sangat simpel dan tidak akan sampai merusak sistem komputer kalian, kok.
Install Hugo

Setelah semua persiapan selesai. Langkah pertama adalah menginstal Hugo yang dilakukan lewat terminal. Tergantung dari sistem operasi yang dimiliki, instalasi Hugo akan berbeda.

Instalasi di Windows

winget install Hugo.Hugo.Extended

Instalasi di Arch Linux

sudo pacman -S hugo

Setelah instalasi selesai, lakukan pengecekan apakah Hugo sudah terinstal atau belum. Kode di bawah bisa digunakan baik di Windows atau Linux.

hugo version

hugo v0.148.2 …

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

Install 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 pada dasarnya sama saja antara Windows dengan Linux.

  • Untuk Windows, kunjungi situs git klik di sini, unduh, lalu klik dua kali pada file tersebut.
  • Untuk Arch Linux, gunakan
sudo pacman -S git github-cli

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

git --version

Nah, Git sudah terinstal tapi akun Github kita belum terhubung. Untuk itulah perlu memasukkan e-mail dan username Github yang sudah kita buat sebelumnya.

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 github-cli. Pengguna VSCode tidak perlu melakukan ini, langsung saja log in ke akun Github kalian melalui VSCode.

github-cli memastikan bahwa kalian adalah pemilik asli repositori blog kalian di github.com, dan bukan sembarang orang. Untuk melakukan hal itu, pertama lakukan login melalui terminal

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
  • Konfirmasi.
  • Selesai, PC kalian (local) sudah terverifikasi oleh Github.com (remote)!
Memilih Tema

Bagian ini adalah bagian yang paling saya sukai, yaitu memilih tema! Tema adalah gerbang awal dalam menunjukkan seperti apa pribadi seorang pemilik blog sebelum pengunjung membaca tulisan-tulisannya. Saya memilih tema Monochrome karena saya sangat terpesona pada Monochrome yang simpel, elegan, dan enak dilihat.

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.
  • XMin blog super minimalis namun tetap terlihat elegan.

Setelah memilih tema yang diinginkan, langkah selanjutnya adalah

  • Klik Download. Kalian akan diarahkan ke repositori Github tema tersebut.
  • Klik Fork di pojok kanan atas. Fork adalah salinan dari repositori asli. Kita dapat mengubah apa saja yang ada di Fork tanpa mempengaruhi aslinya.
  • Klik Create Fork.
  • Setelah itu, klik tombol Code yang memiliki warna berbeda dengan tombol-tombol lain.
  • Copy alamat url yang ada di Local > HTTPS. Alamat url yang benar akan memiliki format sebagai berikut https://github.com/[username]/[repositorifork].git
Memasang Tema

Jika tema sudah dipilih, tahap selanjutnya adalah membuat folder berisi file-file esensial sebagai repositori lokal dengan menggunakan Hugo. Folder ini akan menjadi tempat kita menyimpan tulisan dan mengunggahnya ke Github. Lewat terminal, gunakan perintah

hugo new namablog

Hugo akan membuat sebuah folder di /home dengan nama namablog. Agar Hugo dapat dioperasikan dengan mudah, kita perlu masuk ke dalam folder namablog

cd namablog

Semua command yang awalnya dijalankan di [username@PC ~], akan dijalankan pada folder [username@PC namablog]. Istilah keren dari folder namablog adalah folder root untuk repositori blog, alias bagian paling awal dari sebuah folder. Setelah kita berpindah ke folder ’namablog’, perlu adanya inisiasi git. Tujuannya adalah untuk memberitahu git bahwa folder namablog merupakan repositori yang perlu dipantau.

git init

Akan muncul folder dan file tersembunyi yang dihasilkan oleh git.

Langkah berikutnya yaitu menginstal tema yang dipilih sekaligus menambahkan repositori fork sebagai git submodule.

git submodule add https://github.com/[username]/[repositorifork].git themes/repositorifork

Meski tema sudah terinstal, namun Hugo belum tahu bahwa tema tersebut adalah tema yang harus dipakai. Bagaimana jika seseorang punya banyak tema terinstal di repositorinya? Untuk itulah, tambahkan sebuah baris pada file hugo.toml yang merupakan file pengatur utama pada blog.

echo "theme = 'repositorifork'" >> hugo.toml

Selain lewat terminal, baris theme = 'repositori fork' juga bisa ditambahkan langsung ke file hugo.toml yang ada di root, lalu simpan.

Sampai tahap ini, hugo sudah terinstal, git sudah mengetahui bahwa folder namablog adalah sebuah repositori, tema sudah terunduh dan kita sudah memberitahu hugo bahwa tema itu adalah tema yang dipilih. Langkah selanjutnya adalah…

Melihat secara langsung bagaimana blog kita 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

Yap, sesuai dengan kalimat di atas, kita bisa melihat blog kita yang ada di repositori lokal dengan mengakses http://localhost:1313. Semua perubahan yang terjadi pada blog dan konten-kontennya akan langsung diproses dan ditampilkan oleh Hugo, alias live preview. Hal ini akan sangat memudahkan kita untuk melakukan pengaturan blog dan melihat bagaimana postingan kita akan muncul sebelum dipublikasikan. 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.