Markdown pages

Markdown is a simple text format: # makes a heading, ** makes bold text, an empty line separates paragraphs. Astro understands Markdown with no setup: an .md file in src/pages/ becomes a page right away. This is handy for texts that rarely change, such as an About page.

A first Markdown page

Delete src/pages/about.astro and create src/pages/about.md instead:

---
title: About me
---
 
# About me
 
My name is **Anna**, I write about web development.
 
- I write JavaScript
- I am learning Astro

Open /about and Astro turns the text into HTML: a heading, a paragraph with a bold word and a list. The block between the --- lines at the top is the Markdown file's frontmatter: data about the page in YAML format (key: value).

A layout for Markdown

The page has no header or styles yet. Set a layout in the frontmatter with the layout key:

---
layout: ../layouts/MarkdownLayout.astro
title: About me
---
 
My name is **Anna**, I write about web development.

The layout path is relative to the file itself. Now create that layout, src/layouts/MarkdownLayout.astro:

---
import BaseLayout from './BaseLayout.astro';
 
const { frontmatter } = Astro.props;
---
 
<BaseLayout title={frontmatter.title}>
  <h1>{frontmatter.title}</h1>
  <slot />
</BaseLayout>

Data from the Markdown frontmatter arrives in the layout in the frontmatter prop, and the rendered HTML of the text goes into <slot />. The /about page now has the header, the footer and the tab title "About me | Anna's blog".

What is supported

Astro highlights code blocks itself during the build, with no JavaScript in the browser.

Markdown pages or collections

A page in src/pages/ suits single texts. For many records of the same kind, such as blog posts, content collections are better: they validate the frontmatter and give you a list of all posts. The next lessons cover them.

Common mistake

People write curly braces or components in a Markdown file as in .astro, for example {frontmatter.title}. Plain Markdown does not run expressions, and the page shows the braces as text. For components and expressions inside the text you need the MDX format, the next lesson.