<commit_before>---
title: Programmatically Creating Pages
---

Sometimes you want to be able to programmatically access data from
files in `src/pages/` or create pages using MDX content that lives at
arbitrary locations outside of `src/pages/` or in remote CMSes.

For instance, let's say you have a Gatsby website, and you want to add
support for MDX so you can start your blog. The posts will live in
`content/posts/`. You can do this with the help of
`gatsby-source-filesystem` and [`createPages`](/docs/reference/config-files/gatsby-node/#createPages) in
`gatsby-node.js`.

## Source MDX pages from the filesystem

To let Gatsby know that you'll be working with MDX content you need to
add `gatsby-plugin-mdx` to the plugins array in your `gatsby-config.js`
file.

You'll need to use `gatsby-source-filesystem` and tell it to source
"posts" from a folder called `content/posts` located in the project's
root.

> **Note**: `gatsby-plugin-mdx` uses `.mdx` by default as a file extension to
> recognize which files to use. You can also [use `.md` as a file
> extension](/plugins/gatsby-plugin-mdx#extensions) if you want.

```javascript:title=gatsby-config.js
module.exports = {
  plugins: [
    // Add support for *.mdx files in gatsby
    "gatsby-plugin-mdx",

    // Add a collection called "posts" that looks
    // for files in content/posts/
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "posts",
        path: `${__dirname}/content/posts/`,
      },
    },
  ],
}
```

You can read about
[`gatsby-source-filesystem`](/plugins/gatsby-source-filesystem)
if you'd like to learn more.

## Add MDX files

Before you can write any GraphQL queries and programmatically create
pages, you need to add some content.

Make a folder called `content/posts` and create two files in it called
`blog-1.mdx` and `blog-2.mdx`. You can do this on the command line in
a terminal by using the following commands from the root of your
project.

```shell
mkdir -p content/posts
touch content/posts/blog-{1,2}.mdx
```

> **Note**:
> `mkdir -p path/to/a/directory` will create every folder in the path if
> it does not exist.
>
> `touch <filename>` will create an empty file named `<filename>`. The
> brackets (`{}`) are [an
> expansion](https://twitter.com/kentcdodds/status/1083399683932868609?s=19)
> which means you can create multiple files in one command.

Open up each of the files you just created and add some content.

```mdx:title=blog-1.mdx
---
title: Blog Post 1
---

Trying out MDX
```

```mdx:title=blog-2.mdx
---
title: Blog Post 2
---

Gatsby is the best
```

## Create pages from sourced MDX files

`gatsby-plugin-mdx` automatically adds a `slug` field to each MDX node derived from the corresponding filename. You can use special characters, whitespaces, or uppercase in the filenames, and `gastby-plugin-mdx` will "slugify" it, making the slug safe for serving over the internet and human readable.

In order to create pages from the sourced MDX files, you need
to construct a query that finds all MDX nodes and pulls out
the `slug` field.

> **Note**: You can open up a GraphiQL console for query testing
> in your browser at `http://localhost:8000/___graphql`

```graphql
query {
  allMdx {
    edges {
      node {
        id
        # Slug field added by gatsby-plugin-mdx
        slug
      }
    }
  }
}
```

```javascript:title=gatsby-node.js
const path = require("path")

exports.createPages = async ({ graphql, actions, reporter }) => {
  // Destructure the createPage function from the actions object
  const { createPage } = actions
<commit_msg>docs: change gastby to gatsby (#34341)<commit_after>---
title: Programmatically Creating Pages
---

Sometimes you want to be able to programmatically access data from
files in `src/pages/` or create pages using MDX content that lives at
arbitrary locations outside of `src/pages/` or in remote CMSes.

For instance, let's say you have a Gatsby website, and you want to add
support for MDX so you can start your blog. The posts will live in
`content/posts/`. You can do this with the help of
`gatsby-source-filesystem` and [`createPages`](/docs/reference/config-files/gatsby-node/#createPages) in
`gatsby-node.js`.

## Source MDX pages from the filesystem

To let Gatsby know that you'll be working with MDX content you need to
add `gatsby-plugin-mdx` to the plugins array in your `gatsby-config.js`
file.

You'll need to use `gatsby-source-filesystem` and tell it to source
"posts" from a folder called `content/posts` located in the project's
root.

> **Note**: `gatsby-plugin-mdx` uses `.mdx` by default as a file extension to
> recognize which files to use. You can also [use `.md` as a file
> extension](/plugins/gatsby-plugin-mdx#extensions) if you want.

```javascript:title=gatsby-config.js
module.exports = {
  plugins: [
    // Add support for *.mdx files in gatsby
    "gatsby-plugin-mdx",

    // Add a collection called "posts" that looks
    // for files in content/posts/
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "posts",
        path: `${__dirname}/content/posts/`,
      },
    },
  ],
}
```

You can read about
[`gatsby-source-filesystem`](/plugins/gatsby-source-filesystem)
if you'd like to learn more.

## Add MDX files

Before you can write any GraphQL queries and programmatically create
pages, you need to add some content.

Make a folder called `content/posts` and create two files in it called
`blog-1.mdx` and `blog-2.mdx`. You can do this on the command line in
a terminal by using the following commands from the root of your
project.

```shell
mkdir -p content/posts
touch content/posts/blog-{1,2}.mdx
```

> **Note**:
> `mkdir -p path/to/a/directory` will create every folder in the path if
> it does not exist.
>
> `touch <filename>` will create an empty file named `<filename>`. The
> brackets (`{}`) are [an
> expansion](https://twitter.com/kentcdodds/status/1083399683932868609?s=19)
> which means you can create multiple files in one command.

Open up each of the files you just created and add some content.

```mdx:title=blog-1.mdx
---
title: Blog Post 1
---

Trying out MDX
```

```mdx:title=blog-2.mdx
---
title: Blog Post 2
---

Gatsby is the best
```

## Create pages from sourced MDX files

`gatsby-plugin-mdx` automatically adds a `slug` field to each MDX node derived from the corresponding filename. You can use special characters, whitespaces, or uppercase in the filenames, and `gatsby-plugin-mdx` will "slugify" it, making the slug safe for serving over the internet and human readable.

In order to create pages from the sourced MDX files, you need
to construct a query that finds all MDX nodes and pulls out
the `slug` field.

> **Note**: You can open up a GraphiQL console for query testing
> in your browser at `http://localhost:8000/___graphql`

```graphql
query {
  allMdx {
    edges {
      node {
        id
        # Slug field added by gatsby-plugin-mdx
        slug
      }
    }
  }
}
```

```javascript:title=gatsby-node.js
const path = require("path")

exports.createPages = async ({ graphql, actions, reporter }) => {
  // Destructure the createPage function from the actions object
  const { createPage } = actions

{'fraction_non_alphanumeric': 0.1056718901677992, 'fraction_numerical': 0.009846068506448482, 'mean_word_length': 3.570342205323194, 'pattern_counts': {'":': 0, '<': 7, '<?xml version=': 0, '>': 35, 'https://': 2, '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': '7384224', 'n_tokens_mistral': 2336, 'n_tokens_neox': 2223, 'n_words': 915}