Gatsby
Up and Running with Gatsby: Markdown & MDX
  •  

Adding MDX

PRO

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.