Blog pribadi ini dibangun untuk berbagi catatan tentang teknologi, programming, dan hal-hal menarik lainnya. Seluruh infrastruktur berjalan di ekosistem Cloudflare tanpa biaya bulanan.
Arsitektur
Blog ini menggunakan pendekatan static site generation dengan dynamic features. Halaman utama di-generate saat build time oleh Astro, sedangkan fitur interaktif seperti komentar dan media upload di-handle oleh Cloudflare Functions secara runtime.
Pengunjung mengakses blog melalui Cloudflare CDN yang meneruskan request ke Cloudflare Pages untuk halaman statis, Cloudflare Functions untuk API komentar, Cloudflare D1 untuk database komentar, dan Cloudflare R2 untuk media storage.
Fitur Utama
Blog Engine
- Static site generation dengan Astro 6
- Markdown-based content dengan frontmatter YAML
- Sistem tag dan kategori untuk klasifikasi artikel
- SEO optimized dengan Open Graph dan Twitter Card meta tags
- Responsive design dark/light mode dengan Tailwind CSS 4
Content Management System
- Sveltia CMS sebagai admin panel
- GitHub OAuth authentication untuk keamanan login
- Upload gambar langsung ke Cloudflare R2 dari browser
- Maksimal upload 10MB per file
- Media disimpan di custom domain media.erlkim.web.id
Sistem Komentar
- Custom-built comment system dengan Cloudflare D1 database
- Badge AUTHOR merah untuk komentar milik penulis blog
- Author Key authentication, hanya penulis yang bisa mendapatkan badge
- Field Author Key tersembunyi dan hanya muncul saat nama ERLKIM diketik
- Secret tersimpan di cookie 365 hari setelah verifikasi pertama
- Moderasi via halaman admin /comments-admin
- Hapus komentar dari halaman admin dengan satu klik
Keamanan
- Cloudflare Access melindungi halaman CMS admin
- Cloudflare Access melindungi halaman komentar admin
- GitHub OAuth untuk autentikasi CMS
- Author Key server-side validation untuk badge komentar
- R2 API token dengan permission terbatas hanya 1 bucket
- Semua secret disimpan di Cloudflare Environment Variables
Stack Teknologi
- Framework: Astro 6 (Static site generation)
- Styling: Tailwind CSS 4 (Utility-first CSS)
- CMS: Sveltia CMS (Content management)
- Hosting: Cloudflare Pages (Static hosting + Functions)
- Database: Cloudflare D1 (Komentar storage)
- Media: Cloudflare R2 (Gambar dan file upload)
- Functions: Cloudflare Workers (API komentar + OAuth)
- Auth: GitHub OAuth (CMS authentication)
- Security: Cloudflare Access (Admin page protection)
- DNS: Cloudflare DNS (Domain management)
- CDN: Cloudflare CDN (Global content delivery)
Biaya
Seluruh layanan berjalan di plan gratis Cloudflare. Tidak ada biaya bulanan.
- Cloudflare Pages: Free, unlimited builds dan bandwidth
- Cloudflare D1: Free, 5GB storage, 5M reads per hari
- Cloudflare R2: Free, 10GB storage, 10M reads per bulan
- Cloudflare Functions: Free, 100K requests per hari
- Cloudflare Access: Free, 50 users
Deployment
Setiap push ke branch main akan otomatis trigger build dan deploy ke Cloudflare Pages. Rata-rata build time adalah 4 detik.