diff --git a/docs/docs/images/allfile-query.png b/docs/docs/images/allfile-query.png
new file mode 100644
index 0000000000000..7d4f1a4a1413f
Binary files /dev/null and b/docs/docs/images/allfile-query.png differ
diff --git a/docs/docs/images/data-in-console.png b/docs/docs/images/data-in-console.png
new file mode 100644
index 0000000000000..7ece96f81420d
Binary files /dev/null and b/docs/docs/images/data-in-console.png differ
diff --git a/docs/docs/images/filesystem-autocomplete.png b/docs/docs/images/filesystem-autocomplete.png
new file mode 100644
index 0000000000000..f54d07db98951
Binary files /dev/null and b/docs/docs/images/filesystem-autocomplete.png differ
diff --git a/docs/docs/images/filesystem-query.png b/docs/docs/images/filesystem-query.png
new file mode 100644
index 0000000000000..eff071d28c4aa
Binary files /dev/null and b/docs/docs/images/filesystem-query.png differ
diff --git a/docs/docs/images/graphiql-filesystem.png b/docs/docs/images/graphiql-filesystem.png
new file mode 100644
index 0000000000000..2e4809224eb50
Binary files /dev/null and b/docs/docs/images/graphiql-filesystem.png differ
diff --git a/docs/docs/images/my-files-page.png b/docs/docs/images/my-files-page.png
new file mode 100644
index 0000000000000..7dc45ea293e64
Binary files /dev/null and b/docs/docs/images/my-files-page.png differ
diff --git a/docs/docs/sourcing-from-the-filesystem.md b/docs/docs/sourcing-from-the-filesystem.md
index 77d034bed3523..204b450ffa6fc 100644
--- a/docs/docs/sourcing-from-the-filesystem.md
+++ b/docs/docs/sourcing-from-the-filesystem.md
@@ -2,7 +2,73 @@
title: Sourcing from the Filesystem
---
-This is a stub. Help our community expand it.
+This guide will walk you through sourcing data from the filesystem.
-Please use the [Gatsby Style Guide](/docs/gatsby-style-guide/) to ensure your
-pull request gets accepted.
+## Setup
+
+This guide assumes that you have a Gatsby project set up. If you need to set up a project, please reference the [Quick Start Guide](https://github.com/gatsbyjs/gatsby/tree/master/docs).
+
+It will also be useful if you are familiar with [Graph_i_QL](/docs/introducing-graphiql/), a tool that helps you structure your queries correctly.
+
+## Using `gatsby-source-filesystem`
+
+`gatsby-source-filesystem` is the Gatsby plugin for creating File nodes from the file system.
+
+Install the plugin at the root of your Gatsby project:
+
+```sh
+npm install --save gatsby-source-filesystem
+```
+
+Then add it to your project's `gatsby-config.js` file:
+
+```javascript{6-12}:title=gatsby-config.js
+module.exports = {
+ siteMetadata: {
+ title: `Your Site Name`,
+ },
+ plugins: [
+ {
+ resolve: `gatsby-source-filesystem`,
+ options: {
+ name: `src`,
+ path: `${__dirname}/src/`,
+ },
+ },
+ ],
+}
+```
+
+Save the `gatsby-config.js` file, and restart the Gatsby development server.
+
+Open up Graph_i_QL.
+
+If you bring up the autocomplete window, you'll see:
+
+
+
+Hit Enter on `allFile` then type Ctrl + Enter to run a
+query.
+
+
+
+Delete the `id` from the query and bring up the autocomplete again (Ctrl +
+Space).
+
+
+
+Try adding a number of fields to your query, pressing Ctrl + Enter
+each time to re-run the query. You'll see something like this:
+
+
+
+The result is an array of File "nodes" (node is a fancy name for an object in a
+"graph"). Each File object has the fields you queried for.
+
+## Transforming File nodes
+
+Once files have been sourced, various "transformer" plugins in the Gatsby ecosystem can then be used to transform File nodes into various other types of data. For example, a JSON file can be sourced using `gatsby-source-plugin`, and then the resulting File nodes can be transformed into JSON nodes using `gatsby-transformer-json`.
+
+## Further reference and examples
+
+For further reference, you may be interested in checking out the `gatsby-source-filesystem` [package README](https://www.gatsbyjs.org/packages/gatsby-source-filesystem/), and various official and community [starters that use the plugin](/starters/?d=gatsby-source-filesystem).