Alt Text

Welcome to part-5 of the series. In this part we will start with the adding gatsby-plugin-mdx in our project. It will help to show mdx blogs in our project. MDX files are updated form of markdown files, where you can use react JSX also.

So, as per the documentation we will install the plugin by below command. So, stop you gatsby develop and run below command.

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

After that let’s add the basic configuration in gatsby-config.js file and then don’t forget to start gatsby by running gatsby develop

gatsby-config.jsgatsby-config.js

Next, i am adding my first three posts which i wrote nearly 2 years back as mdx files in the posts folder. Also, i had added images for all three in the images folder.

postsposts

We will be using Frontmatter a lot in this project. Infact it will be used to go all the heavy lifting in the project. So, let’s add the initial frontmatter in all three mdx post. I will also be updating to add tags and canonical links to each post later on in the series.

Frontmatter doesn’t shows on the post, but are used to generate page, use information and sort pages.

FrontmatterFrontmatter

Similarly i have added to other two posts also as below.

youtube-2.mdxyoutube-2.mdx

youtube-3.mdxyoutube-3.mdx

We now have to install a plugin that will help to add our local files to the GraphQL data layer, so that we can use the posts.

So, npm install the source system plugin, but first stop your gatsby develop in the terminal.

source-filesystemsource-filesystem

Next, we need to add this in the gatsby-config.js file.

gatsby-config.jsgatsby-config.js

We will also install the gatsby-image plugin for image optimization. But we need to install two more additional plugins first for that.

    npm install --save gatsby-transformer-sharp gatsby-plugin-sharp

Also, need to add them in the gatsby-config.js file.

gatsby-config.jsgatsby-config.js

Let’s finally install the gatsby-image plugin.

    npm install --save gatsby-image

After this restart the development server by gatsby develop.

This completes part-5 of the series.

You can find the code for the same in this github repo.

This post is also available on DEV.