Mari berkenalan dengan hibuno.com sebuah portofolio pribadi Muhibbudin Suretno. Yang menampilkan artikel, tutorial, maupun proyek sumber terbuka secara gratis.
Perkenalkan, saya Muhibbudin Suretno. Pembuat dan pemelihara situs hibuno.com, situs ini merupakan portofolio pribadi saya dimana akan memuat beberapa artikel, tutorial, dan proyek sumber terbuka (open source) maupun berbayar. Proyek yang saya maksud bisa berupa user interface template, kerangka kerja, prototype, micro-service, atau proyek siap pakai dalam bentuk website, aplikasi desktop maupun aplikasi mobile.
Kenapa namanya hibuno?
Tidak ada alasan khusus, hibuno sendiri sebenarnya merupakan singkatan dari nama saya, yaitu Muhibbudin Suretno. Karena seringkali orang lain sedikit kesulitan untuk mengucap atau menulis nama lengkap saya, jadi dengan singkatan ini saya berharap akan lebih mempermudah orang lain, dan tentunya agar lebih mudah juga untuk diucapkan sebagai usernamesocial media misalnya.
Apa yang akan dibahas?
Sederhananya gini tulisan yang kamu baca sekarang, saat ini di simpan di sebuah file bernama index.json pada repositoryhttps://github.com/hibuno/hibuno yang tentunya dapat kamu akses & pelajari secara gratis. Jadi saya coba buat sendiri sebuah content management system yang mudah digunakan, proses loading-nya sangat cepat, murah (baca: gratis) bisa di jalankan di Vercel, Netlify, atau provider lainnya, serta memiliki text editor berbasis akal imitasi (AI).
Dan tentunya repository yang saya sematkan sebelumnya tidak hanya menyimpan konten untuk artikel, tapi juga keseluruhan situs termasuk admin panel, text editor (WYSIWYG: what you see is what you get), serta beberapa fitur lain yang dapat kamu pelajari secara mendalam pada kode sumber yang tersedia.
Dimana text-editornya sendiri saya buat dari awal berlandaskan pada https://tiptap.dev dengan beberapa tambahan fitur custom, serta integrasi akal imitas yang dapat disambungkan dengan provider ternama seperti OpenAI, OpenRouter, Claude, Mistral, dst. untuk dapat membantu kamu membuat artikel yang lebih rapi, tertata, dan grammar friendly, untuk tampilannya sendiri adalah sebagai berikut.
Bedanya sama CMS lainnya?
Kalau secara fitur memang sangat mature dan lengkap WordPress, namun karena saya mengejar sebuah kesederhanaan, tidak hanya dalam proses penulisan artikel tapi juga pengiriman (baca: deployment) yang lebih mudah.
Pada situs ini saya menggunakan teknologi Next.js 15.5 dengan konsep SSR dimana editor akan menyimpan data pada direktori content sedangkan gambar disimpan di direktori public. Artinya, situs ini sama sekali tidak menggunakan basis data maupun pihak ketiga untuk menyimpan setiap datanya, dan (saat ini) hanya menggunakan satu layanan akal imitasi (AI) untuk menjalankan fitur asisten AI.
Loh kalo gitu, gimana cara nambahin datanya? Apakah aman?
Aman atau tidak itu relative, tergantung gimana kita menyimpan kuncinya. Situs ini hanya menggunakan satu kunci (basic key) sebagai pembatas antara pembaca dan administrator, jika kamu mengakses halaman https://hibuno.com/admin tentunya kamu akan ditanya apakah kamu memiliki kunci untuk mengakses halaman admin atau tidak.
Dan kunci ini tersimpan rapat di dokumen environment variable di mana situs ini dijalankan, tapi sebenarnya tidak ada data yang terlalu penting di situs ini, karena pada akhirnya setiap tulisan yang saya unggah juga dapat di baca di repository publik yang tersedia termasuk dengan gambar ataupun video yang ditampilkan.
Penutup, tapi juga bukan …
Sebelum penutup kalimat, mari kita pelajari lebih jauh apa saja fitur yang tersedia di text editor berbasis akal imitasi yang telah saya bahas sebelumnya, tentunya lewat video demonstrasi berikut, agar lebih jelas dan lebih mudah dipahami.
Sekian pembahasan tentang artikel pertama di situs ini, semoga dapat menjadi gambaran bagaimana tulisan maupun konten yang akan saya buat selanjutnya.
See you next time 🔥
Oh iya, satu lagi. Alat yang saya pakai untuk merekam video demonstrasi adalah alat yang saya buat sendiri, jadi nanti kita bahas di lain kesempatan.