Change MDX Page URL TO Slugs In Gatsby
The `gatsby-plugin-mdx` creates URLs based off the directory structure of files. This is how to setup Gatsby with an `mdx-pages` directory that lets you put `slug` keys in the frontmatter to control the URL.
### Modules
Code
### src/layouts/blog-post-v1.js
Code
;
;
;
;
const
const = post.;
const = post;
return
<div>
<h1></h1>
<MDXRenderer>{body}</MDXRenderer>
</div>
);
};
export default Post;
### src/mdx-pages/example-dir/hello-world.mdx
Code
title: Hey, MDX
date: February 15, 2021
slug: /hello-world-example-of-code
This is the `hello-world.mdx` file.
### gatsby-config.js
Code
module.exports =
:
: `gatsby-source-filesystem`,
:
: `mdx`,
: `/src/mdx-pages/`,
},
},
`gatsby-plugin-mdx`,
],
}
### gatsby-node.js
Code
const = actions
const blogPostV1Layout = require.
const result = await
result....
}