Add Files as Sources

We've got our simple events page with a "TODO" to create an events index. How do we create the events blog, though? We need to create the content, tell Gatsby where to find it, and also tell Gatsby what to do with it. We'll do that in the rest of this tutorial.

First, at the root of the project, create a folder called content with another folder inside of it called events.

Then, create a new file under the events folder using this format:

2019-11-12-game-night.md

(You can use mdx or md as the file extension. My convention is to use mdx for pages and md for content.)

Inside that file, create some simple frontmatter and Markdown:

---
date: "2019-11-12"
title: "Game Night at the Lodge: Scythe"
---

Join us at the Lodge as we try to learn the complicated board game "Scythe."

Now, let's tell Gatsby where this content lives. To do that, we first need to install a new plugin called gatsby-source-filesystem:

npm install gatsby-source-filesystem

We can configure this plugin by adding a new object to the plugins array of gatsby-config.js:

// gatsby-config.js
plugins: [
// ...other entries remain the same
  {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `events`,
        path: `${__dirname}/content/events/`,
      },
    },
]

Here, we're telling Gatsby to go get everything in that /content/events folder and give it the name events.

The gatsby-source-filesystem plugin will transform those files into data that we can query in GraphQL. Let's use the GraphiQL Explorer in the next video to see what that looks like.