Getting Started with MDX
The fastest way to get started with Gatsby + MDX is to use the MDX
starter. This
allows you to write .mdx
files in src/pages
in order to create new pages on
your site.
🚀 Quick start
Use npm init gatsby
to create a new site. At the question “Would you like to install additional features with other plugins?” choose the option “Add Markdown and MDX support”.
Add MDX to an existing Gatsby site
If you already have a Gatsby site that you’d like to add MDX to, you can follow these steps for configuring the gatsby-plugin-mdx plugin.
Alternatively, you may be looking to configure an existing blog site to use MDX. This blog post walks you through those steps in detail.
Add
gatsby-plugin-mdx
and MDX as dependenciesUpdate your
gatsby-config.js
to usegatsby-plugin-mdx
Restart
gatsby develop
and add an.mdx
page tosrc/pages
Note: If you want to query for frontmatter, exports, or other fields like
tableOfContents
and you haven’t previously added agatsby-source-filesystem
pointing atsrc/pages
in your project, you’ll want to add one now.
Video hosted on egghead.io.
What’s next?
Go check out the writing MDX guide to find out what else you can do with Gatsby and MDX.