From Idea to Production - Building a Complete Site with Vitto

Building a static site from scratch can feel overwhelming with all the choices available. This guide walks through creating a production-ready documentation site with Vitto — from zero to deployed.

Project Setup

Start by scaffolding a new project with the Tailwind CSS template:

npm create vitto@latest my-docs -- --preset tailwindcss
cd my-docs
npm install
npm run dev

This gives you a working Vite + Vitto + Tailwind CSS setup in seconds.

Defining the Structure

A documentation site needs clear information architecture. With Vitto, you organize content as markdown files:

content/
├── getting-started/
│   ├── installation.md
│   └── quickstart.md
├── guides/
│   ├── routing.md
│   └── deployment.md
└── reference/
    └── api.md

Adding Search

Vitto ships with Pagefind built in. Enable it in your config:

vitto({
  enableSearchIndex: true,
  pagefindOptions: {
    rootSelector: 'main',
  },
});

That’s it. The search index is generated at build time.

Deployment

Build and deploy to Cloudflare Pages:

npm run build
npx wrangler pages deploy dist

The Result

In under 30 minutes, you have a live documentation site with search, responsive design, and fast builds. That’s the power of Vitto — it gets out of your way and lets you focus on content.