blog.scottspence.me
blog.scottspence.me copied to clipboard
https://blog.scottspence.me/convert-gatsby-default-blog-to-use-mdx
Convert the Gatsby default starter blog to use MDX | blog.scottspence.me
In this guide we're going to cover converting the Gatsby default blog starter to use MDX. All the cool kids are using Gatsby and MDX in their blogs these days. If you already have a blog that uses Gatsby but want to move onto the new hotness then…
https://blog.scottspence.me/convert-gatsby-default-blog-to-use-mdx
Scott, I love your blog, and I have learned so much by your articles. However, there are a few screenshots in this article which are reversed. If you look at the screenshots for the files index.js and gatsby-config.sys the left side of each of these screenshots note deleting the mdx code and on the right insert the original markdown code. Again, I love your articles, and as a new React/Gatsby learner I appreciate your work.
Hey @polishedwp thanks so much for the feedback.
Yes! Thanks for pointing that out :sweat_smile: I haven't noticed and I'm now wondering how I managed to do that as it was via a git diff :upside_down_face:
So, apologies first if it was confusing! That is the last thing I want to do here, I've opened an issue here thanks again for the feedback :pray:
Thanks for the tutorial, Scott. I wasn't sure how it should be done till I found your guide. One question though, as gatsby-mdx was deprecated already, does it work the same withgatsby-plugin-mdx?
Hey @yansusanto, yes it's now gatsby-plugin-mdx I'm in the process of doing a whole blog series using MDX if you're interested 👍
Great! I look forward to your new series on how to do so using gatsby-plugin-mdx; apparently some syntax have changed with the new plugin.
Yeah, the MDXRenderer is a name import now, so it's:
import { MDXRenderer } from 'gatsby-plugin-mdx'
Instead of:
import MDXRenderer from 'gatsby-plugin-mdx/mdx-renderer'
Thanks, @spences10. Managed to get it working on second attempt. It's harder than I thought. For now, it is working on my blog posts.
Just couldn't get the <Layout></Layout> working on my pages though. Still trying but to no avail. For now, it works without styling for .mdx pages on my page directory.