All About My Personal Site

Membangun situs pribadi adalah ritual bagi para developer. Ini adalah tempat bermain di mana kamu bisa bereksperimen dengan teknologi baru, memamerkan karyamu, dan berbagi pemikiranmu. Postingan ini mendokumentasikan bagaimana saya membangun situs ini dari nol, pilihan teknologi yang saya buat, dan alasannya.

#Link to this headingTech Stack

#Link to this headingFramework: Next.js 15+ dengan App Router

Saya memilih Next.js sebagai fondasi karena beberapa alasan:

• Dukungan kelas satu untuk React Server Components
• Pengalaman developer yang sangat baik dengan fast refresh
• Routing bawaan, optimasi gambar, dan API routes
• Ekosistem dan dukungan komunitas yang hebat

App Router memperkenalkan mental model yang terasa lebih natural dibanding pola getServerSideProps yang lama. Setiap komponen bisa menangani pekerjaan backend secara langsung, membuat arsitektur lebih bersih dan intuitif.

#Link to this headingKonten: MDX untuk Postingan Interaktif

MDX memberikan saya kekuatan penuh React saat menulis konten. Saya bisa menyematkan komponen interaktif, code playground, dan visualisasi kustom langsung di markdown:

// Saya bisa menggunakan komponen React langsung di MDX
<Aside variant="info">
  Ini adalah komponen callout kustom!
</Aside>

Konten disimpan di repository dalam folder content/ dengan hierarki terstruktur:

content/
├── Course/
│   └── 6th-Semester/
│       └── IF3270/
│           ├── index.mdx
│           └── 1.mdx
├── Tech/
│   └── Language/
│       └── JavaScript/
│           └── closures.mdx
├── Personal/
│   └── 1.mdx  ← Kamu di sini!
└── Competition/

Untuk tulisan Personal, saya memilih struktur flat - tanpa folder bersarang. Hanya file sederhana yang langsung dipetakan ke URL seperti /writings/personal/all-about-my-personal-site.

#Link to this headingStyling: Linaria (Zero-Runtime CSS-in-JS)

Saya menggunakan Linaria untuk styling, yang dikompilasi ke CSS saat build time dengan zero runtime overhead. Ini penting untuk kompatibilitas React Server Component - library CSS-in-JS tradisional seperti styled-components membutuhkan JavaScript di sisi klien.

import { styled } from '@linaria/react';
 
const Card = styled.div`
  padding: 1.5rem;
  border-radius: 8px;
  background: var(--color-card-bg);
  box-shadow: 0 2px 8px var(--color-shadow-light);
`;

Tradeoff-nya? Ekosistem Linaria lebih kecil, dan Next.js terkadang membundle lebih banyak CSS dari yang diperlukan. Tapi manfaat zero-runtime styling lebih besar dari kekhawatiran ini untuk kasus penggunaan saya.

#Link to this headingSyntax Highlighting: Shiki via rehype-pretty-code

Untuk code blocks, saya menggunakan Shiki melalui rehype-pretty-code. Berbeda dengan Prism yang berjalan saat runtime dan menambah ~26kb ke bundle, Shiki mengkompilasi syntax highlighting saat build time:

• Zero JavaScript overhead untuk syntax highlighting
• Dukungan untuk puluhan bahasa tanpa bundle bloat
• Highlighting berkualitas VS Code dengan tokenisasi yang tepat
• Dukungan dual theme (light/dark) bawaan

#Link to this headingMath Rendering: KaTeX

Untuk notasi matematika, saya mengintegrasikan KaTeX melalui remark-math dan rehype-katex. Ini mendukung math inline seperti $E = mc^2$ dan persamaan display:

KaTeX merender saat build time, jadi tidak ada overhead pemrosesan math di sisi klien.

#Link to this headingAnimasi: React Spring

Untuk animasi berbasis fisika yang halus, saya menggunakan React Spring. Ini menyediakan API deklaratif untuk animasi yang terasa natural:

const spring = useSpring({
  opacity: isVisible ? 1 : 0,
  transform: isVisible ? 'translateY(0)' : 'translateY(24px)',
});

#Link to this headingArsitektur Konten

#Link to this headingPipeline Pemrosesan MDX

Pipeline konten memproses file MDX melalui beberapa tahap:

• Parsing: gray-matter mengekstrak metadata frontmatter
• Remark plugins: Mentransformasi markdown (tabel GFM, sintaks math)
• Rehype plugins: Mentransformasi HTML (syntax highlighting, KaTeX)
• Kompilasi: next-mdx-remote/rsc mengkompilasi ke komponen React

#Link to this headingEkstraksi Metadata Otomatis

Beberapa field metadata dihitung secara otomatis:

• Waktu baca: Dihitung menggunakan package reading-time (~200 kata/menit)
• Preview: Auto-extracted dari paragraf pertama jika tidak disediakan
• Daftar Isi: Heading diekstrak via regex untuk navigasi
• URL slugs: Dihasilkan dari judul menggunakan slugifikasi konsisten

#Link to this headingSistem Kategori

Konten diorganisir dalam empat kategori:

#Link to this headingSistem Tema

#Link to this headingImplementasi Dual-Layer

Sistem tema bekerja di dua layer untuk mencegah flash of unstyled content:

• Server-side: Script inline membaca cookie tema dan menerapkannya sebelum hydration
• Client-side: ThemeProvider mengelola state dan menyediakan hook useTheme()

#Link to this headingCSS Custom Properties

Semua warna didefinisikan sebagai CSS custom properties, membuat pergantian tema mulus:

:root {
  --color-background: #ffffff;
  --color-text: #000000;
}
 
.dark {
  --color-background: #121212;
  --color-text: #ffffff;
}

#Link to this headingPelajaran yang Dipetik

#Link to this headingApa yang Berjalan Baik

• Fleksibilitas MDX: Bisa menyematkan komponen React di konten sangat powerful
• Static generation: Rendering saat build time menjaga situs tetap cepat
• CSS variables: Membuat theming trivial dan performant
• TypeScript di mana-mana: Menangkap error lebih awal dan meningkatkan DX

#Link to this headingTantangan yang Dihadapi

• Learning curve App Router: Mental model baru membutuhkan penyesuaian
• Keunikan Linaria: Beberapa masalah integrasi Next.js membutuhkan workaround
• Migrasi MDX v3: Breaking changes membutuhkan update plugin yang hati-hati

#Link to this headingPeningkatan di Masa Depan

#Link to this headingKesimpulan

Membangun situs ini telah menjadi perjalanan yang bermanfaat melalui pengembangan web modern. Kombinasi Next.js, MDX, dan zero-runtime CSS-in-JS menciptakan fondasi yang kuat untuk situs kaya konten.

Bagian terbaiknya? Semuanya ada di repository. Tidak ada CMS, tidak ada dependensi eksternal untuk konten. Hanya file markdown yang dikompilasi menjadi website yang cepat dan accessible.

Jika kamu sedang membangun blog atau situs pribadimu sendiri, saya harap breakdown ini membantu menginformasikan keputusan teknismu. Silakan jelajahi source code(opens in new tab) dan hubungi jika ada pertanyaan!