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
Section titled Supported page filesAstro 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
Section titled File-based routingAstro 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.
📚 Read more about Routing in Astro.
Link between pages
Section titled Link between pagesWrite standard HTML <a>
elements in your Astro pages to link to other pages on your site.
Astro Pages
Section titled Astro PagesAstro 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
Section titled Markdown/MDX PagesAstro 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
Section titled HTML PagesFiles 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
Section titled Custom 404 Error PageFor 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.