Cara Membuat Blog Hugo Pertamamu

  Habibi December 21, 2021
  Habibi December 21, 2021

ngeblog dengan hugo

Untuk mulai membuat blog dengan hugo sebenarnya sangat sederhana, ada beberapa tahapan inti di tutorial kali ini yang akan saya bahas. Dimulai dari persiapan, tahapan menginstall hugo, memahami perintah dasar penggunaan hugo, hingga memasang tema untuk blog dan menjalankan blog di web browser.

Persiapan & Installasi

Hugo akan menjadi engine untuk blog kita dimana hugo akan memanajemen konten, melakukan proses build bagian-bagian blog, dan menjalankan proses livereload pada browser saat kita membangun blog.

Hugo dapat dijalankan di sistem operasi seperti:

  • macOS (Darwin) for x64, i386, and ARM architectures
  • Windows
  • Linux
  • OpenBSD
  • FreeBSD

Untuk dapat menginstall hugo, sebenarnya ada beberapa metode yang dapat digunakan, akan tetapi saya lebih merekomendasikan menggunakan metode dengan Package manager karena lebih mudah dipahami. Sederhananya adalah memudahkan kita untuk melakukan install atau ketika suatu saat kita akan memperbarui hugo ke versi terbaru.

git --version

Lanjut! Kita harus menginstall Package manager terlebih dahulu. Package manager yang akan digunakan berbeda-beda di setiap sistem operasi. Saat menginstall Package manager pastikan koneksi internet dalam keadaan stabil.

Windows

Package manager yang dapat kalian gunakan untuk menginstall hugo di sistem operasi Windows adalah Chocolatey atau Scoop. Kalau kalian sudah menginstall salah satu dari Package manager diatas, buka Command Prompt As Administrator dan jalankan perintah berikut untuk menginstall Hugo.

Chocolatey:
choco install hugo -confirm

Atau versi extended dari Hugo yang memungkinkan kalian menggunakan versi Sass/SCSS:

choco install hugo-extended -confirm

Scoop:
scoop install hugo

Versi extended untuk Sass/SCSS:

scoop install hugo-extended

MacOS & Linux

Untuk sistem operasi macOS atau Linux, package manager yang saya sarankan adalah Homebrew, saya sendiri juga sering menggunakan package manager ini untuk menginstall software open-source lainnya.

Petunjuk install Homebrew untuk MacOS dan Linux dapat dibaca disini.

Oke, setelah package manager terinstall, jalankan perintah berikut di terminal Linux atau MacOS kalian.

brew install hugo

Membuat Blog Hugo

Oke, sampai di tahapan ini saya anggap proses Installasi Hugo sudah selesai.

Untuk memudahkan proses kalian dalam memanajemen struktur folder sehingga tidak tercampur dengan file-file atau folder-folder yang tidak ada hubungannya dengan proyek kalian, saya sangat menyarankan membuat folder khusus untuk menyimpan proyek Hugo kalian.

Setelah folder selesai dibuat, masuk ke direktori tersebut dengan CMD atau terminal dan ketikkan perintah berikut:

hugo new site namablogkamu

- Perintah untuk membuat project baru

Maka secara otomatis Hugo akan men-generate struktur direktori dan file sebagai berikut didalam folder blog kalian.

- Struktur Direktori Blog Hugo

Memasang Tema Hugo

Sampai tahapan ini sebenarnya blog sudah bisa dijalankan di web browser, akan tetapi karena konten didalamnya masih kosong, maka hanya halaman kosong yang akan tampil di browser.

Oleh karena itu kita perlu melakukan kustomisasi blog dengan memasang tema yang bisa dipilih di halaman tema hugo.

Sebagai contoh, saya akan menggunakan Paper sebagai tema untuk blog yang saya buat. Langkahnya adalah melalui CMD atau terminal kalian, masuk ke direktori namablogkamu/themes yang ada didalam blog hugo kalian, kemudian clone repo temanya dengan perintah berikut.

git clone https://github.com/nanxiaobei/hugo-paper.git

- Perintah untuk clone tema

Setelah proses clone selesai, maka folder tema akan berisi dengan folder tema yang sudah di clone tadi.

- Clone tema berhasil

Setelah selesai melakukan clone, copy file config.toml yang ada di direktori namablogkamu/themes/hugo-paper/exampleSite/config.toml kemudian paste & replace file config.toml ke direktori namablogkamu/config.toml

Agar konten postingan didalamnya tidak kosong, maka salin juga folder content yang ada didalam exampleSite kemudian paste dan replace namablogkamu/content, maka blog kamu sudah memiliki contoh artikel.

Mengakses Blog Secara Lokal

Agar kalian dapat mengakses blog secara lokal melalui localhost di web browser, jalankan perintah berikut.

Hugo server

Ketikkan localhost:1313 di web browser kalian, dan jika tidak ada masalah maka blog kalian sudah dapat dijalankan secara lokal dengan tema yang sudah di download sebelumnya.

finalresult


Afrizal Habibi - Penulis
Terima kasih sudah membaca, kamu bisa mendukung penulis dengan mentraktir kopi atau bagikan blog ini ke sosial media!



BACA JUGA :

NEWSLETTER

Mau dapat email setiap ada postingan baru?

comments powered by Disqus