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.
Astro supports the following file types in the src/pages/
directory:
.astro
.md
.mdx
(with the MDX Integration installed).html
.js
/.ts
(as endpoints)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.
A single file can also generate multiple pages using dynamic routing. This allows you to create pages even if your content lives outside of the special /pages/
directory, such as in a content collection or a CMS.
📚 Read more about Routing in Astro.
Write standard HTML <a>
elements in your Astro pages to link to other pages on your site.
Astro pages use the .astro
file extension and support the same features as Astro components.
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.
📚 Read more about layout components in Astro.
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.
Collections of Markdown or MDX page content in src/content/
can be used to generate pages dynamically.
Page layouts are especially useful for Markdown files. Markdown files can use the special layout
frontmatter property to specify a layout component that will wrap their Markdown content in a full <html>...</html>
page document.
📚 Read more about Markdown in Astro.
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.
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.
© 2021 Fred K. Schott
Licensed under the MIT License.
https://docs.astro.build/en/core-concepts/astro-pages/