Astro: Markdown in Astro

You can write content directly in Astro components by writing HTML, but Astro comes with a very powerful Markdown and MDX engine.

MDX is basically Markdown with superpowers. It allows you to import components and show them in the page.

You might not need it most of the time (I don’t), but it’s supported.

To create a markdown page, you can add it directly into src/pages:

Astro will render this:

Of course you want to use a layout, and you can set it in the frontmatter of the markdown page:

layout: ../layouts/Layout.astro

# Contact

You can contact us at...

From within the layout you can access any frontmatter variable by importing the frontmatter from Astro.props:

const { frontmatter} = Astro.props

You usually have the title, the description, maybe a date.

Collections are a handy way to work with lots of markdown files. We’ll see them later.

Lessons in this unit:

0: Introduction
1: Your first Astro site
2: The structure of an Astro site
3: Astro components
4: Adding more pages
5: Dynamic routing
6: ▶︎ Markdown in Astro
7: Images
8: Content collections
9: CSS in Astro
10: JavaScript in Astro
11: Client-side routing and view transitions
12: SSR in Astro
13: API endpoints in Astro
Are you intimidated by Git? Can’t figure out merge vs rebase? Are you afraid of screwing up something any time you have to do something in Git? Do you rely on ChatGPT or random people’s answer on StackOverflow to fix your problems? Your coworkers are tired of explaining Git to you all the time? Git is something we all need to use, but few of us really master it. I created this course to improve your Git (and GitHub) knowledge at a radical level. Launching May 21, 2024. Join the waiting list!