Introduction

Sveltepress is a site build tool. Inspired by Vitepress . Build on top of SvelteKit , Unocss .

Project structure

Exactly the same as Project structure - SvelteKit

Except for that you can use .md files for pages or layouts. For example:

  • src/routes/+page.md is recognized as home page
  • src/routes/+layout.md is used for root custom layout
Full power of Sveltekit

Sveltepress preserves the full power of sveltekit. You can do more than SSG. For example use +page.server.js, +layout.server.js, hooks.server.js to do some server side logic like: Authentication, DB Docking, ...

Layout hierarchy

Root layout is required

There must be a src/routes/+layout.svelte or src/routes/+layout.md as root layout file. Otherwise the global layout provided by theme would not working!

For example if your file tree look like this

.
├─ src
│  ├─ routes
│  │  └─ +layout.(svelte|md)
│  │  ├─ foo
│  │  │  ├─ +page.(svelte|md)
│  │  │  ├─ +layout.(svelte|md)
txt

theme.globalLayout > src/routes/+layout.(svelte|md) > theme.pageLayout > src/routes/foo/+layout.(md|svelte) > src/routes/foo/+page.md

Here's a graph to help you understand

Configuration

Sveltepress's config is passed to @sveltepress/vite vite plugin, all options are fully typed.

Read Vite plugins options for more details.

Deployment

It is recommended to read Adapters - SvelteKit first. If you use npm/yarn/pnpm create @sveltepress to create a new project. The Adapter Static would be used as default.

But feel free to change to any adapters you want.

Suggest changes to this page
Last update at: 2024/11/25 05:47:03