Creating pages in Astro

Introduction

Creating pages lets you build different screens or views for your website. Each page shows unique content to visitors.

You want a homepage and an about page for your website.

You need separate pages for blog posts or articles.

You want a contact page with a form.

You want to organize your site with multiple sections like products and services.

Syntax

Astro

Create a new file inside the src/pages folder with a .astro extension.

Example: src/pages/about.astro

Inside the file, write HTML and Astro components to build the page content.

Each file in src/pages automatically becomes a route (URL) on your site.

The file name determines the page URL. For example, about.astro becomes /about.

Examples

A simple homepage created as src/pages/index.astro. This page shows at the root URL /.

Astro

---
// No frontmatter needed for simple pages
---
<html>
  <head><title>Home</title></head>
  <body>
    <h1>Welcome to my site</h1>
  </body>
</html>

An about page using frontmatter to add dynamic content.

Astro

---
const name = 'Astro User';
---
<html>
  <head><title>About</title></head>
  <body>
    <h1>About {name}</h1>
    <p>This is the about page.</p>
  </body>
</html>

A contact page using a layout component for consistent design.

Astro

---
import Layout from '../layouts/BaseLayout.astro';
---
<Layout>
  <h1>Contact Us</h1>
  <form>
    <label for="email">Email:</label>
    <input id="email" type="email" />
    <button type="submit">Send</button>
  </form>
</Layout>

Sample Program

This is a complete Astro page component. It sets a page title and shows a header, main content, and footer. Save this as src/pages/index.astro to create the homepage.

Astro

---
const title = 'My First Astro Page';
---
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>{title}</title>
  </head>
  <body>
    <header>
      <h1>{title}</h1>
    </header>
    <main>
      <p>Welcome to your new Astro page.</p>
    </main>
    <footer>
      <small>© 2024 Astro Site</small>
    </footer>
  </body>
</html>

Important Notes

Page files must be inside the src/pages folder to become routes.

Use index.astro for the homepage at /.

File names with brackets like [slug].astro create dynamic routes.

Summary

Creating pages means making files in src/pages with .astro extension.

Each page file becomes a URL on your website automatically.

You can add HTML, components, and frontmatter to build your page content.

Practice

1. What happens when you create a new .astro file inside the src/pages folder in an Astro project?

easy

A. You must register the page in a routing file for it to work.

B. The file is ignored unless you import it manually in another file.

C. A new webpage is automatically created with a URL matching the file name.

D. It creates a new component but not a page.

Solution

1. Step 1: Understand Astro's file-based routing

   Astro automatically creates routes from files in src/pages. Each .astro file becomes a page.

2. Step 2: Connect file name to URL

   The file name directly maps to the URL path, so creating a file adds a new page accessible by that URL.

3. Final Answer:

   A new webpage is automatically created with a URL matching the file name. -> Option C

4. Quick Check:

   File in src/pages = new page URL [OK]

Hint: Remember: pages folder files become URLs automatically [OK]

Common Mistakes:

• Thinking you must import page files manually
• Confusing components with pages
• Believing a routing config is needed

2. Which of the following is the correct way to create a homepage in Astro?

easy

A. Create a file named default.astro inside src/pages/home.

B. Create a file named home.astro inside src/pages.

C. Create a file named main.astro inside src/components.

D. Create a file named index.astro inside src/pages.

Solution

1. Step 1: Identify homepage naming convention

   In Astro, the homepage URL is /, which maps to index.astro in src/pages.

2. Step 2: Check folder and file placement

   The file must be directly inside src/pages and named index.astro to serve as homepage.

3. Final Answer:

   Create a file named index.astro inside src/pages. -> Option D

4. Quick Check:

   Homepage = src/pages/index.astro [OK]

Hint: Homepage file is always index.astro in pages folder [OK]

Common Mistakes:

• Naming homepage file anything other than index.astro
• Placing homepage file in components folder
• Using nested folders incorrectly for homepage

3. Given this file src/pages/about.astro with content:

<!-- src/pages/about.astro -->
<h1>About Us</h1>
<p>Welcome to our site.</p>

What URL will display this page when running the Astro dev server?

medium

A. http://localhost:3000/about

B. http://localhost:3000/about.astro

C. http://localhost:3000/about-us

D. http://localhost:3000/pages/about

Solution

1. Step 1: Map file path to URL

   The file about.astro inside src/pages maps to the URL path /about.

2. Step 2: Understand URL structure

   Astro removes the file extension and folder prefix src/pages from the URL, so the URL is /about.

3. Final Answer:

   http://localhost:3000/about -> Option A

4. Quick Check:

   File name = URL path [OK]

Hint: File name without extension = URL path [OK]

Common Mistakes:

• Including .astro extension in URL
• Adding 'pages' folder name to URL
• Guessing URL from page content

4. You created a file src/pages/contact.astro but visiting /contact shows a 404 error. What is the most likely cause?

medium

A. You forgot to restart the Astro dev server after adding the file.

B. The file is placed inside src/components instead of src/pages.

C. The file has a syntax error preventing Astro from loading it.

D. Astro requires a routing config to recognize new pages.

Solution

1. Step 1: Verify file placement

   The most likely cause is that the file is actually inside src/components instead of src/pages. Components folder files do not create routes.

2. Step 2: Syntax errors cause error pages, not 404

   Syntax errors show an error screen when visiting the route, not a 404 Page Not Found.

3. Step 3: Dev server auto-reloads

   Astro detects new pages automatically, restart rarely needed.

4. Final Answer:

   The file is placed inside src/components instead of src/pages. -> Option B

5. Quick Check:

   404 on new page = check pages vs components folder [OK]

Hint: New page 404s? Double-check src/pages vs components folder [OK]

Common Mistakes:

• Assuming routing config is needed
• Not checking file syntax
• Misplacing file in components folder

5. You want to create a nested page at URL /blog/post1. Which file structure and naming is correct in Astro?

hard

A. Create src/pages/blog/post1.astro file.

B. Create src/pages/blog-post1.astro file.

C. Create src/pages/blog/post1/index.html file.

D. Create src/pages/blog/post1.astro and add a routing config.

Solution

1. Step 1: Understand nested routing in Astro

   Folders inside src/pages create nested URL paths automatically.

2. Step 2: Map file to nested URL

   Placing post1.astro inside src/pages/blog creates URL /blog/post1.

3. Step 3: Check alternatives

   Create src/pages/blog-post1.astro file creates flat URL /blog-post1. Create src/pages/blog/post1/index.html file creates no route (.html not supported as pages). Create src/pages/blog/post1.astro and add a routing config is incorrect because Astro does not require routing config.

4. Final Answer:

   Create src/pages/blog/post1.astro file. -> Option A

5. Quick Check:

   Nested folder + file = nested URL [OK]

Hint: Nested folders in pages map to nested URLs directly [OK]

Common Mistakes:

• Using hyphens instead of folders for nesting
• Adding unnecessary routing config
• Confusing index.astro usage for nested pages