How to create page in astro

AstroHow-ToBeginner · 3 min read

How to Create a Page in Astro: Simple Steps for Beginners

To create a page in Astro, add a new .astro file inside the src/pages folder. The file name determines the page URL, and you write HTML and components inside it to build the page content.

📐

Syntax

In Astro, pages are created by adding .astro files inside the src/pages directory. The file name maps directly to the URL path. For example, src/pages/about.astro creates the /about page.

Each page file contains HTML and Astro components. You can also use frontmatter (JavaScript inside ---) at the top for logic or imports.

astro

---
// Frontmatter: import components or write JS here
---
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <h1>Hello from Astro page!</h1>
  </body>
</html>

💻

Example

This example creates a simple home page at / by adding src/pages/index.astro. It shows a heading and a paragraph.

astro

---
// src/pages/index.astro
---
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Home Page</title>
  </head>
  <body>
    <h1>Welcome to Astro!</h1>
    <p>This is your first Astro page.</p>
  </body>
</html>

Output

<h1>Welcome to Astro!</h1> <p>This is your first Astro page.</p>

⚠️

Common Pitfalls

1. Wrong folder: Placing page files outside src/pages means Astro won't create routes for them.

2. Missing file extension: Page files must end with .astro to be recognized.

3. Using unsupported syntax: Astro pages use HTML and frontmatter; avoid React or Vue syntax directly.

astro

---
// Wrong: file outside pages folder
---
<html><body>Not a page</body></html>

---
// Right: inside src/pages
---
<html><body>This is a page</body></html>

📊

Quick Reference

src/pages/index.astro → Home page at /
src/pages/about.astro → About page at /about
Use frontmatter --- for JS imports or variables
Write HTML inside the file for page content

✅

Key Takeaways

Create pages by adding .astro files inside src/pages folder.

File names map directly to URL paths in your site.

Use frontmatter (---) for JavaScript logic or imports at the top of the file.

Write standard HTML inside the .astro file for page content.

Ensure files have .astro extension and are inside src/pages to be recognized as pages.