Step
1/10
A shared shell
Three pages, three duplicate <head>s. Time to share.
Your site has three routes now: / , /about , /crew/[name] . Each one used to carry its own <html> , <head> , header, footer.
That's three copies of the same wrapper. The day you change the logo, you change it three times. No.
Astro has src/layouts/ for exactly this. A layout is a component with a <slot /> — pages plug their content in.
✦ src/layouts/Layout.astro — the new shell — pre-built for you
read-only
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
---
const { title } = Astro.props;
---
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>{title} · Mission Control</title>
</head>
<body>
<header>
<a href="/">🛰 Mission Control</a>
</header>
<slot />
<footer>© 2026 Mission Control</footer>
</body>
</html>Now your index.astro just wraps its content in <Layout> . The shell disappears from every page.
✦ src/pages/index.astro — layout wraps everything live
Do the same for about.astro and crew/[name].astro . One shell, three pages. Change the footer once.
— page 1 —