SvelteKit Shadcn Blog Starter

SvelteKit Shadcn Blog Starter is a production-ready blog template built with SvelteKit, shadcn-svelte, Tailwind CSS, and MDsveX that turns Markdown files into a full blog with multi-author profiles, tag archives, search, and auto-generated RSS and sitemap.

What is the SvelteKit Shadcn Blog Starter?

It is an open-source starter template (MIT licensed) created by Yusuf Cengiz. As input it takes Markdown posts placed in the src/posts directory, each with YAML frontmatter for title, description, date, tags, and author ID. As output it generates a blog listing page, individual post pages, author profile pages, tag archive pages, an RSS feed at /rss.xml, and a sitemap at /sitemap.xml. The template runs on SvelteKit and includes Svelte 5 Runes, shadcn-svelte UI components, Tailwind CSS for styling, and TypeScript for type safety.

Key Features

• MDsveX Markdown authoring — Write posts as .md files in src/posts with frontmatter; Markdown can embed Svelte components for interactive content.
• Multi-author support — Each post references an author ID, and dedicated author profile pages are generated automatically, such as /authors/yusuf-cengiz.
• Tag-based organization — Tags from frontmatter create automatic tag archive pages.
• Built-in search — Visitors can search posts directly on the blog.
• Dark and light theme — Theme switching with automatic system preference detection.
• Auto-generated sitemap and RSS — /sitemap.xml and /rss.xml are produced automatically from your posts.
• SEO optimization — Meta tags and Open Graph support are included, along with SvelteKit's fast page loading.
• Fully responsive Tailwind UI — Mobile-first design using accessible shadcn-svelte components and Tailwind CSS utilities.

Who should use the SvelteKit Shadcn Blog Starter?

Developers who want a blog without configuring routing, SEO, or RSS from scratch. Teams that need multi-author publishing with individual author pages. SvelteKit developers who want a modern codebase using Svelte 5 Runes and shadcn-svelte. Indie writers who want a fast, free, self-hosted blog that deploys to Netlify or Vercel.

What can you do with the SvelteKit Shadcn Blog Starter?

• Personal bloggers: write posts in Markdown and get a styled, responsive blog with dark mode and search without building UI.
• Multi-author teams: maintain separate author profiles and have each post attributed to an author page automatically.
• Developers documenting projects: embed Svelte components inside Markdown via MDsveX to create interactive tutorials or docs.
• Indie hackers: quickly launch a content site with auto SEO, RSS, and sitemap, then deploy to Netlify with automatic builds.

How does the SvelteKit Shadcn Blog Starter work?

Clone the repository, install dependencies with npm install, and run npm run dev to start a local server on port 5173. Create a new .md file in src/posts with frontmatter, and the post appears automatically on the blog page with tags and author pages generated. Edit src/lib/config/site.ts to set the site name, URL, description, and social links. For production, run npm run build and npm run preview, then deploy to Netlify with automatic build detection or switch to Vercel or Cloudflare Pages via the respective SvelteKit adapter.

Frequently Asked Questions

Is the SvelteKit Shadcn Blog Starter free?

Yes, the template is open source and released under the MIT License, so it is free to use, modify, and deploy for personal or commercial projects.

How do I add a new blog post?

Create a Markdown file in src/posts with YAML frontmatter containing title, description, date, tags, and author. The post will automatically appear on the blog page, and tag and author pages will be generated from that frontmatter.

Does the starter support RSS and sitemap generation?

Yes, an RSS feed and an XML sitemap are auto-generated from your posts. The live demo exposes them at /rss.xml and /sitemap.xml.

Can I deploy this starter to Vercel or Cloudflare Pages?

Yes, the starter works with any SvelteKit-compatible platform. Install the appropriate adapter (for example @sveltejs/adapter-vercel or @sveltejs/adapter-cloudflare) and follow SvelteKit's adapter documentation.