Building with SvelteKit

SvelteKit is a full-stack framework that compiles your components at build time, shipping minimal JavaScript to the browser. It turned out to be the perfect choice for a personal site.

Why SvelteKit

I evaluated a few options before settling on SvelteKit:

• Next.js — powerful but heavier than I needed. React’s runtime overhead felt unnecessary for a mostly static site.
• Astro — great for content sites, but I wanted the flexibility of a full framework in case I ever need dynamic features.
• SvelteKit — compiles away the framework, produces tiny bundles, and has an incredibly clean syntax. The file-based routing is intuitive, and the +page.server.ts pattern for data loading is elegant.

The Blog System

Blog posts live as .md files in src/content/blog/. Each file has YAML frontmatter for metadata:

title: My Post Title
date: 2026-02-20
description: A short description.
tags:
  - web

At build time, Vite’s import.meta.glob() pulls in all the Markdown files. A small utility module (src/lib/blog.ts) sorts them by date, extracts metadata, and provides functions like getPostBySlug() and getPostsByTag(). No database, no API calls — just files on disk.

mdsvex and Shiki

Markdown rendering is handled by mdsvex, which lets you use Svelte components inside Markdown files. Syntax highlighting is powered by Shiki with dual themes — github-dark and github-light — that switch automatically based on the site’s current theme.

Deployment

The site is deployed to Cloudflare Pages using the SvelteKit Cloudflare adapter. Every push to main triggers a build. The entire process from commit to live takes about 30 seconds.

What I Learned

Keep things simple. A static site doesn’t need a headless CMS, a database, or a complex build pipeline. Markdown files in a git repo are the most portable, version-controlled content format there is. If I ever want to move away from SvelteKit, the content stays the same.