Wisnu Pramoedya Blog

Personal blog built with SvelteKit 5, Tailwind CSS 4, and MDsveX.

Tech Stack

• Framework: SvelteKit with Svelte 5
• Styling: Tailwind CSS 4
• Content: MDsveX for Markdown/MDX support
• Database: Supabase for view counts
• Deployment: Vercel with ISR (Incremental Static Regeneration)
• Comments: Giscus (GitHub Discussions)

Features

• Blog posts written in Markdown with syntax highlighting
• Table of Contents (ToC) auto-generated from headings
• View counter per post
• GitHub Flavored Markdown support
• SEO optimized
• Dark mode support
• Responsive design

Getting Started

Prerequisites

• Node.js 18+
• npm/pnpm/yarn

Installation

# Clone the repository
git clone https://github.com/wisnupramoedya/blog.git
cd blog

# Install dependencies
npm install

Environment Variables

Create a .env file in the root directory:

SUPABASE_URL=your_supabase_url
SUPABASE_ANON_KEY=your_supabase_anon_key

Development

npm run dev

# Open in browser
npm run dev -- --open

Build

npm run build
npm run preview

Project Structure

src/
├── lib/
│   ├── components/     # Svelte components
│   ├── data/
│   │   └── posts/      # Blog posts in Markdown
│   ├── server/         # Server-side utilities
│   ├── services/       # Client services (views, etc.)
│   ├── stores/         # Svelte stores
│   ├── types/          # TypeScript types
│   └── utils/          # Utility functions
├── routes/
│   ├── api/            # API endpoints
│   └── blog/           # Blog pages
└── app.html

Deployment

Lihat DEPLOYMENT.md untuk panduan lengkap:

• Setup Supabase (tabel, functions, API keys)
• Deploy ke Vercel
• Migrasi data views
• Troubleshooting

Scripts

License

MIT