Tutorial Membuat Blog Dengan Hugo
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, kali ini kita akan fokus membagas Hugo.
Hugo adalah static site generator satu diantara yang populer, di Github sudah mendapat lebih dari 50k star.
Saya secara personal suka Hugo, karena hugo sangat mudah dipelajari, mudah digunakan, dan sangat cepat dalam proses build nya.
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 destop 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.80.0 linux/amd64 BuildDate: 2020-12-31T20:00:21Z
Membuat Situs Baru via Hugo
Setelah Hugo terinstall, langkah selanjutnya kita membuat sebuah situs baru dengan perintah berikut.
hugo new site testhugo
dan menghasilkan output seperti berikut.
Congratulations! Your new Hugo site is created in /home/misterthree/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 dan berikut ini struktur direktori foldernya:
├── archetypes
│ └── default.md
├── config.toml
├── content
├── layouts
│ └── partials
│ ├── footer_custom.html
│ └── head_custom.html
├── resources
│ └── _gen
│ ├── assets
│ └── images
├── static
└── themes
Tambahkan Tema
Selanjutnya kita akan menambahkan tema. Tema adalah bagian penting di dalam Situs Hugo karena hal 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 misterthree 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/misterthree/misterthree
Selanjutnya edit file config.toml dengan editor kesayanganmu, tambahkan baris berikut di file config tersebut untuk mengaktifkan theme nya.
theme = "misterthree"
lalu ketik command berikut untuk kamu agar bisa melihat preview webnya.
hugo server
dan kamu bisa melihat situs yang baru kita buat dengan membuka url http://localhost:3131 atau 127.0.0.1 di browser yang sering anda gunakan.
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!
