Build a Multi-Page Static Site With Claude Code

Start with an approved page map, ask Claude Code to create a small static file tree, and test every route before deployment. The output is a new multi-page repository. It is not a request to change a site that already exists. For that separate task, use the existing static-site editing guide. This guide begins with an empty folder and ends with linked local pages, not a live domain.

What should the brief say before you start?

Use a page map with distinct jobs. This fictional example uses Northline Bicycle Repair: / introduces the shop, /services/ lists two approved services, and /contact/ gives one contact method. The name and service facts are example inputs. hello@example.com is a placeholder. No price, opening time, review, or repair promise has been provided, so none belongs in the generated site.

Write acceptance checks beside the map: all three pages load; navigation reaches each page; the contact link uses the approved address; the services page contains only flat repair and brake adjustment; and the layout remains readable on a phone. If your brief has only one real reader task, build one page instead. The single-page ChatGPT guide owns that smaller output.

How do you open Claude Code in a new repository?

Create a new folder for this site and initialize Git. Then start claude inside it:

mkdir northline-site
cd northline-site
git init
claude

These commands describe what the reader should do; we did not run a Claude Code session for this article. Anthropic's current quickstart gives installation methods, account requirements, and the claude command. Follow that guide for your operating system. Claude Code requires a supported subscription, Console account, or provider access. It may edit files or run commands in the folder, depending on the session's permission mode and your settings. Check the mode before you approve work. Do not put unrelated projects or credentials in this folder.

What task should you give the agent?

Paste the approved brief. Then give Claude Code a concrete file and route contract:

Build a new, dependency-free static site from the brief below. Create index.html, services/index.html, contact/index.html, and one shared styles.css at the root. Use relative links that work from nested pages and when hosted below a path prefix. Use semantic headings and visible keyboard focus. Add no JavaScript, form, remote asset, fabricated business fact, or deployment setup. Do not commit or publish. After writing, list each file, each route, every placeholder, and the checks you actually ran. Here is the approved brief: [paste brief].

The expected artifact has this shape:

northline-site/
  index.html
  styles.css
  services/
    index.html
  contact/
    index.html

There is a subtle link issue here. From the home page, services/ reaches the services page. From services/index.html, that same text resolves inside services/ again. A shared navigation block copied across files needs page-specific paths, or a build system that resolves links. For this small site, use these exact relative paths:

Each page needs its own <nav> with those href values and a <link rel="stylesheet" href="..."> using the CSS column. The runnable three-page fixture in the research record uses this table. A root-relative /services/ path might work at a domain root but fail when the site is hosted below a project prefix.

How do you verify each route?

Run git diff --no-index /dev/null index.html or inspect the new untracked files directly; an empty Git repository does not show untracked content in ordinary git diff. Read all files before staging them. Check for unauthorized claims and unexpected network calls. Then run python3 -m http.server 8000 from the project root. MDN documents this local preview method.

Open http://localhost:8000/, http://localhost:8000/services/, and http://localhost:8000/contact/. On each route, use the actual navigation to reach the other pages. Check the browser network panel for missing CSS or images. Test the email link from the contact page, and replace the placeholder address before launch. Resize to a narrow phone width and use the keyboard to move through links. Fix a failed route before adding more pages.

If you require subpath hosting, copy the complete site folder into a parent preview folder as project/, run the server from that parent, and also test http://localhost:8000/project/, /project/services/, and /project/contact/. Resolve every navigation and stylesheet URL from each page. For example, ../styles.css from /project/services/ resolves to /project/styles.css. The local browser fixture for this guide tested that mapping at 320 and 1440 px. It does not prove that a different host will use the same directory-routing rule; check the deployed host too.

Ask Claude Code to report tests, but do not take its statement as proof. Anthropic's quickstart describes file edits and tests as possible tasks; it does not guarantee that every requested check was run. Your route table is the acceptance artifact:

Record actual results, not a prefilled "pass." If you later add a fourth page, add a row and repeat the link checks. Commit only after you have reviewed the source and the local browser result. You can then follow the static-file publishing guide.

Figment's AI prompt-preparation tool serves requests about an existing website, not this empty-folder build. See /ai-editor for current editor access. Figment's editor changes a separate imported static copy; it does not build or deploy arbitrary generated files from this guide.

Sources and access date

• Anthropic, Claude Code quickstart, accessed 2026-09-23. Used for CLI startup, account requirements, permission-mode caution, and agent tasks.
• Anthropic, Claude Code permissions, accessed 2026-09-23. Used for the instruction to check the session mode.
• MDN, set up a local testing server, accessed 2026-09-23. Used for local route preview.