Quick Start — WebDocs

ℹ️

Prerequisites

You only need a text editor and a web browser. No Node.js, npm, or build tools required.

Prerequisites

WebDocs is intentionally zero-dependency. Before starting, make sure you have:

Tool	Required?	Purpose
Text editor (VS Code, etc.)	Yes	Edit HTML and CSS files
Web browser	Yes	Preview your site
Git	Optional	Version control & deploy to GitHub Pages
Node.js	Optional	Local dev server (can use `npx serve`)

Step 1: Download the Template

Choose your preferred method:

git clone https://github.com/your/webdocs.git my-docs
cd my-docs
open index.html  # or double-click index.html

Download the ZIP, extract it, and open index.html in your browser. No installation required.

Download ZIP

⚠️

Coming Soon

The npx create-webdocs CLI is under development. Use Git or ZIP for now.

Step 2: Customize Your Brand

Open css/style.css and update the design tokens at the top of the file:

:root {
  /* 1. Change brand color (used everywhere) */
  --color-accent:       #6366f1;  /* your brand color */
  --color-accent-hover: #4f46e5;

  /* 2. Change fonts */
  --font-sans: 'Your Font', system-ui, sans-serif;
  --font-mono: 'Your Mono', monospace;

  /* 3. Adjust sidebar width */
  --sidebar-width: 280px;
}

Step 3: Add Your Pages

Copy any existing page and update the content. Each page includes the full layout — just change the content inside .content:

Copy a page file

Duplicate getting-started.html and rename it to your page name.

Update the content area

Replace everything inside <div class="content">…</div> with your documentation.

Add the link to the sidebar

Open all HTML files and add your new page to the <nav class="sidebar"> section.

Update the search index

In js/main.js, add an entry to the Search.data array for your new page.

Step 4: Deploy

WebDocs works with any static hosting provider. Here are the most popular options:

🐙

GitHub Pages

Push to a repo, enable Pages in Settings → Pages → Deploy from branch. Free forever.

▲

Vercel

Connect your GitHub repo. Auto-deploys on every push. Generous free tier.

🌐

Netlify

Drag the project folder to netlify.com/drop. Instant deploy. No signup needed.

Tips & Tricks

💡

Pro tip: Live preview

Run npx serve . in your project folder for a local server with auto-reload. No config needed.

🔍

Search customization

Replace Search.data in js/main.js with a fetch from a JSON file for large sites. The interface stays the same.