Creating pages in Astro - Practice Exercises

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the rendered output of this Astro page component?

Consider this Astro page component code:

---
const title = "Welcome to Astro!";
---

  
    
  
  
    
{title}
  

What will the browser display inside the <h1> tag?

Astro

---
const title = "Welcome to Astro!";
---
<html lang="en">
  <head>
    <title>{title}</title>
  </head>
  <body>
    <h1>{title}</h1>
  </body>
</html>

A {title}

B Welcome to Astro!

C undefined

D Error: title is not defined

💡 Hint

Remember Astro uses frontmatter variables inside curly braces to insert values.

The variable title is defined in the frontmatter and inserted correctly inside the <h1> tag, so the output is the string value.

📝 Syntax

intermediate

Which option correctly creates a new page at /about in Astro?

You want to create a new page accessible at /about. Which file and content is correct?

A Create <code>src/pages/about/index.html</code> with plain HTML only.

B Create <code>src/components/about.astro</code> with frontmatter and HTML content.

C Create <code>src/pages/about.js</code> exporting a React component.

D Create <code>src/pages/about.astro</code> with frontmatter and HTML content.

💡 Hint

Astro uses the src/pages folder for routing pages.

Astro automatically routes files inside src/pages. The file about.astro creates the /about page.

❓ state_output

advanced

What is the output of this Astro page with a reactive counter?

Given this Astro page code:

---
let count = 0;
function increment() {
  count += 1;
}
---

  
    
Count: {count}
    
  

What happens when you click the button?

Astro

---
let count = 0;
function increment() {
  count += 1;
}
---
<html lang="en">
  <body>
    <p>Count: {count}</p>
    <button on:click={increment}>Add</button>
  </body>
</html>

A The count variable increases but the page does not update.

B Clicking the button causes a runtime error.

C The count number updates on the page each click.

D The button does nothing because on:click is invalid in Astro.

💡 Hint

Astro pages are static by default and do not update state on the client without client directives.

Astro renders static HTML by default. The count variable changes in code but the page does not re-render on click without client hydration.

🔧 Debug

advanced

Why does this Astro page fail to build?

Look at this Astro page code:

---
const message = "Hello";
---

  
    
{message}
  

What is the cause of the build failure?

Astro

---
const message = "Hello";
---
<html lang="en">
  <body>
    <h1>{message}</h1>
  </body>
</html>

A Mismatched HTML tags: opening <h1> but closing </h2>.

B Variable 'message' is not defined in frontmatter.

C Astro does not allow expressions inside HTML tags.

D Missing lang attribute on <html> tag.

💡 Hint

Check the HTML tags carefully for matching pairs.

The opening tag is <h1> but the closing tag is </h2>. This mismatch causes a build error.

🧠 Conceptual

expert

How does Astro handle routing for nested folders in src/pages?

Given this folder structure:

src/pages/
  blog/
    index.astro
    [slug].astro
  about.astro

Which statement best describes the URLs generated by Astro?

A <code>/about</code> serves <code>about.astro</code>, but nested folders are ignored by Astro routing.

B <code>/blog/index</code> serves <code>blog/index.astro</code>, and <code>/blog/[slug]</code> serves <code>blog/[slug].astro</code> literally.

C <code>/blog</code> serves <code>blog/index.astro</code>, and <code>/blog/:slug</code> serves <code>blog/[slug].astro</code> dynamically.

D Astro requires manual route configuration for nested folders to work.

💡 Hint

Astro uses file and folder names to create routes automatically, including dynamic segments.

Astro maps index.astro in a folder to the folder path, and [slug].astro creates a dynamic route segment.

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