Workflow Blogging dengan Hugo di VPS Hosting Sendiri

JagoTekno.com - Hugo telah membuat cara saya nge-blog jadi lebih berbeda.

Saya mempelajari banyak hal baru yang tidak pernah saya dapatkan sebelumnya.

Selain itu saya juga mendapatkan performa website yang lebih baik dari pada wordpress secara native sebelumnya.

Baca juga : Kenapa nge-blog menggunakan Hugo lebih baik dari pada Wordpress?

Pada artikel ini saya ingin menunjukkan bagaimana workflow saya nge-blog menggunakan Hugo.

Silahkan dibaca sampai akhir.

TLDR:

$ cd mylocalhugosite
$ hugo
$ rsync -aruzv public/ * root@your.ip.address.number:your/site/folder/on/hosting/htdocs/

Apa yang saya gunakan untuk nge-blog menggunakan Hugo?

Nge-blog dengan hugo tidak mudah. Saya hanya perlu menggunakan alat ini:

• Vim : Text editor untuk membuat artikel, dan menjalankan server hugo secara local
• Web Browser : untuk preview website sebelum diupload ke internet/hosting
• Rsync : Software terminal based untuk mengirim file website ke hosting
• Flameshot / Scrot : Tool untuk melakukan screenshot
• Gimp : Software untuk edit gambar (resize, crop, edit)
• Tiling Window manager : Konfigurasi desktop linux untuk bekerja dengan lebih cepat dan efisien (saya menggunakan DWM, AwesomeWM, BSPWM, dll)

Install Hugo di laptop bukan di server

Pertama download dan install hugo di laptop/komputer.

Karena saya menggunakan Linux debian based, cukup buka terminal lalu masukkan perintah apt get install hugo. Silahkan sesuaikan dengan perintah distro yang anda gunakan.

Atau download Hugo langsung dari situsnya.

Setelah terinstall coba jalankan perintah ini di terminal hugo version

Saat artikel ini dibuat, versi hugo berada di 0.105.

Membuat website hugo di laptop / komputer lokal

Setelah hugo terinstall jalankan hugo new site webhugoanda.

Setelah itu anda bisa menjalankan hugo saat ini dengan perintah hugo server, lalu buka localhost:1313 di browser anda.

Tetapi tampilannya hanya layar putih saja.

Itu karena hugo tidak memiliki theme bawaan.

Jadi mari kita pasang theme dulu.

Install Theme

Buka halaman ini lalu anda akan memilih banyak tema hugo.

Copy theme yang anda sukai menggunakan perintah git clone lalu simpan di folder theme yang sudah dibuat pada folder webhugoanda di komputer.

Setting file config.toml yang ada di bawaan folder webhugoanda.

Kemudian sesuaikan dengan pengaturan readme yang ada di theme.

Jika tidak ada penjelasan tentang itu, silahkan tambahkan baris ini

theme: namafoldertheme

Setelah itu jalankan lagi hugo server semestinya anda sudah melihat tampilan website hugo yang sudah anda buat dengan theme yang sudah dipilih.

Buat konten / artikel menggunakan format markdown (.md)

Artikel bisa dibuat dengan sangat mudah dengan perintah hugo new konten.md

Masuk ke folder content/ lalu anda akan melihat file konten.md yang sudah dibuat.

Tulis kontent / artikel dalam format markdown.

Saya biasa belajar menulis di markdown melalui situs ini

Preview + build site

Setelah kontent dibuat kembali lakukan preview secara keseluruhan lalu jika sudah cocok, build website hugo anda.

• Preview : hugo server
• Build : hugo

Setelah dibuild, anda akan melihat sebuah folder bernama Public.

Semua file markdown dan theme yang digunakan akan diconvert menjadi halaman halaman web statis ke dalam folder Public.

Untuk mencobanya, silahkan buka file index.html pada vscode lalu jalankan live server. Anda akan bisa mengakses situs itu sebagaimana mestinya nanti.

Ketika mencoba ini dan berjalan normal. Saya pun langsung berpikir bahwa kenapa tidak dikirim saja semua file ini ke hosting VPS saya.

Deploy/kirim website ke hosting

Begini cara saya membuat website hugo saya online di internet.

1. Saya menggunakan VPS hosting
2. Login ke server lalu saya install panel EasyEngine pada hosting tersebut untuk memudahkan saya membuat website.
3. Buat website hanya dengan satu perintah ee site create namasitus. com
4. Ketik ee site info namasitus. com untuk mencatat dimana letak situs tersebut? Biasanya tersimpan di /opt/easyengine/namasitus.com/app/htdocs/.
5. Copy seluruh isi folder Public hugo yang ada di laptop/komputer anda ke folder htdocs server dengan perintah rsync -aruzv public/ * root@your.ip.address.number:your/site/folder/on/hosting/htdocs/
6. Situs hugo anda pun seketika akan online dan bisa diakses di internet.
7. Untuk update artikel, cukup lakukan lagi langkah ke-5 di atas.

Tentang rsync

Rsync merupakan program/software yang berjalan di linux/unix untuk mengirim data dari local ke server atau antar server.

Fungsinya biasa digunakan untuk backup data atau mengsinkronisasi data antar direktory.

Setelah mengetahui fungsi ini akhirnya saya bisa menetapkan hati untuk membuat website dengan base hugo. Workflow nya pun sudah klik dengan hati.

Kelebihan menggunakan Hugo

Hal yang saya sukai adalah semua artikel yang sudah ku tulis terdapat di folder Content. Sedangkan gambarnya yang diupload terdapat di folder Static.

Jadi sangat fleksibel untuk dibackup atau dipindahkan ke tempat lain.

Kekurangan menggunakan Hugo

Menggunakan hugo bukan berarti tidak ada kekurangannya. Jika tidak hati-hati mendevelopnya, anda bisa dengan gampang merusak website hugo anda.

Saya ingin memberikan beberapa tips untuk menghindari hal-hal yang tidak diinginkan.

Jangan hapus folder apapun pada direktory website local anda kecuali folder Public

Workflow hugo memiliki kesan programmer banget. Padahal artikel yang ditulis adalah tentang makanan dan resep masakannya

Akhir kata

Demikian tutorial lengkap menggunakan Hugo sebagai platform blogging gratis.

Anda mungkin memiliki workflow yang lebih baik ketika menggunakan Hugo pada website yang disimpan pada VPS hosting, tetapi sejauh ini saya merasa bahwa cara ini adalah yang terbaik.

Semoga membantu.