A next-gen static site builder designed for designers and creatives
Leaf combines the speed of Rust with a beautiful visual editor, giving you the best of both worlds: lightning-fast builds and a delightful editing experience.
- Visual Editor - Edit your content in a beautiful web-based interface
- Lightning Fast - Rust-powered builds in milliseconds
- Hot Reload - See changes instantly as you type
- Markdown Support - Write in Markdown with frontmatter
- Templating - Powerful Tera templates (Jinja2-style)
- Zero Config - Works out of the box with sensible defaults
- Deploy Anywhere - Outputs static HTML, CSS, and JS
# Install Rust (if you haven't already)
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
# Clone and build leaf
git clone <your-repo-url>
cd leaf
cargo build --release
cargo install --path .# Create a new project
leaf new my-blog
# Navigate to your project
cd my-blog
# Start the dev server
leaf devThat's it! Open your browser to:
- http://localhost:3000 - View your site
- http://localhost:3000/editor - Visual editor
leaf new <name> # Create a new project
leaf build # Build your site to ./public
leaf dev [--port 3000] # Start dev server with hot reload
leaf create <type> <name> # Create a new page or postmy-blog/
├── content/ # Your markdown files
│ └── hello.md
├── templates/ # HTML templates
│ ├── index.html
│ └── page.html
├── static/ # CSS, images, JS
│ └── style.css
├── public/ # Generated site (git ignore this)
└── leaf.json # Site configuration
# Create a new page
leaf create page about
# Create a new blog post
leaf create post my-first-post- Start dev server:
leaf dev - Open http://localhost:3000/editor
- Select a page from the sidebar
- Edit your content
- Press Cmd/Ctrl + S to save
- Watch your changes appear instantly!
Leaf uses Markdown with JSON or YAML frontmatter:
---
{
"title": "My Amazing Post",
"date": "2025-01-15",
"author": "Jane Designer",
"tags": ["design", "tips"],
"description": "A brief description"
}
---
# My Amazing Post
Your content here...
## Subheading
- List item 1
- List item 2
**Bold text** and *italic text*Leaf uses Tera templating (similar to Jinja2):
templates/page.html
<!DOCTYPE html>
<html>
<head>
<title>{{ page.frontmatter.title }} - {{ site.title }}</title>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<article>
<h1>{{ page.frontmatter.title }}</h1>
{% if page.frontmatter.date %}
<time>{{ page.frontmatter.date }}</time>
{% endif %}
<div class="content">
{{ page.content | safe }}
</div>
</article>
</body>
</html>All templates:
site.title- Site title from leaf.jsonsite.description- Site descriptionsite.url- Site URLsite.author- Site author
page.html:
page.frontmatter.title- Page titlepage.frontmatter.date- Page datepage.frontmatter.author- Page authorpage.frontmatter.tags- Array of tagspage.content- Rendered HTML contentpage.slug- Page slugpage.url- Page URL
index.html:
pages- Array of all pages
Edit static/style.css to customize your site's appearance. The default theme is minimal and beautiful, but you can make it your own!
Create custom layouts by adding new templates:
- Create
templates/blog.html - In your markdown frontmatter, add:
"layout": "blog" - Leaf will use your custom template!
Edit leaf.json:
{
"title": "My Awesome Site",
"description": "Where I share my thoughts",
"url": "https://mysite.com",
"author": "Your Name"
}The dev server watches for changes to:
- Content files (
content/**/*.md) - Templates (
templates/**/*.html) - Static files (
static/**/*)
Just save your files and see changes instantly!
leaf buildYour site will be generated in the public/ directory. Deploy this folder to:
- Netlify: Drag and drop the
publicfolder - Vercel:
vercel --prod public - GitHub Pages: Push
publicto gh-pages branch - Any static host: Upload the
publicfolder
name: Deploy
on:
push:
branches: [main]
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: actions-rs/toolchain@v1
with:
toolchain: stable
- run: cargo build --release
- run: ./target/release/leaf build
- uses: peaceiris/actions-gh-pages@v3
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./public- Cmd/Ctrl + S - Save current page
- Cmd/Ctrl + P - Toggle preview
- Click any page in sidebar to edit
- Start with the visual editor for content
- Customize CSS in
static/style.css - Edit templates for structural changes
- Use hot reload to see changes instantly
- Build and deploy when ready!
- Keep content simple with Markdown
- Use semantic HTML in templates
- Add custom CSS for unique styling
- Test on mobile (just resize your browser!)
- Use relative URLs for assets
Contributions are welcome! This is a learning project and portfolio piece.
MIT License - feel free to use for your portfolio projects!
Built with inspiration from Hugo, Jekyll, and modern web tools.
Made by houndslight