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
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.