A lightning-fast static site generator that combines the power of Markdown content with SvelteKit. Create beautiful static websites in minutes, with SvelteKit integration.
- 📝 Markdown-Powered: Write content in Markdown with frontmatter for metadata
- 🚀 Zero Configuration: Get started with zero configuration
- 🔍 SEO Friendly: Optimized for search engines
- 🔄 Fast Build Times: Generate your site in seconds
- 📂 Organized Content: Automatically organizes content by directories
- 🎨 Beautiful UI: Includes a modern UI with Tailwind CSS
For a quick setup, run this single command:
yes | npx sv create . --template minimal --types ts --no-add-ons --install npm && npm install statue-ssg && npx statue initThis command will create a SvelteKit project, install Statue SSG, and set up everything automatically.
First, you need to create a SvelteKit project:
npx sv create . --template minimal --types ts --no-add-ons --install npm
npm installAdd Statue SSG to your SvelteKit project:
npm install statue-ssgAfter installation, the setup process will automatically run. If it doesn't, you can manually run:
npx statue initThis will:
- Copy statue files to your project
- Set up the content directory structure
- Configure routes for your Markdown content
- Add necessary dependencies
Start the development server:
npm run dev -- --openThat's it! You now have a fully functional static site generator with your SvelteKit project.
Add your Markdown content to the content directory:
content/
├── blog/ # Blog posts
│ └── post1.md # Example: /blog/post1
├── docs/ # Documentation
│ └── guide.md # Example: /docs/guide
└── static/ # Static pages
└── about.md # Example: /static/about
Create Markdown files with frontmatter metadata:
---
title: My First Post
description: This is my first blog post
date: 2025-04-03
---
# Hello World
This is my first post using Statue SSG.
## Features
- Simple Markdown content
- Automatic routing
- Beautiful UIIf you encounter any issues during installation:
- Make sure the
--ignore-scriptssetting is not enabled in your NPM configuration
During the setup and build processes, the following occurs:
-
Project Setup:
The SvelteKit project is initialized usingnpx sv createfollowed by installing dependencies. -
Library Installation:
Runningnpm install statue-ssgintegrates the Statue SSG library into your project. -
Initialization:
Executingnpx statue inittriggers a post-install script. This script copies the template folder from within the library to your project, and updates configuration files (e.g.,svelte.config.jsand others) accordingly. -
Content Management:
Once set up, you can rapidly create a site by editing the Markdown files in thecontentfolder. Group your content by simply creating new folders and adding Markdown files to them. If you want to modify the homepage, edit thepage.sveltefile under theroutesfolder. Additionally, you can extend your site by creating your own Svelte files within theroutesfolder. -
Static Site Generation:
When you runnpm run build, the build process executeshooks/server.js. This file uses anentriesmethod to scan all your project's root routes and converts them into static pages.The rest of the rendering process relies on SvelteKit's default behavior, where
+page.svelteand+page.server.jsfiles are rendered. -
Preview:
Finally, usenpm run previewto view the generated static site.
These additional notes provide insight into the inner workings of Statue SSG, helping you understand and troubleshoot the setup and build processes when needed.
If you want to update the project:
- Increase the version in your
package.json. - Commit your changes.
- Run
npm run releaseto release the update.
If you want to test your changes locally before publishing:
- Run
npm packto compile your project into a local package. - Then, use
npm install <path-to-compiled-folder>to install and test the compiled version locally. This allows you to verify all your changes in a local environment.
MIT