Building a Developer Blog with SvelteKit

Welcome to this blog. This post demos what’s possible when you combine SvelteKit, mdsvex, and Tailwind CSS for a developer-focused blog.

Why SvelteKit?

As a .NET developer, SvelteKit feels familiar in the right ways:

• Filesystem-based routing — like Razor Pages
• Load functions that return typed models — like controller actions
• Layouts that wrap pages — like master pages or _Layout.cshtml
• Full TypeScript support throughout

The key difference: Svelte compiles away at build time. There’s no virtual DOM, no runtime framework overhead. The output is lean HTML, CSS, and minimal JavaScript.

Code blocks

mdsvex renders fenced code blocks with syntax highlighting out of the box.

// C# — something familiar
public record Post(string Title, DateOnly Date, string Slug);

var posts = Directory
    .GetFiles("content/posts", "*.md")
    .Select(Parse)
    .OrderByDescending(p => p.Date)
    .ToList();

// TypeScript equivalent in this project
export interface Post {
  title: string;
  date: string;
  slug: string;
  description: string;
}

export const posts: Post[] = Object.values(
  import.meta.glob('/src/content/posts/*/index.md', { eager: true })
).map((mod: any) => mod.metadata as Post);

Inline Svelte components

Because mdsvex is a Svelte preprocessor, you can drop live components directly into a post.

For this site, posts are currently kept static to maximize hosting compatibility on simple Apache/SFTP deployments.

If you later want interactive demos, prefer importing a small .svelte component into the post rather than embedding complex inline logic.

Blockquotes

The best time to start a developer blog was five years ago. The second best time is now.

A note worth calling out

Blockquotes work well for tips and callouts. For more structured callouts, you can create a Svelte component and import it right here in the post.

Tables

What’s next

This blog is built with:

• SvelteKit + adapter-static — pre-rendered, deployable anywhere
• mdsvex — markdown with Svelte superpowers
• Tailwind CSS + @tailwindcss/typography — utility-first styling with beautiful prose defaults
• Dark mode — respects OS preference, with a manual toggle

Next up: adding tags, an RSS feed, and a proper about page.