Statue

Statue is a blazingly-fast static site generator based on Markdown, Sveltekit, and a component library. Setup:

yes | npx sv create . --template minimal --types ts --no-add-ons --install npm && npm install statue-ssg && npx statue init && npm install && npm run dev

Content like blogs and documentation can be added and modified directly through .md files, with pages and the site structure itself based on Svelte components. Statue sites are fully static, so management is simple, development can be non-technical, and hosting is cheap or free. Join us on Discord! 🗿

Why Statue?

Above all else, Statue is Fast, Simple, and Flexible from start to finish. It takes only one command to get started, builds and deployments are fast, hosting is simple, sites are extensible, and developing a Statue site is about building what you want rather than battling, learning, and conforming to the tool itself.

• Markdown-first: Build out your site content by writing .md files: no coding required.
• Powered by SvelteKit: Familiar Svelte features and ecosystem, based on an elegant declarative model ideal for static sites.
• Tailwind + Components: Customize the UI easily with Tailwind CSS, and a library of included components.
• Easy to Use and Extend: The Declarative Component Model is easy to use, and with LLMs, easy for even non-technical users to work with.
• Ultra-cheap hosting: Deploy static output to Netlify, Vercel, Cloudflare Pages, GitHub Pages, etc.
• Low Maintenance: Static sites are almost maintenance-free, and Statue itself is much less complex than other web tools.

Statue meets the needs of multiple kinds of use cases and users. Even non-developers can write markdown files and use AI to build and customize Statue sites. Statue's design is intentionally highly structured, self-contained, and based on simple-yet-familiar web technologies, so that LLMs could productively contribute to it even when guided by non-technical users. That same commitment to order and constrained complexity makes it great for developers, too: they can spend less time on the tool itself, and more time building.

Statue exists to help you create static sites, according to your needs and vision. It's a tool that does what you ask of it, and no more. Setting up a website shouldn't be any harder than this:

yes | npx sv create . --template minimal --types ts --no-add-ons --install npm && npm install statue-ssg && npx statue init && npm install && npm run dev

Setup

Recommended: Quickstart

This single command creates a SvelteKit project, installs Statue SSG, and initializes it. Just copy and paste it in your terminal.

yes | npx sv create . --template minimal --types ts --no-add-ons --install npm && npm install statue-ssg && npx statue init && npm install && npm run dev

If you'd like to start with a project with different defaults, or some of the required dependencies (mostly just npm) are missing and causing that command to fail, here are some steps laid out more iteratively,

1) Create a SvelteKit project

npx sv create . --template minimal --types ts --no-add-ons --install npm

npm install

2) Install Statue SSG

npm install statue-ssg

3) Initialize Statue SSG

npx statue init

4) Start the dev server

npm run dev -- --open

Creating Content

Add Markdown files under the content directory. The folder structure maps to URLs.

content/
├─ blog/              # Blog posts → /blog/...
│  └─ hello-world.md  # e.g. /blog/hello-world
├─ docs/              # Documentation → /docs/...
│  └─ getting-started.md
└─ legal/             # Legal pages → /legal/...

Markdown example

---
title: My First Post
description: Short description
date: 2025-04-03
---

# Hello

This page was statically generated by Statue SSG.

How to edit/create pages with AI tools

Go to the src/routes/ folder in your project.
Inside, you’ll find a file named +page.svelte — this is your homepage.
You can edit this file using any AI tool you prefer.

If you want to create a new page, follow these steps:

1. Create a new folder inside src/routes/.
2. Inside that folder, create a file named +page.svelte.
3. Ask your AI tool to generate or modify the content of this new +page.svelte file.

Or, write the page yourself: we recommend starting with an existing or minimal page if you do.

Theme System (Brief)

Statue SSG ships with built-in themes. Import one in src/lib/index.css:

@import "tailwindcss";
@import "statue-ssg/themes/blue.css"; /* or red.css, green.css, ... */

@source "../";
@source "../../node_modules/statue-ssg/src/**/*.{svelte,js,ts}";

To create a custom theme or see all available themes, see src/lib/themes/README.md in this repository.

Svelte and Routes

Markdown files are turned into pages automatically. You can keep adding SvelteKit routes under src/routes/ (pages, layouts, endpoints). UI components can be customized with Tailwind.

Build and Preview

Generate the static site and preview it locally:

npm run build
npm run preview

The static output is written to the build/ directory. Deploy that directory directly to your static hosting provider.

How to Deploy Your Website

If you're done editing your site, it's time to publish it.
One of the biggest advantages of being fully static is free hosting up to very high traffic levels (200,000+ users).
You can deploy anywhere — Cloudflare Pages, Netlify, GitHub Pages, etc.

In this guide, we'll use Cloudflare Pages.

Pre-Setup

Run the following command in your terminal to install Wrangler and log in to Cloudflare:

npm install wrangler && wrangler login

This connects your local environment to your Cloudflare account.

Deploy

Paste this single command into your terminal. When it finishes, click the link it prints — your site is now live!

npm run build && npx wrangler pages deploy build --project-name=myfirstwebsite

You can optionally connect a custom domain later from the Cloudflare dashboard.

Troubleshooting

• Ensure --ignore-scripts is not enabled in your npm configuration; otherwise initialization may not run.

Developer Notes

• npx statue init sets up the project files and configuration.
• During npm run build, hooks/server.js discovers root routes and generates static pages.
• Rendering uses SvelteKit defaults (+page.svelte, +page.server.js).

Updating the Project

• Bump the version in package.json.
• Commit your changes.
• Run npm run release to publish.

Local Testing

• Run npm pack to produce a local package tarball.
• Install it into a test project: npm install <path-to-generated-tgz>.

License

MIT