Building a Personal Site with SvelteKit
I recently rebuilt my personal site using SvelteKit, and I wanted to share the process and decisions I made along the way.
Why SvelteKit?
After evaluating several options, I chose SvelteKit for a few key reasons:
Performance
SvelteKit compiles your code at build time, resulting in smaller bundle sizes and faster load times. No virtual DOM means less JavaScript shipped to the browser.
Developer Experience
The file-based routing, built-in TypeScript support, and intuitive API make development a joy. Plus, the hot module replacement is incredibly fast.
Flexibility
SvelteKit works great for both static sites and full-stack applications. I can start simple and add server-side features later if needed.
Architecture Overview
The site consists of three main parts:
- CV/Portfolio Page: A static page showcasing my experience and skills
- Blog: Markdown-based blog posts using mdsvex
- Shared Layout: Consistent navigation and styling across all pages
Using mdsvex for Blog Posts
mdsvex allows me to write blog posts in Markdown while still having the power of Svelte components when needed. Here’s a quick example:
---
title: My Post
date: 2024-12-20
---
Regular markdown content here
<script>
// Can also use Svelte components!
</script>Lessons Learned
Keep It Simple
I initially over-engineered the blog with a complex CMS. Switching to simple Markdown files made everything easier to maintain.
Focus on Content
The best site is one that gets used. I spent too much time on design iterations and not enough on writing content initially.
Progressive Enhancement
Start with a working static site, then add dynamic features as needed. SvelteKit makes this progression natural.
Next Steps
Some features I’m planning to add:
- RSS feed for blog posts
- Dark mode toggle
- Code syntax highlighting improvements
- Search functionality
If you’re considering SvelteKit for your next project, I highly recommend it. The learning curve is gentle, and the results are impressive.