Creating Your First Page
How a .astro file becomes a route, and the basic anatomy of a page.
阅读需 2 分钟
The fastest way to understand Astro is to build the smallest possible page and look at what each part does.
A minimal page
---
// src/pages/index.astro
---
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>My First Astro Page</title>
</head>
<body>
<h1>Hello, Astro!</h1>
</body>
</html>Save this as src/pages/index.astro and it becomes your site's home page at /. That's the entire mental model of file-based routing in miniature: the file's location under pages/ is its URL.
Notice the page is a complete, ordinary HTML document — <!doctype html>, <html>, <head>, <body>, all written by hand. Astro doesn't inject anything you didn't write; there's no hidden root <div> or client-side router taking over. What the browser receives is, byte for byte, extremely close to what you typed.
The two parts of every .astro file
Every Astro component file has up to two sections:
- The frontmatter — the code fenced by
---at the top, which runs like a small server-side script. - The template — everything below it, which is what actually gets rendered as HTML.
---
// Frontmatter: runs once per request/build, never sent to the browser
const greeting = "Hello, Astro!";
const items = ["Pages", "Components", "Layouts"];
---
<!-- Template: HTML plus JS expressions in curly braces -->
<h1>{greeting}</h1>
<ul>
{items.map((item) => <li>{item}</li>)}
</ul>The frontmatter looks like JavaScript because it is JavaScript (or TypeScript, if the project is configured for it) — you can declare variables, import other components, fetch data, run loops. None of that code, or its dependencies, is sent to the browser. Only its output, baked into the HTML below, makes it to the visitor. This is the single most important thing to understand about Astro components, and the next lesson digs into the template syntax in more detail.
Adding a second page
Because routing is just file placement, adding src/pages/about.astro with the same structure immediately makes /about a working route — no route configuration file, no <Route> component, nothing to register. Delete the file, and the route disappears.
---
// src/pages/about.astro
---
<html lang="en">
<head>
<title>About</title>
</head>
<body>
<h1>About this site</h1>
<p>Built while learning Astro.</p>
</body>
</html>Run npm run dev and visit both URLs — you'll see two independent pages, each shipping only the HTML you wrote, with zero JavaScript on either one.