Create Your First Documentation Page

Navigate to the src/content/docs/ directory and create a new file called my-first-page.mdx:

touch src/content/docs/my-first-page.mdx

echo. > src\content\docs\my-first-page.mdx

Or simply create the file using your code editor.

Every documentation page needs frontmatter at the top. Add the following to your new file:

---
title: My First Page
description: This is my first documentation page
order: 10
category: Getting Started
---

The frontmatter fields are:

• title: The page title (required)
• description: A brief description shown in listings
• order: Controls the sort order within a category
• category: Groups related pages together

Below the frontmatter, add your Markdown content:

## Introduction

Welcome to my first documentation page! This is a great place to
explain what this section of documentation covers.

## Getting Started

Here's how to get started with this feature:

1. First, do this
2. Then, do that
3. Finally, you're done!

## Code Example

Here's a code example:

\`\`\`javascript
function greet(name) {
  console.log(\`Hello, \${name}!\`);
}

greet('World');
\`\`\`

Make your documentation more interactive by importing components. Add these imports after the frontmatter:

import Callout from '@/components/Callout.astro';

<Callout type="tip">
  This is a helpful tip for your readers!
</Callout>

You can use any of the built-in components:

• Callout - For notes, tips, and warnings
• Tabs - For tabbed content and code examples
• Steps and Step - For sequential instructions
• Collapsible - For expandable sections

If your development server is running, navigate to:

http://localhost:4321/docs/my-first-page

You should see your new documentation page! If the server isn’t running, start it with:

npm run dev