Creating pages in Astro - Try It Yourself

Creating Pages in Astro

📖 Scenario: You are building a simple website using Astro. You want to create multiple pages that visitors can navigate to.

🎯 Goal: Build two pages in Astro: a homepage and an about page. Each page should have a heading and some text.

📋 What You'll Learn

Create a homepage file named index.astro with a heading and paragraph

Create an about page file named about.astro with a heading and paragraph

Use semantic HTML tags like <main> and <h1>

Ensure each page exports a default component

Use Astro's file-based routing by placing pages in the src/pages folder

💡 Why This Matters

🌍 Real World

Creating pages is the foundation of building websites with Astro. Each page corresponds to a URL visitors can open.

💼 Career

Web developers use Astro to build fast, modern websites. Knowing how to create pages and navigation is essential for any Astro project.

1

Create the homepage file

Create a file named index.astro inside src/pages. Inside it, write a default exported component that returns a <main> element containing an <h1> with the text Welcome to Astro and a <p> with the text This is the homepage..

Astro

---
// Your code here
---

  Welcome to Astro
  This is the homepage.

Hint

Remember to export a default function that returns your HTML structure inside index.astro.

2

Create the about page file

Create a file named about.astro inside src/pages. Inside it, write a default exported component that returns a <main> element containing an <h1> with the text About Us and a <p> with the text This is the about page..

Astro

---
// Your code here
---

  About Us
  This is the about page.

Hint

Use the same structure as the homepage but change the function name and text for the about page.

3

Add navigation links

In both index.astro and about.astro, add a <nav> element above the <main> with two links: one to / labeled Home and one to /about labeled About. Use <a> tags inside the <nav>.

Astro

---
// Your code here
---

  Home
  About


  ...
  ...

Hint

Wrap the <nav> and <main> inside a fragment <></> to return multiple elements.

4

Add page titles with <title>

In both index.astro and about.astro, add a <head> section with a <title> tag. For index.astro, set the title to Home - Astro Site. For about.astro, set the title to About - Astro Site.

Astro

---
// Your code here
---

  ...


  Home
  About


  ...
  ...

Hint

Place the <head> section at the top inside the fragment before <nav>.

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