Setting up your computer

first-website and one-page-site need nothing beyond a free GitHub account and a browser. vitepress-marketing and vitepress-blog need everything on this page: a terminal, Git, Node.js, and a code editor.

If you already have some of this, skip straight to whichever step you're missing.

1. Create a free GitHub account

Go to github.com/signup and follow the steps. Free is enough for everything on this site and every starter template.

2. Install Git

Git is the tool that actually does the cloning, committing, and pushing; GitHub is just where your repositories live online. You need both.

• Windows: download the installer from git-scm.com. The default options are fine; click through them.
• macOS: open Terminal and run git --version. If it's not already installed, macOS offers to install it for you on the spot.
• Linux: install it with your distribution's package manager (sudo apt install git, sudo dnf install git, and so on).

Check it worked by opening a terminal (see step 4 if you're not sure how) and running:

git --version

3. Install Node.js

Download the LTS version from nodejs.org. LTS means "long-term support", the stable choice; skip anything labeled "Current" unless you have a specific reason to want it. Run the installer, accepting the defaults.

Check it worked:

node --version
npm --version

Both should print a version number. npm (Node's package manager) comes bundled with Node itself, so installing one installs both.

4. A basic terminal tutorial

A terminal is just a window where you type commands instead of clicking things. Every step from here on happens in one.

Opening a terminal:

• Windows: search for "Terminal" in the Start menu and open it. It runs PowerShell by default, which is what the commands on this page assume.
• macOS: open Terminal from Applications → Utilities, or search for it with Spotlight (Cmd+Space, then type "Terminal").
• Linux: varies by distribution; usually Ctrl+Alt+T or a "Terminal" entry in your applications menu.

The handful of commands you actually need:

Command	What it does
pwd	Shows where you currently are (PowerShell's prompt already shows it too, so you rarely need this on Windows)
ls (Mac/Linux) or dir (Windows)	Lists the files and folders in the current location
cd foldername	Moves into a folder named foldername
cd ..	Moves up one folder, out of the current one
mkdir foldername	Creates a new folder named foldername

Everything else, git clone, npm install, npm run dev, is just a command you type and press Enter on. You don't need to memorize them; every template's own README tells you exactly which ones to run and when.

Common first mistake: running a command from the wrong folder. If a command fails with something like "no such file or directory" or "package.json not found", run ls/dir and check you're actually inside the project folder (cd into it if you're not).

5. Install and use VS Code

Visual Studio Code (VS Code) is a free code editor. Download it for your platform and install it like any other application.

Opening a project: File → Open Folder..., then pick the folder you cloned (see the next section). VS Code shows every file in that project on the left, and clicking one opens it for editing.

The built-in terminal: you don't need to leave VS Code to run commands. Open it with Ctrl+` (backtick, top-left of most keyboards, under Esc) on Windows/Linux, or Cmd+` on macOS, or through the menu: Terminal → New Terminal. It's the exact same terminal as step 4, just inside the editor, and it already starts in your project's folder.

6. Clone a repository and run it

Cloning downloads a copy of a GitHub repository onto your computer. On the repository's GitHub page, click the green Code button and copy the HTTPS URL. Then, in a terminal:

git clone https://github.com/yourname/your-repo.git
cd your-repo

From there, follow that specific template's own README. For vitepress-marketing and vitepress-blog, that means npm install once, then npm run dev to preview the site locally.

7. Commit and push your changes

Once you've edited some files, you need to save that work back to GitHub. VS Code has a built-in way to do this without typing git commands, though the terminal equivalent is shown alongside each step in case you'd rather use that instead.

1. Open the Source Control panel. Click the icon in VS Code's left sidebar that looks like a branching line (or press Ctrl+Shift+G/Cmd+Shift+G). Every file you've changed shows up here.
2. Stage your changes. Hover over a changed file and click the + that appears, or click the + next to "Changes" to stage everything at once. Terminal equivalent: git add .
3. Write a commit message and commit. Type a short description of what you changed in the box at the top (for example, "Update the hero text"), then click the checkmark (✓) above it, or press Ctrl+Enter/Cmd+Enter. Terminal equivalent: git commit -m "Update the hero text"
4. Push. Click Sync Changes (or the up-arrow icon next to your branch name at the bottom left). This uploads your commit to GitHub. Terminal equivalent: git push

That's the whole loop: edit a file, stage it, commit it, push it. Every template on this site assumes you can do exactly this much and no more.

8. Publish your site with GitHub Pages

GitHub Pages turns a repository into a live website, for free, at a URL like https://yourname.github.io/your-repo/. Every starter template uses it. There are two ways it's configured, depending on the template:

Deploy from a branch (used by first-website and one-page-site, which have no build step):

1. In your repository, go to Settings → Pages.
2. Under Source, choose Deploy from a branch.
3. Set the branch to main and the folder to / (root), then click Save.

GitHub Actions (used by vitepress-marketing and vitepress-blog, which need a build step first):

1. In your repository, go to Settings → Pages.
2. Under Source, choose GitHub Actions, not "Deploy from a branch".
3. The template already ships a workflow file (.github/workflows/deploy.yml) that builds and deploys automatically on every push to main. There's nothing else to configure; check the Actions tab to watch it run.

Either way, the first deploy takes a minute or two. Reload the Settings → Pages screen once it finishes; a green box shows your live address.

9. Use a custom domain instead of github.io

A GitHub Pages site works fine at yourname.github.io/your-repo/, but a real business usually wants its own domain (yourname.com) instead. You'll need to have bought one first, from any registrar (Namecheap, Cloudflare, Google Domains' successor, and so on); GitHub doesn't sell domains itself.

1. Add a CNAME file to your repository, containing just your domain name on its own line. For a no-build template, add it through GitHub's web UI: Add file → Create new file, name it exactly CNAME (no extension). For a template with a build step, create it locally at docs/public/CNAME instead, so the build copies it into the deployed site.
2. Point your domain at GitHub, at your registrar's own DNS settings:
   • For an apex domain (yourname.com, no www): add four A records, all pointing to GitHub Pages' addresses: 185.199.108.153, 185.199.109.153, 185.199.110.153, and 185.199.111.153.
   • For a subdomain (www.yourname.com): add one CNAME record pointing to yourname.github.io (your GitHub username, not the repository name).
   • GitHub's own guide has screenshots for the common registrars: managing a custom domain.
3. Wait for DNS to catch up, usually minutes, occasionally up to a day, then check Settings → Pages again; it shows a green checkmark once your domain verifies.
4. Turn on Enforce HTTPS, the checkbox right below your custom domain in that same settings screen. It can take a few hours to become available after your domain first verifies; if it's greyed out, that's why, not something broken. Don't skip this: without it, your site loads over a plain, unencrypted connection for anyone who types the address without https://, which most people do.

If your template has a build step (vitepress-marketing, vitepress-blog), one more thing needs updating once you're on a custom domain: its base setting, in docs/.vitepress/config.mts, needs to change from /your-repo-name/ to /, since a custom domain serves the site from the root instead of a subpath. Each of those templates' own README and AGENTS.md explain exactly where.

Where to go next

• Starter templates: the actual templates this page is preparation for.
• Getting started: BootForm itself, once you're at the "make the contact form work" step of any template.