My Blog Setup - Mengevaluasi Kembali Pilihan Teknologi pada Blog

Sebelum post ini dibuat, pilihan teknologi yang dipilih dalam blog ini adalah:

  • Hugo: sebagai framework yang dipakai, salah satu _Static Site Generator _yang popular.
  • Gitlab Page: untuk menghosting konten statis dari website blog ini.
  • Gitlab CI: untuk mengotomatisasi deployment ke Gitlab Page.

Dalam postingan sebelumnya, saya menuliskan hal ini:

Memilih Hugo sebagai blog engine, saya dihadapkan satu konsekuensi (yang masih oke menurutku): hanya Gitlab Page yang mendukung Hugo, yang menawarkan seamless integration dengan Gitlab CI untuk proses otomatisasi publikasi website blog saya. Kebalikannya, GitHub Page hanya mendukung Jekkyl saja 😢, tapi tidak apa-apa.

Sebenarnya bisa saja saya menggunakan GitHub Page, tapi effort yang digunakan akan lebih menyita waktu dalam hal membangun CI/CD, GitHub belum punya offering CICD yang seamless dengan GitHub Page. Gitlab sebaliknya lebih simpel: mereka punya Hugo Blog Template dan Hugo CICD template, itu saja sudah cukup memenangkan hati saya ❤️

Benar saja, Gitlab Page dan Gitlab CI sangat simpel dan mudah untuk digunakan bagi pemula seperti saya. Kedua komponen itu membuat saya fokus belajar memakai Hugo selama 2 jam pertama ketika memulai bootstrap blog ini.

Selama 2 jam pertama itu pula, saya mulai memikirkan bagaimana flow yang ideal (bagi saya) dalam penulisan blog dan melakukan tuning sistem blog.

Ini adalah inisial pemikiran saya saat itu: untuk setiap 1 task, seperti: menambahkan/memperbaiki konten blog, memperbaiki sistem komentar di blog, dll:

  1. Buat branch baru dari branch master
  2. Buat perubahan di repositori
  3. Panggil hugo serve di lokal untuk mengetes langsung bagaimana dampak dari perubahan yang dilakukan
  4. Perbaiki kalau ada kesalahan dan dicoba terus sampai poin 3 benar-benar sesuai yang diinginkan, lalu
  5. Merge ke branch master
  6. Push ke origin Gitlab, dan Gitlab CI akan melakukan langkah selanjutnya untuk men-deploy website ke Gitlab Page

Tapi, saya sadar bahwa terdapat beberapa kekurangan dari flow tersebut:

  • Tidak dapat mereview secara langsung (baca: online) perubahan dari suatu branch (terkait dengan perubahan yang dilakukan ke blog sistem maupun konten blog). Ini kelemahan terbesar menurutku, karena jika memungkinkan, memperbaiki kelemahan ini akan menyelesaikan beberapa gap seperti:

    • Melakukan tes final sebelum mendeploy perubahan tersebut ke production. Ini hal yang penting dan praktikal, karena testing blog di local environment tidak bisa mengungkap beberapa bug, terutama terkait dengan integrasi ke pihak ketiga. Contohnya: sistem komentar Disqus tidak dapat dipakai di local environment dan fitur social sharing memiliki limitasi jika dijalankan di local environment. Bahkan ada beberapa bug yang hanya akan terlihat ketika live online, biasanya terkait dengan hyperlink dan url path.
    • Memudahkan ketika ingin meminta teman untuk proof read terkait postingan blog terbaru, tanpa harus melakukan perubahan langsung ke blog versi production.
  • Flow di atas terlalu mengandalkan pemakaian laptop/komputer hanya untuk melakukan blogging. Ini bukanlah komplain besar, tapi menurutku sangat oke jika ada solusi yang membuat penulisan blog, tidak hanya melalui komputer/laptop, tapi juga smartphone.

    • Contoh kasus: saya butuh traveling atau jalan-jalan keluar kota, saya biasanya membuat draft blog di smartphone. Namun untuk melakukan posting blog langsung secara online, saya harus mendapat akses komputer (dan telah disetup dengan kredensial ke repository Gitlab). Tentu saja ini sangat membatasi kemampuan kita dalam melakukan blog kapanpun dan di manapun. Flow saat ini intinya masih membutuhkan akses ke terminal: untuk mamakai command git (commit dan push) serta hugo serve untuk pengecekan di lokal.

Dari kelemahan di atas, saya akhirnya memutuskan untuk mencari solusi termudah dan simpel yang bisa menutupi poin kekurangan di atas, dan alhamdulillah ketemu juga 😏

Baca selanjutnya →

My Blog Setup - Cara Membuat Blog Post di Hugo

Sedikit intermezzo, di blog postingan sebelumnya, kita sudah melihat-lihat apa saja konfigurasi terpenting di Hugo yang dapat dipersonalisasi sesuai kebutuhannya.

Langkah selanjutnya dalam mengembangkan blog, tentu saja adalah konten dari blog ya. Tanpa konten yang baik, tentu blognya tidak berarti dong. Alur pembuatan konten di Hugo platform juga perlu diperhatikan agar pengalaman menulisnya juga lebih maksimal dan terhindar dari error yang tidak berarti.

Untuk itu di post kali ini, kita akan melihat bagaimana cara membuat blog post di Hugo, tidak hanya kontennya saja, tetapi juga cara mengeset berbagai metada dari postingan itu sendiri, seperti kapan post itu dipublikasikan, judul, dan image dari postingan.

Membuat Postingan dan Halaman Baru

Pada dasarnya, ada 2 kategori konten di Hugo: Post(postingan) dan Page(halaman) seperti yang sudah dijelaskan di bagian Hugo dan Struktur Konten.

  • page ini adalah folder tempat menampung semua konten halaman yang independen, ditampilkan hanya dengan mengetahui link konten halaman itu saja, tanpa ditampilkan secara kronologi waktu. Contohnya: Tentang Saya, Hubungi Kami, dan halaman Portofolio.
  • post untuk seluruh konten di folder ini, semuanya akan ditampilkan secara kronologi berdasarkan waktu publikasinya. Di sini lah tempat kita membuat postingan blog.

Tidak ada perbedaan dalam cara membuat postingan dan halaman baru.

Untuk membuat postingan baru:

hugo new content/post/<title>.md

Dan untuk membuat halaman baru:

hugo new content/page/<title>.md
Baca selanjutnya →

My Blog Setup - Sepintas Tentang Hugo Configuration Setting

Di post sebelumnya, saya telah mendeskripsikan step by step membuat blog dengan Gitlab Page + Hugo + Gitlab CI, hingga mempulikasikannya ke website yang bisa diakses oleh publik di https://<user>.gitlab.io/<repo-name>, dalam kasus saya: https://bangau1.gitlab.io/my-blog/ (ini bukan blog sebenarnya, hanya demo blog saja)

Hugo dan Struktur Konten

Sebelum kita masuk lebih jauh mengenai konfigurasi setting dari Hugo, saya akan terlebih dahulu menjelaskan struktur konten dari Hugo, spesifiknya struktur yang disediakan oleh template Hugo dari Gitlab.

├── config.toml
├── content
│   ├── _index.md
│   ├── page
│   │   └── about.md
│   └── post
│       ├── 2015-01-04-first-post.md
│       ├── 2015-01-15-pirates.md
├── resources
│   └── _gen
│       ├── assets
│       └── images
├── static
│   └── favicon.ico
└── themes
    └── beautifulhugo
Baca selanjutnya →

My Blog Setup - Setup Repositori Blog dan CI/CD

Di post sebelumnya saya telah menjelaskan alasan memakai Gitlab Page: karena menawarkan pengalaman yang seamless untuk framework blog yang saya pakai: Hugo; dan juga Gitlab Page sangat seamless untuk mengkonfigurasi CI/CD yang diperlukan. Proses CI/CD diperlukan karena untuk menampilkan blog dari Hugo, dibutuhkan proses konversi dari tulisan dalam bentuk Markdown, menjadi format markup HTML. Di sinilah saya memilih menggunakan Gitlab CI, di mana di dalamnya akan memanggil suatu Hugo command untuk menghasilkan konten blog dalam HTML format.

Sedikit intro mengenai Gitlab Page, ini adalah produk dari Gitlab, di mana setiap orang dapat menaruh static content dan mempublikasikannya ke website dengan format:

  • https://<user>.gitlab.io/<repo-name>, kalau memilih setting Project Site, atau
  • https://<user>.gitlab.io, kalau memilih setting User or Organisation Site

Saya memilih opsi pertama karena ke depannya saya mungkin saja memiliki blog atau website lainnya. Kalau memilih opsi kedua, antar website atau blog saya akan memiliki subdomain dan prefix yang sama, pastinya akan clash satu sama lainnya.

Baca selanjutnya →

My Blog Setup - Konsiderasi Memilih Framework

Hi, seperti janji saya sebelumnya, di post kali ini saya akan menceritakan detil setup blog dari awal.

Pada awalnya, ada beberapa opsi solusi nge-blog yang saya pertimbangkan: antara menggunakan platform blog online terkenal seperti Wordpress.com dan Medium, atau pilihan lainnya membuat blog pribadi dari scratch alias bikin sendiri.

Menggunakan opsi platform blog online pastinya opsi termudah. Tapi, saya merasa lebih sedikit menantang kalau bikin sendiri aja dengan memanfaatkan framework blog/website yang banyak komunitasnya, sekaligus menjadikan saya tetap hands on ke hal-hal baru. Untuk opsi bikin blog ini, walaupun menantang, saya juga tidak ingin pembuatan dan maintenance-nya sangat demanding dan mahal, seperti misal harus setup database dan punya server sendiri. Intinya: tidak mahal (kalau bisa gratis), tapi juga menjadikan ini sebagai kesempatan belajar hal-hal baru.

Ada 3 hal yang saya inginkan dari blog ini:

  1. Penulisan konten mendukung format Markdown
  2. Hal-hal berkaitan dengan blog (konfigurasi, kontent, dll) disimpan di sistem yang sangat durable, punya mekanisme backup
  3. Murah. Agak malas kalau perlu mengeluarkan duit sebesar 50rb-100rb rupiah tiap bulannya untuk menyewa server dan database.
Baca selanjutnya →