Vitto

---

A minimal static site generator built with Vite and the Vento templating engine.

Vitto combines the speed of Vite's development experience with the simplicity of Vento templates to create a modern static site generator. Perfect for documentation sites, blogs, portfolios, and any project that needs fast builds and flexible templating without the complexity of larger frameworks.

Compatibility Note: Vitto requires Node.js version 20.19+, 22.12+.

Live Demo: Check out Vitto in action at vitto.pages.dev

Features

• 🚀 Fast Development - Powered by Vite's lightning-fast HMR
• 📝 Vento Templates - Simple and powerful templating with Vento
• 🔍 Built-in Search - Integrated Pagefind for static search
• 🎨 Flexible Styling - Use any CSS framework (Tailwind, UnoCSS, etc.)
• 🗂️ Dynamic Routes - Generate pages from data sources
• 🪝 Hooks System - Inject data into templates with ease
• 📦 Zero Config - Works out of the box with sensible defaults
• 🏗️ Static Output - Generate fully static sites for any hosting
• 🔌 Easy Integration - Seamlessly integrate HTMX, Alpine.js, and other libraries

Why Vitto?

Vitto stands out by leveraging Vite's powerful ecosystem, allowing you to:

• Use Modern Tools: Direct access to Vite plugins (Tailwind CSS, UnoCSS, PostCSS, etc.)
• Integrate Easily: Add HTMX, Alpine.js, or any library via bundler or CDN
• Build Fast: Lightning-fast builds with Vite's optimized pipeline
• Stay Simple: Template-based approach without framework complexity

See how Vitto compares to other static site generators in our comparison guide.

Quick Start

With NPM:

npm create vitto@latest

With Yarn:

yarn create vitto

With PNPM:

pnpm create vitto

With Bun:

bun create vitto

With Deno:

deno init --npm vitto

Then follow the prompts!

You can also directly specify the project name and the template you want to use via additional command line options. For example, to scaffold a Vitto + Tailwind CSS project, run:

# npm 7+, extra double-dash is needed:
npm create vitto@latest my-website -- --template tailwindcss

# yarn
yarn create vitto my-website --template tailwindcss

# pnpm
pnpm create vitto my-website --template tailwindcss

# Bun
bun create vitto my-website --template tailwindcss

# Deno
deno init --npm vitto my-website --template tailwindcss

Manual Installation

# Install with pnpm
pnpm add -D vitto

# Install with npm
npm install --save-dev vitto

# Install with yarn
yarn add --dev vitto

Usage

import { defineConfig } from 'vite'
import vitto from 'vitto'

export default defineConfig({
  plugins: [
    vitto({
      minify: process.env.NODE_ENV === 'production',
      enableSearchIndex: true,
      metadata: {
        siteName: 'Vitto',
        title: 'Vitto - Static Site Generator Powered by Vite & Vento',
      }
    })
  ],
})

Documentation

For comprehensive documentation, visit our docs folder or check out these guides:

Getting Started

• Introduction - What is Vitto and why use it
• Getting Started - Installation and basic setup
• Configuration - Configure Vitto for your project

Core Concepts

• Templates - Working with Vento templates
• Dynamic Routes - Generate pages from data
• Hooks System - Data injection and processing

Advanced Features

• Search Integration - Set up Pagefind search
• Deployment - Deploy to various platforms
• Performance - Optimize your site

Reference

• Examples - Real-world examples and use cases
• Troubleshooting - Common issues and solutions
• API Reference - Complete API documentation
• Contributing - Contribute to Vitto
• Comparison - Compare with other SSGs

Community

• GitHub Discussions - Ask questions and discuss
• GitHub Issues - Report bugs and request features

Contributing

We welcome contributions! Please see our Contributing Guide for details.

License

Licensed under the MIT license.

Copyrights in this project are retained by their contributors.

See the LICENSE file for more information.

---

_{🤫 Psst! If you like my work you can support me via GitHub sponsors.}