Search articles, tutorials, tips...
Mari berkenalan dengan hibuno.com sebuah portofolio pribadi Muhibbudin Suretno. Yang menampilkan artikel, tutorial, maupun proyek sumber terbuka secara gratis.
Thanks for reading!
If you found this article helpful, maybe you could help share it.
Let's get acquainted with hibuno.com, Muhibbudin Suretno's personal portfolio, featuring free articles, tutorials, and open source projects.
Analisis mendalam tentang gradien CSS yang kompleks dan latar belakang ganda untuk menciptakan Jolly Roger ikonik Bajak Laut Topi Jerami. Karya seni ini tidak menggunakan gambar atau SVG.
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.
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 username social media misalnya.
Sederhananya gini tulisan yang kamu baca sekarang, saat ini di simpan di sebuah file bernama index.json pada repository https://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.
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.
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.