Gatsby + Markdown: How to get data from a specific markdown file into a single page?

You have a markdown file called hero-texts.md and you want to be able to query its frontmatter content.

Install the plugins gatsby-transformer-remark and gatsby-source-filesystem and setup the gatsby-source-filesystem options to find your markdown files.

// gatsby-config.js

module.exports = {
    plugins: [
        {
        resolve: `gatsby-source-filesystem`,
            options: {
              name: `markdown`,
              path: `${__dirname}/src/markdowns/`
            }
        },
        `gatsby-transformer-remark`
    ]
}

You could make a graphql page query like this inside index.js (then the result of the query is automatically added to your index component under props.data)

// src/pages/index.js

import React from "react"
import { graphql } from "gatsby"

const IndexPage = ({data}) => {
  return (
  <>
    <p>{data.markdownRemark.frontmatter.author}</p>
    <p>{data.markdownRemark.frontmatter.date}</p>
    <p>{data.markdownRemark.frontmatter.title}</p>
  </>
)}

export default IndexPage

export const pageQuery = graphql`
  query IndexPageQuery {
    markdownRemark(fileAbsolutePath: { regex: "/hero-texts.md/" }) {
      frontmatter {
        author
        date
        title
      }
    }
  }
`

It will perform the graphql query at build time, and add the result of the query to the data prop of the IndexPage page component.

So in effect, pulling in all the frontmatter fields from a markdown file that looked like this.

// src/markdowns/hero-texts.md

---
title: "Gatsby + Markdown: How to simply get data from a specific markdown in a single page?"
author: Florent Despinoy
date: 2019-08-06
---

# This is my markdown post

The content of this markdown file would not be queried by pageQuery (only the frontmatter would)