<commit_before>---
title: Writing Pages in MDX
---

After [installing](/docs/mdx/getting-started) 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`.

By default, gatsby-mdx supports frontmatter so you can define things
like titles and paths to use in your GraphQL queries.

## Frontmatter

You can declare frontmatter at the beginning of your MDX document:

```md
---
title: Hello, world!
path: /hello-world
date: 2019-01-29
---

# Hello, world!
```

Which can then be [queried with GraphQL](/docs/querying-with-graphql/:

**Note:** To query `Mdx` content, it must be included in the node system using a
source like `gatsby-source-filesystem` first.

```graphql
query {
  allMdx {
    edges {
      node {<commit_msg>fix(docs): add missing closing tag for mdx link (#14545)<commit_after>---
title: Writing Pages in MDX
---

After [installing](/docs/mdx/getting-started) 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`.

By default, gatsby-mdx supports frontmatter so you can define things
like titles and paths to use in your GraphQL queries.

## Frontmatter

You can declare frontmatter at the beginning of your MDX document:

```md
---
title: Hello, world!
path: /hello-world
date: 2019-01-29
---

# Hello, world!
```

Which can then be [queried with GraphQL](/docs/querying-with-graphql/):

**Note:** To query `Mdx` content, it must be included in the node system using a
source like `gatsby-source-filesystem` first.

```graphql
query {
  allMdx {
    edges {
      node {
{'fraction_non_alphanumeric': 0.09583333333333334, 'fraction_numerical': 0.009722222222222222, 'mean_word_length': 3.967816091954023, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4986494', 'n_tokens_mistral': 697, 'n_tokens_neox': 660, 'n_words': 288}