Writing pages in MDX

After installing the plugin, MDX files written in src/pages will turn into pages. This happens because gatsby-mdx looks for MDX files and automatically transpiles them so that Gatsby internals can render them.

Pages are rendered at a URL that is constructed from the filesystem path inside src/pages. An MDX file at src/pages/awesome.mdx will result in a page being rendered at mysite.com/awesome.

GraphQL Queries

You can fetch data to use in your MDX file by exporting a pageQuery in the same way you would for a .js page. The queried data is passed as a prop, and can be accessed inside any JSX block when writing in MDX:

import { graphql } from 'gatsby';

# My Awesome Page

Here's a paragraph, followed by a paragraph with data!


export const pageQuery = graphql`
  site {
    siteMetadata {
edit this page on GitHub