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

3 weeks ago 3

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

🚀 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

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.

With NPM:

With Yarn:

With PNPM:

With Bun:

With Deno:

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

# Install with pnpm pnpm add -D vitto # Install with npm npm install --save-dev vitto # Install with yarn yarn add --dev vitto

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', } }) ], })

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