FreeStack guideWeb & code6 min

Make a three-page client handbook before buying a knowledge base

Turn repeated handover questions into a small, searchable website using local Markdown and a free documentation generator.

What you’re working towards

An editable three-page handbook, a locally reviewed website and a clear decision about whether publishing needs a paid service.

Start with the answers your recipient needs, then choose the tools. VS Code writes the source; VitePress turns it into a navigable website. This original FreeStack exercise uses a fictional Bramble brand handover. It is documentation-based guidance, not a report of a tested provider workflow or real client result. Official sources checked 19 October 2026; the walkthrough follows the provider’s stable VitePress 1.6.4 documentation rather than its 2.0 alpha.

Free boundaries before you start

Source checks for this workflow. These notes clarify older catalogue summaries; they do not change your saved toolkit.

Visual Studio Code · checked 2026-10-19

Free for private and commercial core editing. The Microsoft distribution licence differs from the MIT Code-OSS source licence. Local Markdown editing and preview need no AI plan. Copilot, model services and extensions have separate accounts, licences and usage limits; no free hosted compute is included.

Official FAQ explicitly says installing and using core editor features needs no account. Connected AI or sync services have separate requirements.

VitePress · checked 2026-10-19

Free MIT-licensed documentation generator. This workflow follows stable 1.6.4, with local search, local builds and no generation-credit plan. Hosting, domains and private access are separate.

No provider account step appears in the documented local package-manager setup. Hosting and connected services have separate requirements.

PICTURE THE RESULT

A small example to aim for

FICTIONAL CLIENT HANDBOOK

bramble.

Start here · Files · Updates

Search the handbook…

Which logo file should I use?

For a dark background, choose the light logo export.

Example: bramble-logo-light.svg

Need a different format? Open Updates.
THREE QUESTIONS. ONE USEFUL HOME.

Write once.
Make the next step clear.

VS CodeEdit three Markdown pages
VitePressConnect, search and build
Your chosen hostPublish only when approved

FreeStack layout concept. The search field and file example are illustrative, not functional controls or a provider screenshot.

FreeStack example output · illustrative, not a provider screenshot or a tested export.

Jump to a step
01

Choose three questions, not a whole support portal

Write down the questions that keep interrupting a handover. For this fictional identity pack: Which file should I use? How do the colours work? How do I request an update? Give each answer one page and one intended reader. Decide whether the finished handbook can be public before putting any client information into it. Start with sample filenames and invented contact details. Leave search analytics, chatbots, accounts and ticketing outside this first version.

02

Write the source in a normal project folder

In VS Code, create a handbook folder and write the answers as Markdown. Start each page with a descriptive heading. Put the next action first, followed by a short example and any exception. For the files page, explain the difference between ready-to-use SVG or PNG exports and editable sources. Preview the Markdown with VS Code’s built-in preview. Keep the actual client assets outside this sample project; link to approved delivery locations only when you are ready to publish.

03

Add the smallest publishing layer

Install a supported Node.js release and use a terminal in the handbook folder. For the stable version checked here, install with npm add -D vitepress@1.6.4, then run npx vitepress init. Choose ./docs and the default theme. Keep the generated scripts for local development, production build and preview. Move the handbook content into docs/index.md, docs/files.md and docs/updates.md. Keep the package manifest and lockfile with your source so the chosen version is recorded. Follow the stable setup guide if your package manager differs.

04

Give the reader a route and one useful search

Set the site title to Bramble handbook. In the VitePress theme configuration, add navigation to Start here, Files and Updates, pointing to /, /files and /updates. Use the documented themeConfig.search option with provider set to local for built-in local search. Keep links and headings literal: Use the light logo on dark backgrounds is more helpful than Brand magic. Do not add a separate search service for this small example. Write one sentence on the home page telling the reader which page to open first.

05

Review the built output as a recipient

Run npm run docs:build, then npm run docs:preview using the generated scripts. Review the served production output, not only the editing preview. Follow every link, search for a real filename, resize the window and navigate with the keyboard. Ask someone unfamiliar with the project to answer the three starting questions using only the handbook. Record misunderstandings and change the copy. A local preview is not a public deployment, and a successful build does not prove the answers are useful.

06

Publish only when the requirement is clear

For the ./docs layout, the default publishable output is docs/.vitepress/dist. Use an existing approved static host and check its own account, bandwidth, commercial-use and access rules. A subdirectory deployment needs the correct base path; follow the stable deployment guide. Keep the editable Markdown and configuration backed up separately from the built files. FreeStack editorial upgrade triggers: consider paid hosting or a managed knowledge base only when you need a named feature such as private client access, non-technical editing, an agreed support service or a specific traffic allowance. The handbook alone does not justify another membership.

THE BUILD AT A GLANCE

Your workflow, connected.

Follow the steps and carry the output into the next stage. These are suggested handoffs, not automatic integrations.

  1. 01Define the outcome
    Start with a plan
    Three questions + publication boundary
  2. 02Write the answers

    Core local editing needs no account; AI and extensions are optional.

    Editable Markdown pages
  3. 03Generate the site

    VitePress builds pages; it supplies no hosting subscription or private portal.

    A local documentation project
  4. 05Check the handover
    Reviewed pages + revision notes
  5. 06Choose delivery
    A publishing decision with a reason

Provider information

Check current plans and documentation before committing to a workflow.

A couple of useful questions

What stays free, and what can cost money?

VS Code’s core editor is free for private and commercial use. VitePress is MIT-licensed software for local builds, with no recurring generation-credit plan in this workflow. Your hardware and storage apply. Hosting, domains, external search, AI models and third-party services have their own terms; none is included here.

Do I need an account?

Microsoft explicitly says core VS Code editing needs no account. VitePress’s documented local installation is a package-manager workflow with no provider account step. A publishing host, remote Git service or optional AI assistant can require an account separately. This guide does not verify every host’s requirements.

Why use stable 1.6.4 rather than copy the latest-looking commands?

The provider currently presents a 2.0 alpha alongside stable 1.6.4. This guide names its documentation version so setup and configuration are consistent. Before starting a future project, check the provider’s current stable version and migration notes rather than mixing instructions across releases.

What does Save this toolkit keep?

The existing FreeStack flow saves VS Code and VitePress to your private stack after sign-in. It does not upload your handbook, install software, create a host account or back up the files. Keep the source in your own approved storage.

What would you try?

Share your result or ask a specific question about this workflow.

Join the conversation
SPONSORED · THE DIGITAL ACADEMYSearch your site. See what you might need.

Start with a TDA website audit to find your next useful improvement.

Find something good. Make something great.© 2026 FreeStack