Docs Kickstarter

Create a Page

Learn how to create new pages in your Astro site. Pages can be created using either .astro or .mdx files.

Creating a Basic Page

To create a new page, add a new file to the src/pages directory:

src/pages/
├── index.astro    # -> mysite.com/
├── about.astro    # -> mysite.com/about
└── contact.mdx    # -> mysite.com/contact

Using Astro Pages

Create a new .astro file in the src/pages directory:

---
// src/pages/about.astro
import BaseLayout from "@/layouts/BaseLayout.astro";
---

<BaseLayout title="About Us" description="Learn more about our team">
  <div class="container py-8">
    <h1 class="text-4xl font-bold">About Us</h1>
    <p class="mt-4">Welcome to our site!</p>
  </div>
</BaseLayout>

Using MDX Pages

Create a new .mdx file in the src/pages directory:

---
title: "Contact Us"
description: "Get in touch with our team"
slug: "create-page"
layout: "@/layouts/BaseLayout.astro"
---


Feel free to reach out to us through any of these channels:

- Email: hello@example.com
- Twitter: @example
- GitHub: github.com/example

Page Organization

You can organize your pages in subdirectories:

src/pages/
├── index.astro
├── about/
│   ├── index.astro     # -> mysite.com/about
│   ├── team.astro      # -> mysite.com/about/team
│   └── mission.mdx     # -> mysite.com/about/mission
└── contact.mdx

Dynamic Routes

You can create dynamic routes using square brackets:

src/pages/
└── posts/
    └── [slug].astro    # -> mysite.com/posts/any-slug

Example of a dynamic route:

---
// src/pages/posts/[slug].astro
export async function getStaticPaths() {
  const posts = await getAllPosts();
  return posts.map(post => ({
    params: { slug: post.slug },
    props: { post },
  }));
}

const { post } = Astro.props;
---

<BaseLayout title={post.title}>
  <article>
    <h1>{post.title}</h1>
    <div set:html={post.content} />
  </article>
</BaseLayout>

Using Components

You can use components in your pages:

---
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
---

<Card>
  <h2>Welcome</h2>
  <p>This is a card component</p>
  <Button>Click me</Button>
</Card>

Styling Pages

Add styles to your pages using Tailwind CSS:

<div class="prose dark:prose-invert max-w-none">
  <h1>Page Title</h1>
  <p class="lead">Introduction paragraph</p>
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
    <!-- Grid content -->
  </div>
</div>

Best Practices

  1. File Organization

    • Keep related pages in subdirectories
    • Use clear, descriptive filenames
    • Consider URL structure when organizing files

  2. Metadata

    • Always include title and description
    • Use consistent frontmatter structure
    • Consider SEO best practices

  3. Layouts

    • Use appropriate layouts for different types of pages
    • Keep layout components reusable
    • Consider page-specific layout needs

  4. Performance

    • Optimize images
    • Use dynamic imports when needed
    • Consider code splitting for large pages

  5. Accessibility

    • Use semantic HTML
    • Add proper ARIA labels
    • Ensure keyboard navigation
    • Test with screen readers

  6. Responsive Design

    • Test on multiple screen sizes
    • Use responsive utilities
    • Consider mobile-first approach