Getting Started with Statue

Quick introduction to Statue SSG and key concepts

Statue is a static site generator that transforms markdown files into a fast, modern website. It’s built on SvelteKit and designed to be simple yet flexible.

Contribute to Statue! Built a cool component, theme, or template? Share it with the community—it only takes a single command. Learn how →

What is Statue?

Statue turns this:

---
title: My Blog Post
---

# Hello World
This is my first post!

Into a fully-styled, static website with navigation, themes, and components.

Key Concepts

📝 Content is Markdown

All your content lives in the content/ directory as .md files. The folder structure becomes your site structure:

content/blog/my-post.md  →  yoursite.com/blog/my-post
content/docs/guide.md    →  yoursite.com/docs/guide

No database, no CMS - just files.

🎨 Themes Control Style

Change your entire site’s look by switching one line in src/lib/index.css:

@import "statue-ssg/themes/blue.css";

🧩 Components Build Pages

Use pre-built components to construct your pages:

<Hero />
<Stats />
<Categories {directories} />

⚙️ Config Sets Globals

One file (site.config.js) controls site-wide settings:

export const siteConfig = {
  site: { name: "Your Site", url: "https://yoursite.com" },
  contact: { email: "hello@yoursite.com" },
  social: { twitter: "https://twitter.com/yourhandle" }
};

📐 Templates Provide Structure

Start with different layouts:

npx statue init --template blog    # Blog-focused
npx statue init                     # Default

Project Structure

your-project/
├── content/              # Markdown content
│   ├── blog/
│   └── docs/
├── src/
│   ├── lib/index.css    # Theme imports
│   └── routes/
│       ├── +page.svelte           # Homepage
│       ├── [directory]/+page.svelte   # Directory pages
│       └── [...slug]/+page.svelte     # Content pages
├── static/              # Images, favicon
└── site.config.js       # Site configuration

Quick Actions

Change the theme

Edit src/lib/index.css and change the import line.

Add a blog post

Create content/blog/post-name.md with frontmatter.

Customize the homepage

Edit src/routes/+page.svelte.

Add a custom page

Create src/routes/pagename/+page.svelte.

Update site info

Edit site.config.js.

Next Steps

New to Statue? Follow the checklist:

Want to learn more?

Need help?

Happy building! 🗿