Getting started

See it live first

Before you scaffold anything, take a look at the live demo — sveltepress.github.io/sveltepress/blog-demo . Everything described on this page is already working there.

Source: packages/example-blog in the monorepo. Clone it, pnpm install && pnpm dev, and you have a runnable reference on localhost:4173.

@sveltepress/theme-blog is a magazine-style blog theme with a left-rail sidebar, masonry post grid, per-post OG images, RSS, Pagefind search, and Giscus comments. This page walks you through scaffolding a working blog.

Install

npm install --save @sveltepress/theme-blog
sh

The theme requires @sveltejs/adapter-static because it generates a fully static site (prerendered HTML, JSON, RSS, OG images).

npm install --save @sveltejs/adapter-static
sh

Configure Vite

vite.config.ts
import {  } from '@sveltepress/theme-blog'
import {  } from '@sveltepress/vite'
import {  } from 'vite'

export default ({
  : [
    ({
      : ({
        : 'My Blog',
        : 'Thoughts on Svelte and the web.',
        : 'https://example.com',
        : {
          : 'Your Name',
          : '/avatar.png',
          : 'Short bio shown in the sidebar.',
          : {
            : 'your-handle',
            : 'your-handle',
            : '/rss.xml',
          },
        },
        : [
          { : 'Home', : '/' },
          { : 'Timeline', : '/timeline/' },
          { : 'Tags', : '/tags/' },
        ],
      }),
    }),
  ],
})
ts

Configure SvelteKit

svelte.config.js
import adapter from '@sveltejs/adapter-static'
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'

export default {
  extensions: ['.svelte'],
  preprocess: [vitePreprocess()],
  kit: {
    adapter: adapter({
      pages: 'dist',
      assets: 'dist',
      fallback: '404.html',
    }),
    prerender: {
      handleMissingId: 'ignore',
      handleUnseenRoutes: 'ignore',
    },
    paths: {
      base: process.env.BASE_PATH ?? '',
      relative: false,
    },
  },
  compilerOptions: {
    runes: true,
  },
}
js

BASE_PATH lets you deploy under a subpath (e.g. GitHub Pages project site). Leave the env var unset for root deployments.

Write your first post

Create src/posts/hello-world.md:

src/posts/hello-world.md
---
title: Hello world
date: 2026-04-17
tags: [intro]
category: meta
excerpt: First post on the new blog.
---

# Hello

Welcome to my blog. Everything is markdown.
md

Routes auto-scaffolded

On the next vite dev or vite build, the theme writes these files if they don't exist. Edit them freely — the scaffolder only creates missing files.

PathPurpose
src/routes/+layout.tsEnables prerender + trailingSlash: 'always'
src/routes/+layout.svelteWraps pages in GlobalLayout
src/routes/+page.{server.ts,svelte}Paginated home
src/routes/page/[n]/...Page 2+ of the list
src/routes/posts/[slug]/...Individual post pages
src/routes/tags/+page.svelteTag index
src/routes/tags/[tag]/...Posts for a tag
src/routes/categories/[cat]/...Posts for a category
src/routes/timeline/+page.svelteArchive timeline

Build

pnpm vite build && pnpm pagefind --site dist
bash

The Pagefind step indexes the built site so the search modal (⌘K / Ctrl+K) works. Skip it if you don't use search.

The resulting dist/ is a static bundle deployable to any static host.

Suggest changes to this page
Last update at: 2026/04/17 06:10:12