A team handbook in three pages.

Click its menu: the page and the address change, just as they would on a real space. Its full source is underneath.

spacesheep.dev/@you/team-handbook

Welcome to the team

Everything you need in your first week. Start with on-call, then book your holidays.

On-callWho's on this week

HolidaysHow to book time off

On-call

Week	Primary	Backup
This week	Ana	Ben
Next week	Ben	Chloe

Holidays

Check the on-call rota
Ask your lead in the team channel
Add it to the shared calendar

The handbook's source: three files, one menu

The menu is the same in each file. Only aria-current moves.

team-handbook/index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Team handbook</title>
  <link rel="stylesheet" href="site.css">
</head>
<body>
  <nav>
    <a href="index.html" aria-current="page">Home</a>
    <a href="oncall.html">On-call</a>
    <a href="holidays.html">Holidays</a>
  </nav>
  <h1 data-ss-id="welcome">Welcome to the team</h1>
  <p data-ss-id="intro">Everything you need in your first week.</p>
</body>
</html>

team-handbook/oncall.html

<!-- same <head> as index.html, title "On-call" -->
<nav>
  <a href="index.html">Home</a>
  <a href="oncall.html" aria-current="page">On-call</a>
  <a href="holidays.html">Holidays</a>
</nav>
<h1 data-ss-id="oncall">On-call</h1>
<table data-ss-id="rota">…</table>

team-handbook/holidays.html

<!-- same <head> as index.html, title "Holidays" -->
<nav>
  <a href="index.html">Home</a>
  <a href="oncall.html">On-call</a>
  <a href="holidays.html" aria-current="page">Holidays</a>
</nav>
<h1 data-ss-id="holidays">Holidays</h1>
<ol data-ss-id="booking-steps">…</ol>

This guide is built the same way

Five pages, one shared stylesheet and one shared script, deployed with one command.

This space's files

site.css22 KB

site.js13 KB

deploy.html12 KB

example.html12 KB

index.html9 KB

how-it-works.html8 KB

tips.html7 KB

7 files · 83 KB in all · Free fits 200 files and 25 MB

How it was published

terminal

cd multi-page-spaces-a-mini-website-explained
npx -y spacesheep@latest deploy . -m "Phone fixes"

The folder's .spacesheep.json names the space, so each run publishes a new version at the same link.