Gatsby
Up and Running with Gatsby: Markdown & MDX
  •  

Adding MDX

PRO

Let's add MDX to our project!

Now that you know about the benefits of Markdown and MDX, let's set it up in our Gatsby project.

First, install MDX and the corresponding Gatsby plugin:

npm install gatsby-plugin-mdx @mdx-js/mdx @mdx-js/react

Since we've added a plugin, we'll need to add it to our plugins array in gatsby-config.js:

plugins:  [
 `gatsby-plugin-mdx`,
 `gatsby-plugin-styled-components`
]

Out of the box, we can just add a page to our /pages folder with the extension .mdx and it will just magically work. If we add thingstodo.mdx with some Markdown and run gatsby develop, we can navigate to /thingstodo and see the result.

This is pretty neat, but it'd be better if we could use a custom layout with these pages. Let's do that in the next video.