Di Balik Layar
Portfolio ini tidak pakai hosting autopilot. Saya kemas, kirim, dan jalankan sendiri di satu server kecil — dan tetap cepat diakses dari mana saja. Ini keseluruhan sistemnya dalam satu gambar.
Hampir tiap kunjungan dijawab di edge, dekat pengunjung. Server saya baru disentuh kalau edge belum punya halamannya.
Tanpa hosting terkelola. Situs berjalan di container pada server kecil yang saya kontrol dari atas ke bawah — satu biaya yang pasti, tidak ada yang disembunyikan platform.
Self-host di VPSSaat saya push perubahan, pipeline otomatis mengetesnya, mengemasnya, dan men-deploy-nya. Kalau ada yang gagal cek, itu tak pernah sampai ke situs live.
CI/CD otomatisHalaman dibangun lebih dulu dan dilayani dari server dekat tiap pengunjung, jadi situs tetap gesit bahkan di mesin satu-CPU.
Prebuilt + di-cache edgeUntuk engineer
Tiap bagian dari build, lengkap dengan angka dan trade-off di baliknya. Pilih topik.
Setiap lapisan adalah sesuatu yang saya jalankan dan pahami dari ujung ke ujung — bukan black box yang disembunyikan platform.
React Server Components dan metadata per route, di-prerender jadi HTML statis saat build.
Routing dwibahasa penuh dengan hreflang alternates yang benar; setRequestLocale menjaga tiap route tetap statis.
Kelas utility-first di atas token kecil yang menggerakkan dark theme dan aksen oranye.
Dipakai secukupnya — scroll reveal hanya di tempat yang berguna; fade CSS murni di tempat lain agar JS tidak masuk route.
Image standalone yang di-build di CI dan di-push ke container registry GitHub, diversikan per commit SHA.
Typecheck, lint, build, push, dan deploy via SSH — pipeline yang merah tidak pernah sampai produksi.
Cloudflare meng-cache di edge; nginx terminasi TLS dan reverse-proxy ke container di 127.0.0.1.
Metrics, log, dan alerting untuk box ini dan server klien di sebelahnya — satu pane of glass self-hosted.
AI chat assistant berjalan di Groq; form kontak dikirim server-side lewat Resend.
Semuanya di-prerender statis saat build — tidak ada server rendering per request di hot path.
Payload i18n di client dipangkas jadi 76 KB, bukan mengirim teks semua blog post di setiap halaman.
Tiap halaman blog hanya meng-inject ulang konten post-nya sendiri, jadi satu halaman membawa yang perlu saja.
ISR hanya dipakai di sedikit tempat yang datanya benar-benar live; konten statis tetap statis.
Arsitektur ini bukan teori — ini hasil dari insiden biaya nyata dan keputusan untuk memiliki platform dari ujung ke ujung.
Situs berjalan di Vercel dan melewati kuota Fast Origin Transfer — 15,13 GB dari limit 10 GB — karena tiap kunjungan di-render dinamis dan mengirim payload 1,6 MB.
Profiling per path, static rendering, memangkas payload, dan kompres ulang gambar memangkas origin transfer lebih dari 90% — didokumentasikan lengkap di case study.
Situs kini berjalan di VPS kecil self-hosted: image Docker di-build di CI, dikirim lewat GHCR, di-deploy via SSH, dan di-depan Cloudflare — satu biaya bulanan yang pasti, tanpa plafon kuota, kontrol penuh atas runtime.
Kerja senior sebagian besar adalah penilaian di bawah batasan. Tiap pilihan di bawah dibuat berdasarkan biaya terukur di box 1 vCPU / 512 MB, bukan default.
KenapaDi box 1 vCPU ini, encode satu cover ke AVIF terukur 4–9 dtk dibanding ~0,6 dtk untuk WebP — penalti 7–16×. Cloudflare belum meng-cache /_next/image, jadi encode itu dibayar di origin jauh lebih dari sekali.
WebP saja. Cover tetap ringan tanpa pernah menahan satu-satunya core. AVIF diaktifkan lagi begitu edge meng-cache varian teroptimasi.
KenapaFooter animasinya butuh satu shader, bukan engine 3D umum. Menarik three.js akan menambah jauh di atas 100 kB untuk halaman yang cuma render satu efek gradient.
Efeknya dikirim dalam sekitar 4 kB WebGL yang ditulis khusus — hemat ~25× dibanding pakai library.
KenapaRoute yang satu-satunya animasinya cuma fade tetap menarik seluruh library animasi. Opacity itu GPU-composited — browser melakukannya sama persis secara gratis.
Route-route itu mengirim 0 KB JS animasi dan menghormati prefers-reduced-motion tanpa kode tambahan.
KenapagetMessages dari next-intl tanpa setRequestLocale memaksa SSR dinamis dan menyisipkan payload i18n 1,6 MB — teks penuh ratusan post — di setiap response.
setRequestLocale plus injeksi konten per halaman memangkas payload dari 1.589 KB jadi 76 KB (−95%) dan membuat tiap route bisa di-prerender.
Kenapaoutput: standalone memangkas node_modules hanya ke yang dibutuhkan server.js. Tapi cache varian teroptimasi next/image ada di writable layer container, jadi tiap deploy menghapusnya dan request pertama membayar ulang decode penuh.
Volume Docker bernama menyimpan gambar teroptimasi lintas deploy, jadi redeploy tidak lagi berbiaya cache gambar dingin.
KenapaVPS ini juga menjalankan layanan lain, dan hampir tiap route di-prerender dan dibaca dari disk sementara Cloudflare menyerap traffic berulang. Cache halaman in-memory besar tidak banyak berguna dan menghabiskan jatah tetangga.
Cache halaman dibatasi 16 MB alih-alih default 50 MB — cukup menampung halaman panas, RAM tersisa untuk sisa box.
Aset statis dikirim dengan header Cache-Control immutable satu tahun, jadi kunjungan berikutnya sepenuhnya melewati network.
ETag tetap aktif, jadi revalidasi mengembalikan 304 Not Modified alih-alih mengirim ulang body penuh.
Header keamanan — CSP, HSTS, X-Frame-Options, nosniff — diset di framework, bukan ditempel belakangan.
Gambar dikompres ulang dengan sharp sebelum masuk repository, dan CSS kritis di-inline saat build.
Menjalankan platform sendiri berarti memiliki uptime-nya. Box ini dan server klien di sebelahnya melapor ke satu stack observability self-hosted — setup yang sama seperti di case study monitoring saya.
Prometheus men-scrape node dan container exporter; Loki mengumpulkan log; Grafana jadi satu pane of glass untuk semua server.
Alert rule bereskalasi lewat rantai yang berakhir di panggilan telepon, jadi insiden muncul sebelum dilaporkan pengguna.
Healthcheck Docker menyondir container tiap 30 dtk, dan uptime-kuma memeriksa URL publik dari luar.
Kalau situs saya sendiri diperlakukan seperti ini, bayangkan proyek kamu.
