deprecated-packages/gatsby-recipes/recipes/mdx-pages.mdx
MDX is markdown for the component era.
Write markdown with embedded React components. Awesome 🤯
This recipe installs and configures all the necessary NPM packages & Gatsby Plugins to enable auto-creation of MDX pages within src/pages.
This recipe:
Installs NPM Packages.
<NPMPackage name="gatsby-source-filesystem" /> <NPMPackage name="gatsby-plugin-mdx" /> <NPMPackage name="@mdx-js/mdx" /> <NPMPackage name="@mdx-js/react" />
Adds gatsby-source-filesystem to read the MDX files in the src/pages
directory.
<GatsbyPlugin
name="gatsby-source-filesystem"
key="src/pages"
options={{
name: MDXPages,
path: src/pages/,
}}
/>
Adds gatsby-plugin-mdx to convert MDX files to pages.
Adds an example MDX page for you to play with.
<File path="src/pages/test-mdx.mdx" content="https://gist.githubusercontent.com/KyleAMathews/70103d56afb44f1a56f01d68962e8a77/raw/1c6e08d1fc18644d31681d06ed568369d50f6cb4/test-page.mdx" />
Once you've installed this recipe, you can start writing MDX pages on your Gatsby site.
Once this recipe is installed, try editing the test-mdx.mdx file as well as adding your own file.
Read more about MDX at https://mdxjs.com/.