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+.

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 -- --preset tailwindcss

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

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

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

# Deno
deno init --npm vitto my-website --preset 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 documentation page.

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.}