Pages

Astro uses file-based routing: src/pages/about.astro renders at /about/. Every theme follows this pattern; there’s no special route config to learn.

Add a page

Create the file:

---
import Layout from "~/layouts/Layout.astro";
import Header from "~/components/Header.astro";
import Footer from "~/components/Footer.astro";
---

<Layout
  title="Changelog — Aurora"
  description="What's new in Aurora."
>
  <Header />
  <main id="main">
    <section class="container-content py-20 md:py-28">
      <h1 class="text-display-sm">Changelog</h1>
      <p class="mt-5 text-soft">The latest updates and improvements.</p>
      {/* …your content… */}
    </section>
  </main>
  <Footer />
</Layout>

Save it. Your new URL is http://localhost:4321/changelog/. The header nav still needs to know about it — open src/config/site.ts and add { label: "Changelog", url: "/changelog/" } to navigation.links.

Remove a page

Delete the file in src/pages/. Astro stops generating that URL on the next build. Remember to remove any nav links to it from siteConfig.navigation.links and siteConfig.footer.columns.

Rename a page

Two steps:

Rename the file: src/pages/pricing.astro → src/pages/plans.astro.
Update every link in siteConfig (nav, footer) and any hardcoded /pricing/ references inside components.

Reuse existing sections

Inside any new page, you can drop in the same section components the homepage uses:

---
import Layout from "~/layouts/Layout.astro";
import Header from "~/components/Header.astro";
import Footer from "~/components/Footer.astro";
import Hero from "~/components/Hero.astro";
import Features from "~/components/Features.astro";
import CTA from "~/components/CTA.astro";
---

<Layout title="Launching Aurora 2.0">
  <Header />
  <main id="main">
    <Hero />
    <Features />
    <CTA />
  </main>
  <Footer />
</Layout>

If you want different copy in the Hero on this specific page, pass props:

<Hero
  eyebrow="LAUNCH"
  title="Aurora 2.0 is here"
  subtitle="Everything you loved, twice as fast."
/>

(Whether the Hero accepts props depends on the theme — open Hero.astro and look at the Astro.props destructure at the top.)

Dynamic routes

For pages where the URL has a variable part (blog posts, team member profiles, product detail pages), use [brackets] in the filename:

---
import Layout from "~/layouts/Layout.astro";
import { siteConfig } from "~/config/site";

export function getStaticPaths() {
  return siteConfig.team.members.map((member) => ({
    params: { slug: member.name.toLowerCase().replace(/\s+/g, "-") },
    props: { member },
  }));
}

const { member } = Astro.props;
---

<Layout title={`${member.name} — Aurora`}>
  <h1>{member.name}</h1>
  <p>{member.role}</p>
  <p>{member.bio}</p>
</Layout>

This generates /team/alex-rivera/, /team/sarah-kim/, etc. — one for each member in siteConfig.team.members.

Page metadata (SEO per page)

Pass title, description, ogImage, and noindex to <Layout>:

<Layout
  title="Pricing — Aurora"
  description="Three plans, no surprises."
  ogImage="/og/pricing.png"
  noindex={false}
>

See SEO & OG image for the full layout API.

Pages that ship with every theme

Every theme has these pages out of the box. Delete the ones you don’t need:

src/pages/index.astro — the homepage
src/pages/about.astro — about / story
src/pages/contact.astro — contact form + info
src/pages/pricing.astro — pricing plans
src/pages/features.astro — feature breakdown
src/pages/customers.astro — logos + testimonials
src/pages/resources.astro — resource hub
src/pages/blog/index.astro — blog index
src/pages/blog/[slug].astro — blog post template
src/pages/sections.astro — section showcase (handy as a style guide)
src/pages/privacy.astro + src/pages/terms.astro — legal placeholders

Common gotchas

What’s next

New sections — build a custom section for your new page.
Content → Writing blog posts — add posts to the dynamic /blog/[slug]/ route.