Installation

Get Vellocs up and running on your computer in just a few minutes. This guide walks you through every step.

What You'll Need

Before installing Vellocs, make sure you have these tools installed on your computer:

Node.js (Required)

What is Node.js?

Node.js is a JavaScript runtime that allows you to run JavaScript on your computer (not just in a browser). Vellocs needs it to build your documentation site.

Version Required: Node.js 18.17 or newer

Check if you have Node.js:

Open your terminal (Command Prompt on Windows, Terminal on Mac/Linux) and run:

bash

node --version

If you see a version number like v20.10.0, you're good! If you get an error or the version is below 18.17, you need to install/update Node.js:

👉 Download Node.js: https://nodejs.org (get the LTS version)

Package Manager (Comes with Node.js)

When you install Node.js, you automatically get npm (Node Package Manager). This is what you'll use to install Vellocs and its dependencies.

Verify npm is installed:

bash

npm --version

You should see a version number like 10.2.3.

Alternative: Use yarn or pnpm

Code Editor (Recommended)

While you can edit files with any text editor, we recommend VS Code for the best experience:

👉 Download VS Code: https://code.visualstudio.com

Why VS Code?

Syntax highlighting for MDX files
Built-in terminal
JSON validation for config.json
Extensions for Markdown preview

Installation Steps

Get Vellocs

Option 1: Clone from GitHub (Recommended)

If you have Git installed:

bash

git clone https://github.com/vellocs/vellocs.git
cd vellocs

Option 2: Download ZIP

Go to https://github.com/vellocs/vellocs
Click the green "Code" button
Click "Download ZIP"
Extract the ZIP file
Open terminal and navigate to the extracted folder:

bash

cd path/to/vellocs

Finding the path

Mac/Linux: Drag the folder into Terminal to auto-fill the path

Windows: Hold Shift, right-click the folder, select "Copy as path"

Install Dependencies

Now install all the packages Vellocs needs:

bash

npm install

What's happening?

This command reads package.json and downloads all required packages (like Next.js, React, Tailwind CSS) into a node_modules folder. This might take 1-2 minutes.

You should see:

Progress bars showing packages being downloaded
A message saying "added XXX packages"
No error messages (warnings are okay)

If you get errors:

Make sure you're in the right folder (where package.json exists)
Try deleting node_modules and package-lock.json, then run npm install again
Check your Node.js version with node --version

Start Development Server

Start the local development server:

bash

npm run dev

You should see:

▲ Next.js 15.0.0
- Local:        http://localhost:3000
- Ready in 2.3s

Success!

Your documentation site is now running! Open your browser and go to http://localhost:3000 to see it.

What this does:

Starts a local web server on your computer
Watches your files for changes
Automatically refreshes the browser when you edit files
Shows helpful error messages if something breaks

To stop the server: Press Ctrl + C in your terminal

Open in Your Browser

Visit http://localhost:3000 in your web browser.

You should see the Vellocs documentation site with the default content!

Try this:

Open /docs/guides/introduction.mdx in your code editor
Change some text and save the file
Watch your browser automatically update!

This is hot reloading - one of the best features of development mode.

Understanding the Project Structure

Now that Vellocs is running, let's understand what each folder does:

- - introduction.mdx
- - overview.mdx
- - example.mdx
- config.json
package.json

docs/ - Your documentation files (this is where you write)
docs/config.json - Main configuration file

What You'll Edit

99% of your work happens in two places:

/docs folder - Where you write your documentation in .mdx files
docs/config.json - Where you configure your site (name, url, colors, navigation, etc.)

Common Commands

Here are the commands you'll use most often:

Start development server:

bash

npm run dev

Use this while writing documentation. The site runs at http://localhost:3000 with hot reloading.

When to use: Every time you're working on your docs

Next Steps

Customize Your Site

Edit docs/config.json to change your site name, URL, colors, and navigation.

Configuration Guide

Learn how to edit config.json

Write Your First Page

Create a new .mdx file in /docs/guides/ and start writing!

Core Concepts

Understand how Vellocs works

Deploy Your Site

When you're ready, build and deploy to the web.

Deployment Guide

Learn how to publish your docs (coming soon)

Troubleshooting

Port 3000 is already in use

Module not found errors

Changes aren't showing up

npm command not found

Getting Help

Need Help?

GitHub Issues: github.com/vellocs/vellocs/issues
Discord Community: discord.gg/vellocs

Get Vellocs up and running on your computer in just a few minutes. This guide walks you through every step.

What You'll Need

Before installing Vellocs, make sure you have these tools installed on your computer:

Node.js (Required)

What is Node.js?

Node.js is a JavaScript runtime that allows you to run JavaScript on your computer (not just in a browser). Vellocs needs it to build your documentation site.

Version Required: Node.js 18.17 or newer

Check if you have Node.js:

Open your terminal (Command Prompt on Windows, Terminal on Mac/Linux) and run:

bash

node --version

If you see a version number like v20.10.0, you're good! If you get an error or the version is below 18.17, you need to install/update Node.js:

👉 Download Node.js: https://nodejs.org (get the LTS version)

Package Manager (Comes with Node.js)

When you install Node.js, you automatically get npm (Node Package Manager). This is what you'll use to install Vellocs and its dependencies.

Verify npm is installed:

bash

npm --version

You should see a version number like 10.2.3.

Alternative: Use yarn or pnpm

Code Editor (Recommended)

While you can edit files with any text editor, we recommend VS Code for the best experience:

👉 Download VS Code: https://code.visualstudio.com

Why VS Code?

Syntax highlighting for MDX files
Built-in terminal
JSON validation for config.json
Extensions for Markdown preview

Installation Steps

Get Vellocs

Option 1: Clone from GitHub (Recommended)

If you have Git installed:

bash

git clone https://github.com/vellocs/vellocs.git
cd vellocs

Option 2: Download ZIP

Go to https://github.com/vellocs/vellocs
Click the green "Code" button
Click "Download ZIP"
Extract the ZIP file
Open terminal and navigate to the extracted folder:

bash

cd path/to/vellocs

Finding the path

Mac/Linux: Drag the folder into Terminal to auto-fill the path

Windows: Hold Shift, right-click the folder, select "Copy as path"

Install Dependencies

Now install all the packages Vellocs needs:

bash

npm install

What's happening?

This command reads package.json and downloads all required packages (like Next.js, React, Tailwind CSS) into a node_modules folder. This might take 1-2 minutes.

You should see:

Progress bars showing packages being downloaded
A message saying "added XXX packages"
No error messages (warnings are okay)

If you get errors:

Make sure you're in the right folder (where package.json exists)
Try deleting node_modules and package-lock.json, then run npm install again
Check your Node.js version with node --version

Start Development Server

Start the local development server:

bash

npm run dev

You should see:

▲ Next.js 15.0.0
- Local:        http://localhost:3000
- Ready in 2.3s

Success!

Your documentation site is now running! Open your browser and go to http://localhost:3000 to see it.

What this does:

Starts a local web server on your computer
Watches your files for changes
Automatically refreshes the browser when you edit files
Shows helpful error messages if something breaks

To stop the server: Press Ctrl + C in your terminal

Open in Your Browser

Visit http://localhost:3000 in your web browser.

You should see the Vellocs documentation site with the default content!

Try this:

Open /docs/guides/introduction.mdx in your code editor
Change some text and save the file
Watch your browser automatically update!

This is hot reloading - one of the best features of development mode.

Understanding the Project Structure

Now that Vellocs is running, let's understand what each folder does:

- - introduction.mdx
- - overview.mdx
- - example.mdx
- config.json
package.json

docs/ - Your documentation files (this is where you write)
docs/config.json - Main configuration file

What You'll Edit

99% of your work happens in two places:

/docs folder - Where you write your documentation in .mdx files
docs/config.json - Where you configure your site (name, url, colors, navigation, etc.)