Building

Pages & routes

Creating pages, routes, titles, the page tree and page-level settings.

A page is a route, a title, a tree and its own stylesheet. Everything else about it — what wraps it, what tokens it can spend, what scripts it loads — comes from the project.

Routes

A page's route is its file. about is emitted as src/pages/about.astro and served at /about; docs/intro becomes src/pages/docs/intro.astro and /docs/intro.

One page is nominated as the homepage in Settings → Site. That page is emitted as index.astro and drops its own slug; the page that used to be the homepage gets its slug back on the same save.

Renaming a route moves the page and its files together. Nothing is left behind pointing at the old name.

Creating and switching

The page switcher in the top bar creates, opens, renames and re-routes pages. A new page starts empty, with one stylesheet, and is emitted immediately — the emitted file imports its CSS by path, so that file has to exist from the first save or the build would fail on a missing import.

The page tree

What you build becomes the <main> of the emitted file:

---
import Base from '../layouts/PlainBase.astro';
import '../styles/generated/framework.css';
import '../styles/generated/pages/about.css';
---
<Base title="About" description="Two people, a lot of opinions about CSS.">
  <main>
    <section builder-data-element="section" class="about">…</section>
  </main>
</Base>

If a template applies to the route, the template's tree supplies everything around that <main> — see Templates. Without a template, the page is emitted on its own.

Page settings

In the Settings tab with nothing selected (or from the page switcher) a page carries:

• Title — the page's own words. The document title is built from the template in Settings → SEO (%s is this title, %site the site name), so you never retype the site name per page.
• Description — one sentence, used for <meta name="description"> and the social card.
• Share image — overrides the site default for this page.
• Hidden from search — emits noindex, nofollow and drops the page from the sitemap.

Nothing that was left empty is emitted. An empty <meta> is worse than none, because a crawler believes it.

The page's own stylesheet

Every page has a stylesheet of its own, emitted to src/styles/generated/pages/<route>.css. Rules you write while a page element is selected land there.

A class you would want on a second page does not belong here — put it in a global stylesheet, where every page can reach it.

Page scripts

A page can carry its own JavaScript, emitted as a real file and imported by that page alone. Use it for something this page does. For something the site does, use a snippet, which is attached by a rule and accumulates across pages.

Deleting a page

Deleting removes the page from the project document and deletes its emitted files. Its history is in git, which is the right place for it.