Now that we’ve “sourced” the markdown files from the filesystem, we can now “transform” the markdown to HTML and the YAML frontmatter to JSON.

Transforming markdown — gatsby-transformer-remark

We’ll use the plugin gatsby-transformer-remark to recognise files which are markdown and read its content. It will convert the frontmatter metadata part of your markdown file as frontmatter and the content part as HTML.

npm i --save gatsby-transformer-remark

Add this to gatsby-config.js after the previously added gatsby-source-filesystem.

Note on creating markdown files.

When you create a Markdown file, at the top of the file, add the block below. You can have different key value pairs that are relevant to your website. This block will be parsed by gatsby-transformer-remark as frontmatter. The GraphQL API will provide this data in our React components.

A GraphQL query is made in the second half of the file to get the Markdown data. Gatsby has automagically given you all the Markdown metadata and HTML in this query’s result.
Note: To learn more about GraphQL, consider this excellent resource

The result of the query is injected by Gatsby into the Template component as data. markdownRemark is the property that we find has all the details of the Markdown file. We can use that to construct a template for our blogpost view. Since it’s a React component, you could style it with any of the recommended styling systems in Gatsby.

Create static pages using Gatsby’s Node API.

Gatsby exposes a powerful Node.js API, which allows for functionality such as creating dynamic pages. This API is available in the gatsby-node.js file in the root directory of your project, at the same level as gatsby-config.js. Each export found in this file will be run by Gatsby, as detailed in its Node API specification. However, we only care about one particular API in this instance, createPages.

Gatsby calls the createPages API (if present) at build time with injected parameters, boundActionCreators and graphql. Use the graphql to query Markdown file data as below. Next use createPage action creator to create a page for each of the Markdown files using the blogTemplate.js we created in the previous step.