Pages

Pages are files that live in the src/pages/ subdirectory of your Astro project. They are responsible for handling routing, data loading, and overall page layout for every page in your website.

Supported page files

Astro supports the following file types in the src/pages/ directory:

.astro
.md
.mdx (with the MDX Integration installed)
.html
[.js/.ts] (as endpoints)

File-based routing

Astro leverages a routing strategy called file-based routing. Each file in your src/pages/ directory becomes an endpoint on your site based on its file path.

Write standard HTML <a> elements in your component template to link between pages.

📚 Read more about Routing in Astro.

Astro Pages

Astro pages use the .astro file extension and support the same features as Astro components.

---
---
<html lang="en">
  <head>
    <title>My Homepage</title>
  </head>
  <body>
    <h1>Welcome to my website!</h1>
  </body>
</html>

To avoid repeating the same HTML elements on every page, you can move common <head> and <body> elements into your own layout components. You can use as many or as few layout components as you’d like.

---
import MySiteLayout from '../layouts/MySiteLayout.astro';
---
<MySiteLayout>
  <p>My page content, wrapped in a layout!</p>
</MySiteLayout>

📚 Read more about layout components in Astro.

Markdown/MDX Pages

Astro also treats any Markdown (.md) files inside of src/pages/ as pages in your final website. If you have the MDX Integration installed, it also treats MDX (.mdx) files the same way. These are commonly used for text-heavy pages like blog posts and documentation.

Page layouts are especially useful for Markdown files. Markdown files can use the special layout front matter property to specify a layout component that will wrap their Markdown content in a full <html>...</html> page document.

---
layout: '../layouts/MySiteLayout.astro'
title: 'My Markdown page'
---
# Title

This is my page, written in **Markdown.**

📚 Read more about Markdown in Astro.

HTML Pages

Files with the .html file extension can be placed in the src/pages/ and used directly as pages on your site. Note that some key Astro features are not supported in HTML Components.

Custom 404 Error Page

For a custom 404 error page, you can create a 404.astro or 404.md file in /src/pages.

This will build to a 404.html page. Most deploy services will find and use it.