rans>Skip to main content
Community Plugin
View plugin on GitHub
See starters using this

gatsby-source-filesystem

Plugin for creating File nodes from the file system. The various “transformer” plugins transform File nodes into various other types of data e.g. gatsby-transformer-json transforms JSON files into JSON data nodes and gatsby-transformer-remark transforms markdown files into MarkdownRemark nodes from which you can query an HTML representation of the markdown.

Install

npm install --save gatsby-source-filesystem

How to use

// In your gatsby-config.js
module.exports = {
  plugins: [
    // You can have multiple instances of this plugin
    // to read source nodes from different locations on your
    // filesystem.
    //
    // The following sets up the Jekyll pattern of having a
    // "pages" directory for Markdown files and a "data" directory
    // for `.json`, `.yaml`, `.csv`.
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `pages`,
        path: `${__dirname}/src/pages/`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `data`,
        path: `${__dirname}/src/data/`,
      },
    },
  ],
};

How to query

You can query file nodes like the following:

{
  allFile {
    edges {
      node {
        extension
        dir
        modifiedTime
      }
    }
  }
}

Advanced usage

If you wish to prevent gatsby-source-filesystem from ensuring that the given directory exists, you may set skipPathCheck: true to pass a glob or array of globs:

{
  resolve: `gatsby-source-filesystem`,
  options: {
    name: `pages`,
    path: [`${__dirname}/README.md`, `${__dirname}/docs`],
    rootPath: __dirname, // "root" path used to generate relative filepaths
    skipPathCheck: true,
  },
},
Docs
Tutorials
Plugins
Blog
Showcase