Workflow Blogging dengan Hugo di VPS Hosting Sendiri

JagoTekno – Akhirnya saya tertarik menggunakan Hugo sebagai platform untuk kegiatan blogging saya. Kenapa sih pakai Hugo? Kan ada wordpress yang jauh lebih powerfull.

Oh iya, sebelumnya saya pernah membuat website hugo gratis yang dihosting di github pages. Namun artikel ini berbeda, karena kita akan hosting di VPS sendiri.

Nah di sini saya ingin menceritakan kenapa saya menggunakan hugo dan bagaimana cara nge-blog dengan hugo, serta plus minus menggunakan hugo sebagai platform blogging.

TLDR:

$ cd mylocalhugosite

$ hugo

$ rsync -aruzv public/* [email protected]:your/site/folder/on/hosting/htdocs/

Berikut penjelasan lengkapnya.

Apa itu hugo

Hugo adalah salah satu platform untuk membuat halaman web statis (static site). Hugo dikenal sebagai Static site generator (SSG).

Halaman situs yang telah dibuat dengan Hugo akan langsung bisa berjalan tanpa pengaturan apa-apa lagi seperti setting PHP dan MySQL untuk database dan lain sebagainya. Ini akan menghemat waktu dan proses pencarian data di database.

Intinya konten dibuat menggunakan markdown akan diconvert oleh hugo menjadi halaman web statis dan akan langsung live.

Apa itu static site?

Tahukah anda kalau anda bisa membuat situs hanya menggunakan 1 file html saja? Anda bisa membuatnya saat ini dengan membuat file index.html lalu isi dengan format html standart seperti ini :

<!DOCTYPE HTML>
<html>
    <head>
        <title>Selamat Datang HTML</title>
    </head>
    <body>
        <p>Halo dunia!</p>

        <p><b>Tulisan tebal</b>, <i>tulisan miring</i>, <u>tulisan bergaris bawah</u></p>
    </body>
</html>

Yap di atas adalah contoh file html dengan tulisan Halo dunia! di dalamnya.

Tapi dengan hugo, anda tidak perlu repot membuat semua artikel dengan menuliskan format html di atas. Anda hanya perlu menulis isi artikel ke dalam file markdown. .md dan hugo akan konvert setiap halaman tersebut menjadi halaman statis.

Perbandingan hugo dengan wordpress

WordPress sebagai salah satu CMS terbaik di dunia, kebanyakan situs di yang online menggunakan wordpress. Selain karena gampang digunakan fiturnya juga sangat banyak dan lengkap, mulai yang gratis sampai yang berbayar.

Sedangkan Hugo hadir bukan sebagai CMS, tetapi static site generator (SSG).

Sebagai pengguna wordpress dan hugo berikut perbandingan antara keduanya.

Theme

WordPress memiliki lebih banyak theme dibandingkan HUGO. Secara default setelah install Hugo kita tidak akan mendapatkan theme bawaan. Theme harus didownload terlebih dahulu atau dibikin sendiri.

Theme WordPress terdiri dari file .php sedangkan theme hugo terdiri dari file html, css, dan markdown.

Database

Artikel yang dibuat menggunakan WordPress akan tersimpan di database MySQL, begitupun dengan pengaturan websitenya. Database ini rusak maka seluruh website akan rusak/tidak bisa diakses lagi.

Hugo tidak memiliki database karena dia hanya sekumpulan file html, css, dan js. Setiap artikel yang telah dikirim ke hosting dan bisa diakses melalui internet hanya berupa file html, bahkan gambar yang ikut disimpan di sana akan tersimpan di folder gambar yang sudah ditentukan.

Workflow

Untuk blogger yang produktif atau menghandle banyak penulis, mungkin wordpress merupakan pilihan terbaik. Menulis dan menerbitkan konten akan terasa lebih cepat. Hanya perlu login ke wordpress lalu tulis konten di sana.

Tapi di Hugo berbeda. Kira-kira seperti ini :

  1. Hugo diinstall di laptop/komputer
  2. Tulis konten dengan perintah hugo new content namakonten.md
  3. Preview tampilan website / konten yang sudah ditulis menggunakan perintah hugo server
  4. Build website hugo dengan perintah hugo
  5. Website hugo anda berada di folder Public/.
  6. Copy semua isi folder Public/ ke folder /htdocs/ di server anda.

Selengkapnya ada di bawah.

Kenapa pakai hugo?

Menggunakan hugo bukan karena menghindari WordPress, tapi karena ingin lebih minimalis.

Kegiatan blogging yang hanya seputar menulis konten, membuat gambar. Sedangkan fitur wordpress bisa lebih dari pada itu.

Di hugo kita akan menghabiskan sebagian besar waktu untuk menulis konten di text editor seperti (VIM, VScode, Sublime Text, Notepad, dan lain-lain)

Belajar hal baru

Awalnya saya mengira bahwa hugo itu harus diinstall di server lalu untuk menulis kontennya kita harus login dulu lalu menulis konten, lalu build sendiri

Hugo adalah cara termudah untuk membuat website tanpa perlu ribet setting server. Yang paling perlu dibuat hanyalah web servernya saja (Nginx atau Apache).

Setelah itu copy hugo site dari komputer local (laptop/komputer pc) ke web server/ yang sudah siap online.

Di sini saya belajar hal baru ternyata bisa membuat halaman website keren semudah ini.

Baru paham juga ternyata seperti ini cara kerja static site. Mungkin karena sebelumnya saya tidak begitu memahaminya.

WordPress terlalu overkill untuk kebutuhan nge-blog saja

Saya merasakan hal itu setelah menggunakan keduanya (wordpress dan hugo). Banyak sekali fitur WordPress yang tidak saya gunakan dan merasa bahwa WordPress overkill dan HUGO adalah jalan ninja ku untuk menjadi minimalis.

Tidak perlu berurusan dengan database, dan hal ribet lainnya. Tidak perlu membuat table database yang ribet di server lalu mengkoneksikannya dengan wordpress.

Intinya saya hanya ingin membuat halaman website lalu menampilkannya. Thats it.

Space VPS hosting nganggur

Hosting VPS saya masih banyak space nya, maka dari itu saya ingin menambahkan static site saja. Hitung-hitung untuk belajar VPS.

Workflow nge-blog menggunakan hugo

Begini cara saya nge-blog menggunakan hugo :

Install Hugo di laptop bukan di server

Pertama download dan install hugo di laptop/komputer. Karena saya menggunakan Linux, cukup buka terminal lalu masukkan perintah apt get install hugo

Saya tidak pernah install hugo di sistem windows secara native. Tapi ini bisa diakali dengan menggunakan virtual.

Setelah terinstall coba jalankan perintah ini di terminal hugo version

Saat artikel ini dibuat, versi hugo berada di 0.91.

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

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/* [email protected]: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.

Tinggalkan komentar