Breakdown Blog Afrizalhabibi

  Habibi February 19, 2022
  Habibi February 19, 2022

ngeblog dengan hugo

Halo, sudah cukup lama jeda saya menulis di blog ini sejak tulisan terakhir saya tentang cara membuat blog hugo. Memang cukup sulit membagi waktu saat minggu-minggu sibuk belakangan ini.

Di tulisan kali ini saya akan bercerita tentang teknologi apa saja yang saya gunakan untuk membuat blog ini, mulai dari bagaimana saya menentukan platform, desain dan memilih framework hingga blog ini bisa di akses.

Sebelum saya menulis di blog ini, saya sudah mulai menulis sejak masih sekolah dulu. Akan tetapi karena masalah kesibukan dan waktu untuk mengelola blog sudah sangat terbatas, sehingga saya tutuplah blog tersebut karena cukup mahal juga keluar biaya untuk bayar sewa hosting dan domain, sedangkan saat itu saya belum punya penghasilan.

Kemudian hari terlintas ide ingin membuat blog lagi tetapi kali ini berbeda, saya ingin semua kontrol blog ada di saya dan benar-benar saya bangun dari tahap merancangnya, coding hingga deploy, hitung-hitung sekaligus menerapkan ilmu yang saya punya lah…

Tadinya saya mau menggunakan database ke blog ini, tetapi mengingat tujuan saya membuat blog ini hanya sebagai wadah menuangkan ide saja disaat waktu luang, ya sekedar berbagi pengalaman dan sesuatu yang menarik saja, klise sekali ya alasannya…

Saya membangun blog ini perlu waktu kurang lebih dua bulan, tergantung waktu luang dan mood buat lanjutin ngoding. Oke baiklah, kembali ke topik utamanya, berikut beberapa teknologi yang saya gunakan untuk membangun blog ini.

Untuk lebih jelasnya, saya buatkan tabel dibawah ini sebagai detail tentang teknologi yang saya gunakan untuk blog ini.

Concept Clean & Minimal
Engine Hugo
CSS Framework Bulma
Comment Disqus
Email Subscription Mailchimp
Contact Form Getform
Captcha Google reCAPTCHA
Search Platform Algolia
Code Higlighter Prism
Repository GitHub
Hosting & Build Tools Netlify

Engine Blog

Setelah riset singkat, berdasarkan tujuan saya membuat blog yang hanya berfokus untuk media menyalurkan ide, maka saya memilih Hugo sebagai engine blog ini. Bukan tanpa alasan, saya sudah cukup lama kenal dengan Hugo. Tentang hugo, saya sudah pernah bahas di tulisan saya tentang Ngeblog dengan Hugo.

Terbukti, hugo memberikan dampak yang besar bagi performa blog ini. Dengan basisnya sebagai static site, blog ini dapat diakses dengan cukup cepat di jaringan internet yang stabil.

Konsep dan Desain

Konsep dari desain blog ini adalah clean dan minimalis, pembaca hanya akan menemukan tulisan-tulisan saya di halaman utama dan satu form untuk berlangganan notifikasi email jika saya menambahkan tulisan baru, tidak ada sidebar atau menu yang tidak terlalu penting.

- Desain Halaman Utama

Layout artikel yang saya gunakan juga cukup sederhana, hal ini bertujuan agar pembaca lebih fokus pada konten tanpa terdistraksi oleh fitur-fitur yang kurang penting. Beberapa fitur yang tersedia di halaman artikel adalah share post, tags, donasi, artikel terkait, dan kolom komentar.

- Desain Halaman Artikel

Pemilihan font juga saya sesuaikan agar tidak terlalu banyak jenis font berbeda sehingga membuat desain tidak kehilangan kesan minimalisnya.

Untuk logo blog ini juga saya konsep dan desain sendiri se-minimal mungkin tetapi tetap mendeskripsikan blog ini.

- Desain Logo

CSS Framework

Blog ini dibangun di atas framework Bulma. Kenapa bukan Bootstrap? Kan sudah cukup familiar?

Sebenarnya tidak ada alasan khusus, baik Bootstrap, Bulma ataupun sekian banyak framework CSS yang lain menurut saya semuanya bagus. Hanya saja untuk blog ini saya ingin menggunakan bulma, yah.. sekalian belajar framework yang berbeda, agar tidak nyaman karena alasan “cukup familiar” saja.

Dengan framework CSS tentunya memudahkan saya untuk menyusun layout blog ini sesuai dengan desain yang saya inginkan. Selain itu tentunya tampilan blog ini sudah responsive di berbagai device, baik desktop, notebook, notepad hingga smartphone.

Aplikasi Pihak Ketiga

Karena blog ini merupakan blog statis, artinya blog ini tidak mendukung pengolahan database didalamnya, maka untuk beberapa fitur, saya menggunakan aplikasi dari pihak ketiga berikut ini sehingga fitur-fitur itu tetap dapat digunakan.

Disqus untuk Komentar

Agar saya dapat menerima feedback dari pembaca terhadap tulisan-tulisan saya, maka saya memerlukan fitur komentar di setiap artikel yang saya buat. Oleh karena itu saya menggunakan disqus. Alasannya sederhana, disqus sudah banyak digunakan sebagai plug-in komentar dan komunitasnya juga sudah cukup besar.

- Disqus

Mailchimp untuk Email Subscription

Salah satu cara saya mengumpulkan data pembaca adalah dengan menggunakan mailchimp, ini saya terapkan di fitur berlangganan email. Pengunjung yang ingin mendapatkan notifikasi email ketika saya menambahkan tulisan terbaru di blog hanya perlu mengisi form dengan email aktif mereka dan menekan tombol Subscribe.

- Mailchimp

Getform.io untuk Kontak

Blog yang baik adalah blog yang menerima saran dan masukkan dari pembacanya, oleh karena itu di halaman kontak, saya menyediakan form untuk pembaca yang ingin memberikan masukannya terhadap blog ini. Baik itu berupa ide ataupun kritik dan saran yang membangun sehingga blog ini dapat lebih baik lagi.

Form itu sendiri saya buat menggunakan embeded code dari Getform.io, pesan yang dikirimkan oleh pengunjung akan masuk kedalam endpoint saya dan akan saya baca secara berkala. Untuk mencegah bot mengirimkan pesan spam ke endpoint saya, maka saya menambahkan verifikasi dari Google Recaptcha.

- Getform.io

Algolia untuk Pencarian

Blog ini menerapkan konsep minimalis dan sederhana, bahkan ketika pembaca ingin mencari tulisan di blog ini, pembaca hanya perlu mengetikkan kata kunci dan tulisan yang terkait akan muncul di hasil pencarian tanpa perlu menekan enter dan menunggu halaman memuat ulang konten.

Hal ini dapat terjadi karena API algolia yang saya gunakan untuk fitur pencarian, algolia akan mengumpulkan atribut kedalam sebuah index file JSON, isi record inilah yang nantinya akan dipanggil melalui input pencarian dan di proses oleh API Algolia sehingga dapat ditampilkan dihalaman hasil pencarian.

Ada beberapa cara penerapan API ini, saya sendiri memanfaatkan fitur crawler, Cara ini akan lebih memudahkan automatisasi algolia dalam mengisi index berdasarkan update index di blog. Jadi, setiap netlify saya melakukan build, maka algolia crawler akan melakukan update index pada file JSON secara otomatis.

- Algolia Crawler

Prism untuk Code Highlighter

Sebagian besar isi konten di blog ini akan bertema pemrograman dengan berbagai macam bahasa pemrograman didalamnya, karena itu konten yang akan memuat kode di dalamnya memerlukan code highlighter sehingga pembaca tau struktur kode tersebut.

Prism.js yang saya kustomisasi tampilannya jadi solusi untuk code highlighter sehingga pembaca yang ingin menyalin kode yang saya muat di tulisan saya akan lebih terbantu dan meningkatkan nilai user experience pada blog ini.

Ini adalah contoh code highlighter

Repository, Hosting dan Domain

Setelah saya merancang dan membuat blog ini secara lokal, tentu untuk dapat diakses secara publik, saya perlu mengupload blog ini ke platform Hosting.

Untuk blog statis ini saya menggunakan Netlify sebagai platform untuk build tools sekaligus hosting untuk blog ini.

Dengan menghubungkan repository Github saya ke Netlify dan melakukan beberapa konfigurasi, blog ini sudah dapat diakses. Sehingga ketika saya melakukan push kedalam repository saya, maka Netlify akan otomatis melakukan build untuk meng-update perubahan web saya sesuai dengan repository.

Setelah selesai, saya mengubah default domain menjadi custom domain yang sudah saya beli sebelumnya di jasa penyedia domain, sehingga blog ini terlihat lebih profesional.


Afrizal Habibi - Penulis
Terima kasih sudah membaca, kamu bisa mendukung penulis dengan mentraktir kopi atau bagikan blog ini ke sosial media!



NEWSLETTER

Mau dapat email setiap ada postingan baru?

comments powered by Disqus