Your First Layout
This is a member-only chapter. Log in with your Signal Over Noise membership email to continue.
Log in to readModule 2 · Section 4 of 8
Your First Layout
Pages without layouts repeat the same HTML boilerplate (<html>, <head>, <body>) on every file. Layouts solve that. Create src/layouts/BaseLayout.astro:
---
interface Props {
title: string;
description?: string;
}
const { title, description = "My site" } = Astro.props;
---
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<meta name="description" content={description} />
<title>{title}</title>
</head>
<body>
<slot />
</body>
</html>The --- fenced block at the top is the frontmatter — server-side JavaScript that runs at build time. The Astro.props object contains whatever the parent passes down. The <slot /> is where child content goes.
Now update src/pages/index.astro to use it:
---
import BaseLayout from '../layouts/BaseLayout.astro';
---
<BaseLayout title="Home">
<h1>Hello, world.</h1>
</BaseLayout>Refresh the browser. The title in the browser tab should now say “Home”. You’ve got a layout working.