-
Step 1 · Pick the tool and get an empty site running
VitePress in three commands, previewing locally
For a docs site the default choice is VitePress: Markdown becomes pages, and sidebar, full-text search and dark mode are built in. The build output is plain static files you can host anywhere.
npm init -y && npm i -D vitepress npx vitepress init # interactive setup, press Enter through it npm run docs:dev # preview at http://localhost:5173After init you have:
docs/.vitepress/config.mjs: site config — title, nav, sidebar, searchdocs/index.md: the home page- Other
.mdfiles underdocs/: the actual documentation
Directory advice: one folder per topic (
guide/,api/,faq/), with lowercase hyphenated filenames. Non-ASCII filenames get percent-encoded in URLs, which hurts both sharing and indexing.Get the empty site running before you write content. Don't configure and write at the same time — one wrong line in the config can eat half an hour.
Checklist
- The empty site opens locally
- Editing a .md refreshes the page automatically
- Directories are split by topic
-
Step 2 · Configure nav / sidebar / search
Order the sidebar by how readers look for things, not by your folder layout
Roughly 80% of a docs site's usability comes down to how the sidebar is ordered. The rule: order it the way a reader moves top to bottom, not the order you happened to write in.
// docs/.vitepress/config.mjs export default { title: 'My Docs', themeConfig: { nav: [{ text: 'Guide', link: '/guide/' }, { text: 'API', link: '/api/' }], sidebar: { '/guide/': [{ text: 'Getting started', items: [ { text: 'Introduction', link: '/guide/' }, { text: 'Quickstart', link: '/guide/quickstart' } ]}] }, search: { provider: 'local' } // local full-text search, no service required } }Three lessons:
- Use reader-facing group titles like "Getting started / Advanced / Reference", not
01-basic - Turn on local search (
provider: 'local') — it handles CJK and costs nothing - Open every page with one line saying what it covers, so a reader knows whether to click at all
Don't: flatten every page into a single sidebar list. Past 15 entries it becomes hard to find anything.
Checklist
- The sidebar is grouped in reading order
- Local search finds non-English keywords too
- Every page opens with a one-line summary
- Use reader-facing group titles like "Getting started / Advanced / Reference", not
-
Step 3 · Write the content: one page, one problem
The title states the problem; the body gives steps plus copy-paste snippets
Docs are not essays: one page solves one problem. Otherwise the reader finds the page and still has to dig through it.
The standard shape of a page:
- One line on what this page solves
- The shortest usable example, copy-paste ready
- Parameters / options as a table
- Common errors and how to debug them — the section most often skipped, and the one that earns the most goodwill
Writing details:
- Commands, config and code all go in code blocks, with the environment stated
- Put "note" and "warning" in callout blocks, not inline with the prose
- Write concrete version numbers and dates, never "the latest version" — three months later it's wrong
- Put a last-updated date at the bottom; readers judge freshness by it
Where the content comes from: take every question you've been asked three or more times and give it a page. Asked repeatedly means someone is searching for it.
Don't aim to write it all at once: 10 usable pages beat a 50-page outline.
Checklist
- Each page covers one problem, and its title states it
- Commands and config are one-click copyable
- Every page has a common-errors section and an updated date
-
Step 4 · Build + deploy (GitHub Pages / Vercel / your own server)
One command produces static output; push it and it's live
A docs site builds to plain static files, so hosting is a free choice:
Option 1: Vercel (least work) — connect the GitHub repo, pick VitePress as the framework, and every push builds and deploys, with HTTPS and a CDN included.
Option 2: GitHub Pages — repo Settings → Pages → GitHub Actions; use the official workflow template and push to publish. Free, but slow to reach from some regions.
Option 3: your own server (fastest regional access)
npm run docs:build # output in docs/.vitepress/dist rsync -av docs/.vitepress/dist/ root@server:/www/wwwroot/docs.yourdomain/Then create the site in your panel and request a certificate.
Mind the
basesetting: deploying under a subpath such as/docs/meansbase: '/docs/'in the config, or every asset 404s.Custom domains: Vercel and Pages both support binding a domain with an automatic certificate; on your own server use the panel's Let's Encrypt integration.
Checklist
- The docs home page opens online
- Sidebar and search work in production
- When deployed under a subpath, base is set and nothing 404s
-
Step 5 · SEO + indexing observation + content iteration
Every page indexable and on the watchlist; add pages based on search terms
A docs site is a long-term traffic asset, provided every page can be indexed on its own.
Must do:
- Write
titleanddescriptionin each page's frontmatter so it gets its own meta tags - Enable
sitemap(sitemap: { hostname: 'https://yourdomain' }) so sitemap.xml is generated automatically - Submit the sitemap to Google, and to Baidu if you care about that market
- Link internally: every new page should be reachable from a related page, never an island
Indexing observation (copy this site's approach):
Put the doc URLs intodata/index-observation.jsonand run the observation script periodically — it checks HTTP status, canonical, robots permission and whether lastmod moved. Confirm indexed status in the search platforms and fill in theindexedfield by hand.Two inputs for iteration:
- The search platform's query report — terms people search that you haven't covered become new pages
- Dwell time and exit rate — a page with very short dwell and immediate exits usually over-promises in its title or answers the wrong question
Don't rewrite everything at once: rewriting 3 pages a month beats rewriting all of them once a year.
Checklist
- sitemap.xml is generated and submitted
- Doc pages are on the indexing watchlist
- There's a concrete list of pages to add each month
- Write