Behind The Scene HiRahmat.Dev
Proses membangun dan mengembangkan website HiRahmat.Dev
Blog • Dipublikasikan pada 24 Oktober 2025, terakhir diperbarui pada 24 Oktober 2025.
Halo semuanya. Saya ingin memulai blog pertama saya dengan men-share proses saya dalam mengembangkan website pribadi ini.
Di tengah-tengah banyaknya orang yang pengen bisa bikin website supaya bisa kerja as a Web Developer (setidaknya di sekitar saya), tapi bingung mulai proyeknya dari mana. Website portfolio + blog pribadi itu bisa jadi ide pertama yang bagus buat nunjukkin personal kita ke khalayak umum, khususnya para HR — pastinya sambil apply cv kalian ya ke banyak company. Semoga tulisan ini membuat kalian termotivasi buat mulai berkarya juga, atau yang udah buat tapi belum beres, kalian mau beresinnya hehe.
Ide bikin website ini udah lama banget. Sejak awal saya nge-bootcamp, tepatnya 6 tahun yang lalu. Tapi entah kenapa gak mulai-mulai. Saya emang agak perfeksionis. Ya, itu kelemahan saya bisa dibilang.
Kenapa “perfeksionis” jadi kelemahan?
Karena jadi gak mulai-mulai haha. Tapi setelah pengalaman saya menjadi frontend developer dan kerja bareng tim lain selama kurang lebih 5 tahun ini, saya jadi berpikir, ternyata “yang penting beres” itu ada baiknya juga. Toh, nanti bisa saya iterasi atau perbaiki secara perlahan dan itu lebih meringankan beban buat tim lain daripada gak mulai sama sekali. Dari situ, saya belajar tentang menurunkan perfeksionis saya sendiri, bukan dihilangkan sama sekali. Ya, sama kaya website ini — tulisan ini khususnya, jauh dari kata sempurna (ngomong-ngomong soal “sempurna”, lagi-lagi sifatnya subjektif ya nggak? wkwk). Tapi gak apa-apa, yang penting kan mulai dulu.
Tahap Perencanaan
Saya memulai website ini lewat figma, yap saya gak langsung coding, saya desain dulu.
Desain website saya banyak terinspirasi dari website berikut:
Saya suka yang rounded-rounded.
Kan ada AI? Kenapa desainnya gak pakai AI?
Hmm, entah ini bagian dari perfeksionis saya juga kayaknya. Menurut saya AI masih belum bisa memuaskan standar saya dalam membuat website khususnya desain — untuk saat ini setidaknya. Tapi tenang, saya gak tertutup sama sekali dengan perkembangan AI, saya juga pakai kok, tapi yang sifatnya sebagai tools untuk perencanaan dan brainstorming. Tulisan ini pun saya minta buatkan outline-nya, haha.
Lalu setelah saya desain, baru saya coding.
Pakai Stack Teknologi Apa Saja?
Saya menggunakan NextJS 15 (App Router) + Notion sebagai CMS-nya, konten-konten tulisan ini ditulis di notion pribadi. Setup-nya emang agak ribet ya, tapi saya suka ngerjainnya. Justru kalo terlalu mudah malah gampang bosen, ya gak sih? Nanti saya share juga dalam bentuk tulisan tentang cara menggunakan notion sebagai database. Stay tuned ok.
Kalian bisa liat repository website ini di sini.
Ini setup notion sebagai database articles saya (sekarang udah ada fitur baru di notion, namanya data source, jadi dalam satu database bisa banyak data source. Mirip kayak sql kan? Satu database banyak table. Dulu mana bisa tuh).
Bahkan, manajemen pengerjaannya saja saya pakai notion dalam bentuk board supaya mudah nge-track tugas yang sedang berjalan dan ide baru apa saja buat ditambahin di website ini.
Semua yang berkaitan dengan konten, pakai notion.
Ekspektasi saya ketika orang-orang mengunjungi website ini, ingin supaya mereka merasakan pengalaman yang menyenangkan dalam mengeksplorasi. Desain yang bersih, struktur yang rapih, hirarki tata letak dalam meng-engage mata para pembaca ke website sengaja dibuat jelas, serta isi konten yang reflektif, jujur, dan apa adanya menurut saya adalah kunci untuk menciptakan kenyamanan tersebut dan betah untuk berlama-lama.
Karena bagi saya, memberi kesan yang nyaman sama pentingnya dengan membuat isi konten yang bekualitas.
Tantangan
Bagian yang menantang pertama adalah mencari inspirasi untuk gaya desain website ini. Maklum, secara profesional saya bukan desainer UI/UX, saya hanya menyukai desain visual secara umum. Jam terbang saya yang sangat sedikit dalam mendesain pasti bisa mempengaruhi kecepatan mendesain website. Dulu, waktu di kampus pernah mendesain pamflet dan banner saja, itupun jarang. Untungnya sekarang udah ada AI Generative yang udah sangat bisa menggantikan tugas copywriter (dengan penyesuaian selera pastinya), jadi gak makin lama buat ngisi kontennya.
Bagian yang menantang kedua adalah integrasi notion sebagai database. Lebih tepatnya bagian merender block-block notion (block: istilah untuk isi konten pada halaman notion) dari format notion api ke halaman rapih seperti ini. Sebenernya udah ada beberapa library untuk mengatasi hal itu. Sayangnya library-library tersebut tidak memakai Notion SDK Javascript Official dari notion, yang mana menurut saya agak kurang enak, malah bikin pusing dan merasa kurang mengontrol secara penuh, dan lebih sulit dikustomisasi style-nya. Kalo saya boleh memparafrasekan kalimat yang sering saya dengar dari rekan kerja saya, rizqyhbb.dev:
Jika di masa depan terlalu banyak uncertainity, lebih baik tinggalkan.
Akhirnya saya lebih pilih integrasi manual, saya jadi lebih tau proses merender struktur response dari Notion API, serta lebih merasa punya kontrol penuh terhadap block-block mana saja yang saya butuh dan saya mau kustomisasi. Kalau ada kesulitan dalam merender block, tinggal minta bantuan AI, hehe. Memang, belum semua block notion bisa ke-render, tapi untuk sekarang sudah sangat cukup untuk kebutuhan blog ini. Ke depannya pun saya bakal terus perbarui block-block notion yang perlu dirender — sesuai kebutuhan.
Buat developer, kalian boleh cek (dan bebas pakai) kode saya dalam merender block notion.
Buat sekarang itu dulu. Bakal masih dilanjut kok..
