Enea Xharja Logo

🛠️ How to convert an existing Gatsby Markdown blog to use MDX

  • Convert Gatsby blog to use MDX blog posts
  1. https://www.gatsbyjs.org/blog/2019-11-21-how-to-convert-an-existing-gatsby-blog-to-use-mdx/
  2. https://dev.to/vsevaseva/how-to-convert-existing-markdown-blog-to-mdx-1ih1
  • My Pull Requests
  1. https://github.com/eneax/eneax.github.io/commit/9c947ca2ea6f4b63e2876df3270757c1ece10ff7
  2. https://github.com/eneax/eneax.github.io/commit/205a52b216181777c4029e69cef68c5cb54b41a6

MDX is often called the markdown for the component era. It is a file format that lets you write JSX in a Markdown document.

If you are building a React/JSX-based project, where everything is a component, you can use and existing component inside your MDX file.

You can integrate MDX with Next.js, Gatsby, Create React App, React Static, Webpack, Parcel, and Zero. In this case, I'm going to show you how I integrated MDX with my personal Gatsby blog.

Add MDX to your Gatsby Blog

And for those who already have a blog and want to touch the awesomness of mdx, I will cover in details how to convert your markdown blog to mdx, let's go.

Check out files in this repo as an example

Step 1

In order to use MDX with Gatsby, you need to install the official plugin gatsby-plugin-mdx, in addition to @mdx-js/mdx and @mdx-js/react.

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

Step 2

Inside your gatsby-config.js file, replace gatsby-transformer-remark with gatsby-plugin-mdx and plugins with gatsbyRemarkPlugins:

1- resolve: `gatsby-transformer-remark`,
2+ resolve: `gatsby-plugin-mdx`,
1- plugins: [
2+ gatsbyRemarkPlugins: [