How to Add Pages to an Astro Template

To add a page to an Astro template, use the project’s existing routing and layout conventions, write the content and connect the new public URL to the relevant navigation or listing. For a simple file-based page, a file in src/pages becomes a route. For collection-driven content, a shared route usually generates pages from entries.

First determine which of those patterns the package already uses. Adding another copy of the full document markup may work temporarily, but it creates unnecessary divergence from the rest of the website.

Identify the right type of page

An about page, a service description and an article can have different source locations. A package might put about.astro directly in src/pages, store service data in JSON and generate articles from Markdown collections.

Open an existing page of the same type and trace where its content originates. Check its layout import, metadata inputs and related links. Use that page as a structural reference without carrying over its title, canonical URL or unrelated example content.

If the site uses a content collection for the type you need, follow Astro content collections rather than adding an unrelated route that bypasses the editorial system.

Choose the URL before the filename

Write the intended public path first. For a simple static service page, /services/process-review/ can correspond to src/pages/services/process-review.astro. A nested directory makes the content relationship visible in source without requiring a separate application router.

Keep paths readable and stable. Changing the URL later may require redirects and updates to internal links. Do not add dates or organisational labels merely because they are available if you expect them to change regularly.

Astro’s routing documentation explains file-based routes and dynamic route generation. Adapt its examples to the exact template structure, particularly where the package defines custom identifiers or trailing slash rules.

Reuse the existing layout

Assume the template already has src/layouts/PageLayout.astro and that it accepts a title prop. A page nested at src/pages/services/process-review.astro could begin:

---
import PageLayout from '../../layouts/PageLayout.astro';
---
<PageLayout title="Process review services">
  <h1>Process review services</h1>
  <p>Explain what the service covers and who it helps.</p>
  <h2>What the review includes</h2>
  <ul>
    <li>A documented review of the agreed process.</li>
    <li>A prioritised discussion of findings.</li>
  </ul>
  <a href="/contact/">Discuss your requirements</a>
</PageLayout>

The layout name and accepted props are assumptions for this illustration. Inspect the real file before copying the example. If the layout already renders a main heading from its title prop, avoid adding another one in the page body.

The relative import moves up two directories because the source page is nested inside services. The contact link is a public website path and follows different rules from the import.

Supply the page’s unique metadata

Use a descriptive title and short summary that match the new page. Check how the template generates canonical and social metadata so the new route does not retain another page’s identifiers.

If metadata is centralised in a data record, update that record. If the layout expects separate props, provide them there. Avoid introducing a second metadata system for one page because that makes later changes harder to reason about.

Review the resulting HTML after building. The browser’s visible tab title is useful, but it does not reveal every metadata value or whether multiple canonical elements have accidentally been emitted.

Make the page discoverable

Choose where the new page belongs in the visitor journey. A main service may need a service listing link and a navigation entry. A supporting article may need links from its topic page and related articles instead of the main navigation.

Use meaningful anchor text. “Process review services” explains the destination better than an isolated “click here”. Confirm that the destination exists and that the page also provides useful onward paths.

Do not assume that adding a file updates every index. Some templates generate listings automatically; others maintain arrays of navigation items. Inspect the implementation and check the rendered result.

Check assets and content permissions

Use approved photographs or illustrations, and check their paths on the new nested URL. A relative image path may work on a root page and fail deeper in the site.

Confirm that sample client names, testimonials and project outcomes have been replaced with supported information. Adding a new page by copying an existing one can accidentally duplicate claims as well as layout.

For a real Astro example, examine the AegisCore listing for its current page inventory. Treat that inventory as product-specific, since not every template includes the same content structures.

Build and test direct access

Run the documented production build and preview it. Open the new URL directly in a fresh tab, then navigate to it from the intended listing. Test on a narrow screen and with keyboard navigation.

Check its main heading, metadata, links, images and enquiry destination. If the public URL previously served another page, plan the redirect or replacement intentionally rather than leaving ambiguous versions live.

The Astro template overview explains how consistent layouts and content models make future page additions easier to maintain.