Build your site
Follow these 9 steps in order. Each step has a goal, the exact commands, what you should see, and a checkpoint. When you finish, you have a working site like this one: zones, design tokens, components, docs, tests and a live deploy on your own domain.
The steps
| # | Step | Goal |
|---|---|---|
| 1 | Create the project | Start from the starter so you begin with a clean, working site. |
| 2 | Project structure | Learn where each kind of file goes, so the site stays tidy as it grows. |
| 3 | Theme & design tokens | Give the site its own look by changing a few tokens, not hundreds of styles. |
| 4 | Pages & zones | Split content into a few clear zones so readers always know where they are. |
| 5 | Components | Reuse small Vue components instead of copying HTML around. |
| 6 | Write the docs | Write pages that are easy to scan: one goal per page, short intro, steps, result, next link. |
| 7 | Test 2–3 rounds | Catch broken links and missing pages before anyone else does. |
| 8 | Deploy (Cloudflare or Vercel) | Put the site live on Cloudflare Workers or Vercel. |
| 9 | Custom domain | Serve the site on your own domain with HTTPS. |
Tools you will use
CodeSandbox (browser), devstack.bid (templates), 21st.dev (design reference), Cloudflare or Vercel (hosting) and, optionally, Expo (mobile). See Tools & references.
The starter
Everything in the track is based on one real example: examples/starter in the source repo (see its README). It is a clean VitePress project you can copy:
cp -r examples/starter my-siteOr open it in the browser:
The starter repo is not public yet. These links use the placeholder OWNER/REPO.
Watch it
What you built
- A VitePress site with 3–5 zones and one small sidebar per zone
- A theme driven by a handful of design tokens
- Reusable components
- Docs written to one template
- Tests and CI that catch broken links and leaked secrets
- A live deploy on Cloudflare Workers or Vercel, on your own domain
Next, optionally: go mobile with Expo.
The rest of this site is reference: Start, Build & Deploy, Tools, SDK Reference, Ecosystem.
