blog.scottspence.me icon indicating copy to clipboard operation
blog.scottspence.me copied to clipboard

https://blog.scottspence.me/convert-gatsby-default-blog-to-use-mdx

Open utterances-bot opened this issue 6 years ago • 7 comments

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

utterances-bot avatar May 11 '19 04:05 utterances-bot

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.

eclectic-coding avatar May 11 '19 04:05 eclectic-coding

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:

spences10 avatar Jun 04 '19 06:06 spences10

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?

yansusanto avatar Aug 29 '19 12:08 yansusanto

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 👍

spences10 avatar Aug 29 '19 14:08 spences10

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.

yansusanto avatar Aug 29 '19 15:08 yansusanto

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'

spences10 avatar Aug 30 '19 06:08 spences10

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.

yansusanto avatar Aug 30 '19 16:08 yansusanto