Building a Documentation-Style Blog in SvelteKit

This post documents the structure we’re building: a blog with strong documentation layout and typographic rhythm, while remaining our own code + assets.

What “documentation-style” means

It’s mainly about placement and proportions:

• A large hero card on the index, followed by a tag bar and a two-column grid
• Post pages that use a narrow reading column with a sticky right rail (desktop)
• Small mono uppercase metadata: category + reading-time + date

The content pipeline

We use Markdown for content, but we want code blocks to look like “real UI”. That means Shiki.

// src/lib/server/blog.ts
import readingTime from "reading-time";

const minutes = Math.max(1, Math.round(readingTime(markdown).minutes));

A tiny checklist