Artikel ini merupakan Tutorial Membuat Blog dengan Hugo edisi abis pindah dari Wordpress ke HUGO 🤣
Sebelum lanjut ke inti artikel, saya ingin berbagi pengalaman sedikit tentang migrasi dari wp ke hugo.
Jauh dari dalam hati, saya masih ingin menggunakan CMS Wordpress karena memiliki fitur yang sangat mumpuni untuk ngeblog namun, disatu sisi saya juga tidak memiliki banyak waktu luang untuk dapat terus update artikel.
Alhasil, setiap bulan harus mengeluarkan uang untuk membeli atau memperpanjang hosting, yang mana jika di hitung ini sangat tidak worth it untuk blogger yang jarang nulis seperti saya.
Oleh karena itu saya memutuskan untuk cabut dan migrasi ke HUGO
Membuat Blog dengan Hugo sangat mudah, meskipun kamu bukan seseorang yang mengerti dengan script, kamu tetap bisa membuat blog di hugo simak turorial ini.
Static Site Generator HUGO
Static Site Generator sebenernya cukup populer di negara lain, untuk di Indo orang kebanyakan masih menggunakan CMS Blogger ataupun Wordpress. Saya akan menjelaskan secara singkat mengenai Static Site Generator.
Static Site Generator memberikan izin hak penuh kepada pengguna nya. Artinya kamu memegang kendali secara penuh di situs kamu dan hasil situs kamu nantinya akan menampilkan versi statis.
Apa yang dimaksud Blog versi Statis?
Maksud dari Blog Hugo / Static Site Generator (SSG) yaitu situs blog atau website yang di dalam nya hanya terdapat html, css, dan javascript. Hal ini yang membuat situs dengan versi statis mendapatkan kecepatan yang sangat baik dan berpengaruh terhadap SEO Hugo.
Bukan hanya HUGO yang menyediakan layanan static site generator, jika kita perhatikan malahan Hugo sendiri merupakan ssg yang paling muda di antara yang lain seperti
- Jekyll
- Gatsby
- Hugo
- Next.js
- Nuxt.js
- Astro
Kalau kamu mau nyoba buat blog dengan jekyll, bisa baca artikel Membuat blog statis dengan jekyll di android
Diantara ke-6 di atas, saya lebih menyukai Hugo, Hugo sangat mudah untuk dipelajari dan untuk proses build serta deploy nya juga terbilang cepat.
halaman web statis adalah file HTML sederhana yang bisa dimuat dengan sangat cepat, halaman web dinamis memerlukan eksekusi kode JS di dalam browser untuk bisa dirender.
Kelebihan dari situs web Statis
Adapun beberapa keuntungan / kelebihan dari situs statis yaitu:
- Cepat Dalam segi Performa Karena situs ini tidak membutuhkan proses pengambilan data dari database
- Tidak membutuhkan biaya Hosting, Kamu bisa mendeploy website statis hugo secara gratis di netlify, github pages dan vercel. Untuk deploy di Github, baca artikel Cara Hosting Hugo di Github
- Keamanan situs terjaga Tidak adanya interaksi dengan database, tidak ada kaitan dengan server platform dan tidak membutuhkan CMS yang rentan di bobol.
Tahapan Membuat Blog dengan Hugo menggunakan Termux
Saat nya masuk ke inti yaitu membuat blog dengan hugo. Yang pertama kita membutuhkan terminal, Termux menjadi solusi kita kali ini.
Silahkan Unduh Termux melalui Google Play Store atau melalui situs F-Droid
Saya menyarankan untuk menggunakan Termux versi F-Droid.
Install HUGO
Setelah aplikasi Termux berhasil di unduh, silahkan langsung ketikkan perintah dibawah ini
apt-get update
apt-get install hugo
atau bisa juga menggunakan perintah berikut
pkg update && apt upgrade -y
pkg install hugo -y
kemudian lanjutkan dengan menginstall Git
pkg install Git
Setelah memasukkan perintah tersebut, Hugo akan otomatis terinstall, silahkan ditunggu hingga selesai proses penginstallan.
Untuk melihat apakah Hugo sudah terinstall silahkan tulis perintah berikut
hugo version
Pada Android saya, hugo sudah terinstall dengan versi
hugo v.0.126.1 extended
Membuat Blog baru di Hugo
Setelah hugo terinstall, tahap selanjutnya adalah membuat situs baru. membuat situs baru di hugo silahkan ketikkan perintah
hugo new site testhugo
setelah menjalankan perintah, maka akan muncul output
Congratulations! Your new Hugo site was created in /data/data/com.termux/files/home/testhugo.
Just a few more steps...
1. Change the current directory to /data/data/com.termux/files/home/testhugo.
2. Create or install a theme:
- Create a new theme with the command "hugo new theme <THEMENAME>"
- Or, install a theme from https://themes.gohugo.io/
3. Edit hugo.toml, setting the "theme" property to the theme name.
4. Create new content with the command "hugo new content <SECTIONNAME>/<FILENAME>.<FORMAT>".
5. Start the embedded web server with the command "hugo server --buildDrafts".
See documentation at https://gohugo.io/.
Perintah tersebut akan mengeksekusi dan membuat sebuah situs baru di terminal dengan folder testhugo
Struktur folder blog hugo yang sudah kita buat seperti ini
βββ βββ archetypes
β βββ default.md
βββ config.toml
βββ content
βββ layouts
β βββ partials
β βββ footer_custom.html
β βββ head_custom.html
βββ resources
β βββ _gen
β βββ assets
β βββ images
βββ static
βββ themes
Menambahkan dan Menggunakan Tema hugo
Tahap berikutnya setelah berhasil membuat situs baru, kita wajib menambahkan tema agar blog bisa dijalankan dengan localhost.
Silahkan masukkan perintah dibawah ini pada terminal
cd hugo
disini saya akan menggunakan tema coder
atau bisa disesuaikan dengan tema yang kalian mau, bisa cek di directory tema resmi dari Hugo
cd testhugo
git init
git submodule add https://github.com/luizdepra/hugo-coder.git themes/hugo-coder
Setelah tema terinstall, kamu wajib melakukan konfigurasi pada file hugo.toml
tambahkan tema coder di dalam file
theme = "coder"
untuk melihat preview atau tampilan dari situs yang sudah kamu buat, masukkan perintah ini di dalam terminal
hugo server
dan akan muncul output seperti berikut
Watching for changes in /data/data/com.termux/files/home/d/{archetypes,assets,content,data,i18n,layouts,static,themes}
Watching for config changes in /data/data/com.termux/files/home/d/hugo.yaml
Start building sites β¦
hugo v0.126.1+extended android/arm64 BuildDate=unknown
| EN
-------------------+-----
Pages | 32
Paginator pages | 1
Non-page files | 0
Static files | 5
Processed images | 0
Aliases | 6
Cleaned | 0
Built in 902 ms
Environment: "development"
Serving pages from disk
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop
untuk melihat bagaimana tampilan situs blog hugo, silahkan buka browser anda dan masukkan url http://localhost:1313
Kesimpulan
Saya juga masih baru belajar tentang Hugo", jika ada hal yang bikin bingung, silahkan tanyakan melalui kolom komentar.
Dengan begini, kita sudah berhasil Membuat Blog dengan Hugo menggunakan Termux. Semoga artikel ini bisa menjadi solusi untuk kalian yang ingin mencoba membuat blog statis dengan hugo.