Skip to content

Astro Pages — Creating Routes and Content

DodaTech Updated 2026-06-28 3 min read

Learn how to create Astro pages using .astro and .md files, add frontmatter, include components, and manage SEO meta tags for every route.

In this lesson, you'll create pages with .astro and .md files, add frontmatter for metadata, include components, and set SEO-friendly head elements. Astro treats every file in src/pages/ as a route automatically.

What You'll Learn

How to write Astro pages with frontmatter, embed components, add meta tags for SEO, and create both server-rendered and static pages.

Why It Matters

Pages are the building blocks of your site. Knowing how to create them efficiently with SEO metadata ensures search engines index your content correctly.

Real-World Use

DodaTech's tutorial site generates thousands of pages using Astro's page system, each with custom meta descriptions for search visibility.

flowchart LR
    A[Create .astro file] --> B[Add Frontmatter]
    B --> C[Write Template HTML]
    C --> D[Include Components]
    D --> E[Page Renders at Route]
    style D fill:#ff5a03,color:#fff

Creating Pages

Basic .astro Page

Create src/pages/hello.astro:

---
const title = "Hello World";
---
<html>
  <head>
    <title>{title}</title>
    <meta name="description" content="A simple hello world page built with Astro.">
  </head>
  <body>
    <h1>{title}</h1>
    <p>This page renders at /hello.</p>
  </body>
</html>

Output: Visiting /hello shows the HTML page with the dynamic title rendered server-side. Zero JavaScript is sent to the browser.

Markdown Page

Create src/pages/about.md:

---
title: About Us
description: "Learn about DodaTech and our mission to teach programming with security."
---

## About DodaTech

We teach programming through practical, security-focused tutorials.

Output: The Markdown page renders as HTML at /about. Frontmatter fields are available for layout components.

Page with Frontmatter and Layout

---
import BaseLayout from "../layouts/BaseLayout.astro";

const pageTitle = "Services";
const description = "Our web development and security consulting services.";
---
<BaseLayout title={pageTitle}>
  <main>
    <h1>{pageTitle}</h1>
    <p>{description}</p>
  </main>
</BaseLayout>

Output: The page uses the BaseLayout wrapper, injecting content through the <slot /> element. The <title> is set dynamically.

SEO Meta Tags

Astro encourages setting meta tags directly in the <head>:

---
const title = "Pricing";
---
<html>
  <head>
    <title>{title} | DodaTech</title>
    <meta name="description" content="View our pricing plans for web development and security training.">
    <meta property="og:title" content={title}>
    <meta property="og:type" content="website">
    <link rel="canonical" href="https://dodatech.com/pricing/">
  </head>
  <body>...</body>
</html>

Common Mistakes

  1. Missing <html>, <head>, and <body> tags: Astro requires these for valid HTML output. The build may still work, but browsers interpret them strictly.
  2. Using .astro files without the frontmatter fence: The --- block is required for server-side logic. Omitting it treats all content as template HTML.
  3. Forgetting the site config for canonical URLs: Canonical URLs use the site value from astro.config.mjs. Without it, links may be relative.
  4. Mixing page types incorrectly: .md files in src/pages/ become simple content pages. Use .astro when you need components or dynamic logic.
  5. Not using layouts for repeated structure: Writing full HTML in every page duplicates code and makes updates harder.

Practice Questions

  1. What determines the URL of an Astro page? Answer: The file path inside src/pages/. src/pages/contact.astro becomes /contact.

  2. How do you pass data from frontmatter to a layout? Answer: Set variables in the frontmatter script and pass them as props to the layout component.

  3. Can a .md file use components? Answer: No. Markdown pages in src/pages/ render as-is. Use .mdx for Markdown with components.

  4. What is the purpose of the --- fence? Answer: It separates the server-side script from the HTML template. Code inside runs at build time.

Challenge

Create a three-page site: index.astro, about.md, and contact.astro. Each page should share a layout with a <nav> and <footer>.

Mini Project

Build an "Our Team" page that reads an array of team members from frontmatter and renders a card for each one using a layout component.

FAQ

Can a page have no frontmatter?

: Yes. An empty --- block is valid. You lose the ability to run server logic but the page still renders.

What is the difference between `.astro` and `.md` pages?

: .astro files support components and server logic. .md files render Markdown directly as HTML.

How do I set a custom 404 page?

: Create src/pages/404.astro or src/pages/404.md. Astro serves it for unknown routes.

Can I use `.html` files in `src/pages/`?

: No. Astro only processes .astro, .md, and .mdx files as pages.

What's Next

Learn how Astro Layouts provide consistent structure across multiple pages.

← Previous Astro Project Structure — Complete Guide Next → Astro Layouts — Reusable Page Structure

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse Astro