Introduction to Gatsby Building a Blog with MDX
This course has been updated! We now recommend you take the Introduction to Gatsby, v2 course.
Transcript from the "Building a Blog with MDX" Lesson
>> Jason Lengstorf: Let's build a blog using MDX. We're gonna start by just writing a couple blog posts. So let me create a new folder down here. Let's see, we want that folder to be called posts, and this is not in the source directory. To be clear, it doesn't actually matter where you put your posts.
[00:00:22] You can put them in the source directory. You can put them in a folder called content. They just have to be somewhere that you can get at them, that's the big thing. Inside of here, I'm gonna set up my posts to be a folder and then that folder is gonna contain a file.
[00:00:40] And I'm doing that for a very specific reason, which we'll look at a little bit later. But ultimately this is up to you. To keep them in order, I do kinda numbering. So I'm gonna do hello world, and then inside I want a helloworld.mdx. And in this file we're gonna introduce something new.
[00:00:59] In markdown, we have a concept called front matter. So I can create a little fence up here, and inside of it I can add stuff that's not gonna show up on the page. So I wanna add a title, and my title is gonna be Hello World. And let's add a slug.
[00:01:16] This is the URL that the page is gonna have. So, we'll do kinda the kebab case, hello world with a hyphen, all lowercase, and then I'm going to add an author name, and that is who I am. So, then we'll just do a really simple one, this is my first blog post, I wrote it with MDX.
>> Jason Lengstorf: So that's gonna be our post to start. And once we have that, we also wanna add a second post. So let's just, I'm just gonna copy this so we don't have to type it twice. I'm gonna create a new file, we'll call this 0 1. And let's call it another post, anotherpost.mdx, okay?
[00:02:10] And inside here, I'm gonna modify the slug. We want a different title, keep the author. And then let's just change this out to say this is my next blog post. And I'm on a roll. Two blog posts in five minutes, I'm killing it. Okay, so, how do we get these into Gatsby?
[00:02:40] We're gonna use another plugin and we're gonna get them into the data layer so that we can access them. So to do that we're going to install, let's stop the server, control+C. And then I'm going to run npm install, gatsby source file system. Let me make sure I don't need any others.
[00:03:03] Nope, gatsby source file system. And Gatsby source file system is a way to use local files as part of the GraphQL data layer. And that is going to get installed. And while we're waiting for that to install, I'm gonna pop open the Gatsby config.
>> Jason Lengstorf: And inside of it I'm gonna create another config object.
[00:03:30] We're gonna resolve gatsby-source-filesystem, and we need options. And so the options, the only one that's required is the path but I'm gonna give it a name as well just in case we wanted to search for it. So I'm gonna give it a name of posts. And if you remember, the folder is called posts.
[00:03:53] So I'm going to also give it a path of posts, and it's just going to look for that folder of posts. And it's gonna load anything it finds in there as part a of the data layer. And because we have Gatsby MDX installed, it's going to look for MDX files and transform those into GraphQL nodes, which is all very exciting.