Creating Your First Page

Overview

This guide will walk you through the process of creating a new page, such as a “Meet the Team” page, using the patterns and components provided by this template. The best way to learn is by studying the shipped pages — src/pages/about.astro and src/pages/contact.astro are good compact examples (the homepage at src/pages/index.astro is a full demo page with heroes, islands, and view transitions, so start with the smaller ones).

The Core Pattern

Creating a new page in Astro is as simple as adding a new .astro file to the src/pages/ directory. The filename will directly map to the URL of the page.

src/pages/about.astro → /about
src/pages/contact.astro → /contact
src/pages/blog/my-first-post.astro → /blog/my-first-post

Step 1: Create the Page File

Create a new file at src/pages/team.astro. (We use a Team page here because the template already ships about.astro and contact.astro — creating those would collide with existing pages.)

Step 2: Add the Basic Structure

Every page should use the BaseLayout component to ensure a consistent header, footer, and metadata system. Copy the following structure into your new file.

---
import BaseLayout from '@/layouts/BaseLayout.astro';
import Container from '@/components/structural/Container.astro';
import Section from '@/components/structural/Section.astro';

const pageTitle = 'Meet the Team';
const pageDescription = 'Learn more about the people behind our company.';
---

<BaseLayout title={pageTitle} description={pageDescription}>
  <Section>
    <Container>
      <h1 class="text-4xl font-bold">{pageTitle}</h1>
      <p class="mt-4 text-lg">
        {pageDescription}
      </p>
      <p class="mt-4">
        This is where you can add more content about your company.
      </p>
    </Container>
  </Section>
</BaseLayout>

Key Concepts in this Example

Layout: The entire page is wrapped in <BaseLayout>, which handles all the <head> tags, metadata, header, and footer.
Props: We pass title and description props to the layout to control the page’s SEO and browser tab information.
Structural Components: We use <Section> and <Container> to create consistent, responsive spacing and width for our content, just like on the homepage.

If you want your new page to appear in the site’s main navigation menu, you need to add it to the navigation configuration.

Navigate to src/content/navigation/.
Edit the header.json file.
Add a new entry to the items array (orders 1-8 are taken by the shipped entries, so pick the next free value):
```
{
  "label": "Team",
  "href": "/team/",
  "order": 9
}
```

Your new page will now automatically appear in the header navigation (the header reads this collection at build time). The footer’s links are configured separately in src/config.ts (siteLinks and socialLinks). This separation of content and configuration makes it easy to manage your site’s structure.