Getting Started

Overview

Vocs is a React-based static documentation generator, powered by Vite.

Write your content in Markdown or MDX, and Vocs will generate a static site with a default theme.

Quick Start

Bootstrap via CLI

Scaffold a new project with the command line:

npm

npm init vocs

Bootstrap via Vercel

Scaffold a new project and deploy it instantly with Vercel:

Manual Installation

You can install Vocs in an existing project, or start from scratch, by installing Vocs as a dependency.

Install

First, we will install vocs as a dependency in our project.

npm

npm i vocs

Add Scripts to `package.json`

After that, let's add some scripts to our package.json for Vocs.

package.json

{
  "name": "example",
  "version": "0.0.0",
  "scripts": { 
    "docs:dev": "vocs dev", 
    "docs:build": "vocs build", 
    "docs:preview": "vocs preview"
  } 
}

Build your First Page

Create a directory called docs, and add a file inside of it called index.mdx under a pages directory:

my-project/      
├── docs/
│   ├── pages/
│   │   └── index.mdx
├── node_modules/
└── package.json

docs/pages/index.mdx

# Hello, World! [This is my first page]
 
Welcome to my docs.

Run

Next, run the development server:

Terminal

npm run docs:dev

Then open up your browser to http://localhost:5173, and you can see your first page!

Next Steps

Now that you have a basic documentation site up and running, you can learn more about how Vocs projects are structured in Project Structure.