Tutorial Membuat Blog Dengan Hugo, Cuman 5 Menit!

Ini adalah tutorial membuat blog dengan Hugo. Belajar bagaimana membuat website yang performa nya cepat secepat kilat dari tutorial sederhana ini,

gak sampe 5 menit kamu pasti langsung bisa.

Jika kamu belum familiar dengan kosep static site generator, saya akan mencoba menjelaskannya secara singkat.

Static site generator mengijinkan kamu memegang kendali penuh atas konten kamu dan output nya akan berupa versi statis dari website kamu.

Yang dimaksud versi statis adalah, web yang hanya berisikan html css dan javascript.

Ada beberapa keuntungan dari situs statis, diantaranya :

• Cepat dari segi performa, karena situs ini tidak membutuhkan proses pengambilan data dari database.
• Biasanya tidak membutuhkan banyak biaya hosting, bahkan kamu bisa mendeploy website hugo nantinya gratis di netlify.
• Secara security lebih aman tentunya, karena tidak ada interaksi dengan database, tidak ada kaitan dengan server-side platform dan tidak membutuhkan CMS yang rentan.

Ada banyak pilihan static site generator, seperti jekyll, Next.js, Nuxt.js, tetapi di postingan ini kita akan fokus membagas Hugo.

Hugo adalah static site generator satu diantara yang populer, di Github sudah mendapat lebih dari 41k star.

Saya secara personal suka Hugo, karena hugo sangat mudah dipelajari, mudah digunakan, dan sangat cepat dalam proses build nya.

Tanpa panjang lebar, mari langsung saja ke langkah-langkahnya.

Step 1 - Install Hugo

Untuk pengguna distro linux OS ubuntu, and bisa menginstall hugo dengan sangat mudah, cukup ketikkan berikut di command line.

sudo apt-get update
sudo apt-get install hugo

dan hugo akan terinstall otomatis di server kamu. Selanjutnya ketikkan perintah berikut untuk memastikan hugo benar-benar terinstall.

hugo version

command diatas untuk mengecek versi hugo yang terinstall, tampilan outputnya seperti ini.

Hugo Static Site Generator v0.59.1-D5DAB232 linux/amd64 BuildDate: 2019-10-31T15:21:02Z

Untuk platform lain, silakan cari tahu bagaimana cara menginstallnya di halaman dokumentasi resmi Hugo disini.

Step 2 - Generate Situs Baru via Hugo

Setelah Hugo terinstall, langkah selanjutnya adalah kamu membuat sebuah situs baru dengan perintah berikut.

hugo new site testhugo

dan menghasilkan output seperti berikut.

Congratulations! Your new Hugo site is created in /mnt/i/hugo/testhugo.

Just a few more steps and you're ready to go:

1. Download a theme into the same-named folder.
   Choose a theme from https://themes.gohugo.io/ or
   create your own with the "hugo new theme <THEMENAME>" command.
2. Perhaps you want to add some content. You can add single files
   with "hugo new <SECTIONNAME>/<FILENAME>.<FORMAT>".
3. Start the built-in live server via "hugo server".

Visit https://gohugo.io/ for quickstart guide and full documentation.

command diatas akan membuat sebuah situs hugo baru dengan folder bernama testhugo

dengan struktur folder seperti berikut ini.

├── archetypes
│   └── default.md
├── config.toml
├── content
├── layouts
│   └── partials
│       ├── footer_custom.html
│       └── head_custom.html
├── resources
│   └── _gen
│       ├── assets
│       └── images
├── static
└── themes

Step 3 - Tambahkan Tema

Selanjutnya kita akan menambahkan tema. Tema adalah bagian penting di dalam Situs Hugo karena ini akan menunjukkan bagaimana konten anda ditampilkan.

Pertama kita masuk ke folder yang berisi situs hugo yang baru kita buat tadi.

cd testhugo

lalu kita akan menginstall themes bernama pickels atau nantinya kamu bisa memilih themes apa yang kamu mau di directory themes resmi dari Hugo

cd themes
git clone -b release https://github.com/mismith0227/hugo_theme_pickles

Selanjutnya edit file config.toml dengan editor kesayanganmu, tambahkan baris berikut di file config tersebut untuk mengaktifkan theme nya.

theme = "hugo_theme_pickles"

lalu ketik command berikut untuk kamu agar bisa melihat preview webnya.

hugo server

dan taraaaaaa… kamu bisa melihat situs yang baru kita buat dengan membuka url berikut http://localhost:3131 di browser kesayanganmu.

Itu tadi yang bisa kita pelajari untuk awal mengenal Hugo. kedepan kita akan bahas lebih banyak tentang templating, membuat custom theme, dan masih banyak lagi.

Jangan lupa share jika bermanfaat!

About The Author

Gege Riyadi

Founder Gegeriyadi.com, layanan yang sudah 10 tahun bergerak di bidang Web Development Services yang juga intens update seputar SEO dan juga Web Optimization... [Read full bio]