Skip to content

Repository files navigation

Leaf

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.

Features

  • 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

Quick Start

Installation

# 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 Your First Site

# Create a new project
leaf new my-blog
# Navigate to your projectcd my-blog
# Start the dev server
leaf dev

That's it! Open your browser to:

Usage

Commands

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 post

Project Structure

my-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

Creating Content

Using the CLI

# Create a new page
leaf create page about
# Create a new blog post
leaf create post my-first-post

Using the Visual Editor

  1. Start dev server: leaf dev
  2. Open http://localhost:3000/editor
  3. Select a page from the sidebar
  4. Edit your content
  5. Press Cmd/Ctrl + S to save
  6. Watch your changes appear instantly!

Writing Content

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*

Templates

Leaf uses Tera templating (similar to Jinja2):

templates/page.html

<!DOCTYPE html><html><head><title>{{ page.frontmatter.title }} - {{ site.title }}</title><linkrel="stylesheet" href="/style.css"></head><body><article><h1>{{ page.frontmatter.title }}</h1>
{% if page.frontmatter.date %}
<time>{{ page.frontmatter.date }}</time>
{% endif %}
<divclass="content">
{{ page.content | safe }}
</div></article></body></html>

Available Template Variables

All templates:

  • site.title - Site title from leaf.json
  • site.description - Site description
  • site.url - Site URL
  • site.author - Site author

page.html:

  • page.frontmatter.title - Page title
  • page.frontmatter.date - Page date
  • page.frontmatter.author - Page author
  • page.frontmatter.tags - Array of tags
  • page.content - Rendered HTML content
  • page.slug - Page slug
  • page.url - Page URL

index.html:

  • pages - Array of all pages

Customization

Styling

Edit static/style.css to customize your site's appearance. The default theme is minimal and beautiful, but you can make it your own!

Custom Layouts

Create custom layouts by adding new templates:

  1. Create templates/blog.html
  2. In your markdown frontmatter, add: "layout": "blog"
  3. Leaf will use your custom template!

Configuration

Edit leaf.json:

{
"title": "My Awesome Site",
"description": "Where I share my thoughts",
"url": "https://mysite.com",
"author": "Your Name"
}

Hot Reload

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!

Deployment

Build for Production

leaf build

Your site will be generated in the public/ directory. Deploy this folder to:

  • Netlify: Drag and drop the public folder
  • Vercel: vercel --prod public
  • GitHub Pages: Push public to gh-pages branch
  • Any static host: Upload the public folder

GitHub Actions Example

name: Deployon:
push:
branches: [main]jobs:
deploy:
runs-on: ubuntu-lateststeps:
- uses: actions/checkout@v2
- uses: actions-rs/toolchain@v1with:
toolchain: stable
- run: cargo build --release
- run: ./target/release/leaf build
- uses: peaceiris/actions-gh-pages@v3with:
github_token: ${{ secrets.GITHUB_TOKEN }}publish_dir: ./public

Tips for Designers

Visual Editor Shortcuts

  • Cmd/Ctrl + S - Save current page
  • Cmd/Ctrl + P - Toggle preview
  • Click any page in sidebar to edit

Design Workflow

  1. Start with the visual editor for content
  2. Customize CSS in static/style.css
  3. Edit templates for structural changes
  4. Use hot reload to see changes instantly
  5. Build and deploy when ready!

Best Practices

  • 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

Contributing

Contributions are welcome! This is a learning project and portfolio piece.

License

MIT License - feel free to use for your portfolio projects!

Inspiration

Built with inspiration from Hugo, Jekyll, and modern web tools.


Made by houndslight

About

A lightweight static site generator built for creators who value speed and design.

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages