Use single md file instead of multiple.

gatsby-config.js

@@ -2,30 +2,24 @@ module.exports = {
   siteMetadata: {
     name: `Fabian Schultz`,
     title: `Gatsby Deck`,
-    date: `November 23, 2017`
+    date: `November 23, 2017`,
   },
   plugins: [
     `gatsby-plugin-react-helmet`,
     `gatsby-plugin-offline`,
-    {
-      resolve: `gatsby-transformer-remark`,
-      options: {
-        plugins: [`gatsby-remark-smartypants`]
-      }
-    },
     {
       resolve: `gatsby-source-filesystem`,
       options: {
         name: `slides`,
-        path: `${__dirname}/src/pages/`
-      }
+        path: `${__dirname}/src`,
+      },
     },
     {
       resolve: `gatsby-plugin-postcss-sass`,
       options: {
         postCssPlugins: [],
-        precision: 8
-      }
-    }
-  ]
+        precision: 8,
+      },
+    },
+  ],
 };

gatsby-node.js

@@ -1,4 +1,8 @@
 const path = require('path');
+const matter = require('gray-matter');
+const remark = require('remark');
+const recommended = require('remark-preset-lint-recommended');
+const html = require('remark-html');
 
 // Implement the Gatsby API “onCreatePage”. This is
 // called after every page is created.
@@ -8,7 +12,7 @@ exports.onCreatePage = ({ page, boundActionCreators }) => {
   return new Promise((resolve, reject) => {
     // Remove trailing slash
     const newPage = Object.assign({}, page, {
-      path: page.path === `/` ? page.path : page.path.replace(/\/$/, ``)
+      path: page.path === `/` ? page.path : page.path.replace(/\/$/, ``),
     });
 
     if (newPage.path !== page.path) {
@@ -29,14 +33,8 @@ exports.createPages = ({ boundActionCreators, graphql }) => {
 
   return graphql(`
     {
-      allMarkdownRemark {
-        edges {
-          node {
-            html
-            fileAbsolutePath
-            id
-          }
-        }
+      markdownRemark(fileAbsolutePath: { regex: "/slides/" }) {
+        rawMarkdownBody
       }
     }
   `).then(result => {
@@ -44,15 +42,26 @@ exports.createPages = ({ boundActionCreators, graphql }) => {
       return Promise.reject(result.errors);
     }
 
-    result.data.allMarkdownRemark.edges.forEach(({ node }) => {
-      const absolutePath = node.fileAbsolutePath;
-      const fileName = path.basename(absolutePath, path.extname(absolutePath));
+    console.log(result);
 
-      createPage({
-        path: fileName,
-        component: blogPostTemplate,
-        context: { absolutePath }
-      });
+    const slides = result.data.markdownRemark.rawMarkdownBody
+      .split('---\n')
+      .map(rawMarkdownBody => rawMarkdownBody.trim());
+
+    slides.forEach((slide, index) => {
+      remark()
+        .use(recommended)
+        .use(html)
+        .process(slide, (err, file) => {
+          createPage({
+            path: `/${index + 1}`,
+            component: blogPostTemplate,
+            context: {
+              html: String(file),
+              absolutePath: process.cwd() + `/${index + 1}.md`,
+            },
+          });
+        });
     });
   });
 };

package.json

@@ -11,12 +11,14 @@
     "gatsby-plugin-offline": "^1.0.13",
     "gatsby-plugin-postcss-sass": "^1.0.16",
     "gatsby-plugin-react-helmet": "^1.0.8",
-    "gatsby-remark-smartypants": "^1.4.10",
     "gatsby-source-filesystem": "^1.5.18",
-    "gatsby-transformer-remark": "^1.7.31",
+    "gray-matter": "^4.0.1",
     "history": "^4.7.2",
     "react-swipeable": "^4.2.0",
-    "react-transition-group": "^2.2.1"
+    "react-transition-group": "^2.2.1",
+    "remark": "^9.0.0",
+    "remark-html": "^7.0.0",
+    "remark-preset-lint-recommended": "^3.0.2"
   },
   "keywords": [
     "gatsby"

src/layouts/index.js

@@ -30,14 +30,8 @@ class TemplateWrapper extends Component {
   navigate = ({ keyCode }) => {
     const now = parseInt(location.pathname.substr(1));
 
-    const slides = this.props.data.allMarkdownRemark.edges.filter(
-      ({ node }) => {
-        const id = node.fileAbsolutePath.replace(/^.*[\\\/]/, '').split('.')[0];
-
-        if (id && id !== 404) {
-          return true;
-        }
-      }
+    const slides = this.props.data.markdownRemark.rawMarkdownBody.split(
+      '---\n'
     );
 
     if (now) {
@@ -66,8 +60,9 @@ class TemplateWrapper extends Component {
     return (
       <div>
         <Helmet
-          title={`${data.site.siteMetadata.title} — ${data.site.siteMetadata
-            .name}`}
+          title={`${data.site.siteMetadata.title} — ${
+            data.site.siteMetadata.name
+          }`}
         />
         <Header
           name={data.site.siteMetadata.name}
@@ -101,12 +96,8 @@ export const pageQuery = graphql`
         date
       }
     }
-    allMarkdownRemark {
-      edges {
-        node {
-          fileAbsolutePath
-        }
-      }
+    markdownRemark(fileAbsolutePath: { regex: "/slides/" }) {
+      rawMarkdownBody
     }
   }
 `;

src/pages/1.md

@@ -1,3 +0,0 @@
-# Gatsby Deck
-
-Create presentations using Gatsby & React.

src/pages/2.md

@@ -1,5 +0,0 @@
-> Inscrutable icons litter the face of the devices even though the research 
-> community has long demonstrated that people cannot remember the meaning of
-> more than a small number of icons […] Who can remember what each icon
-> means? Not me.
-> <cite>Don Norman</cite>

src/pages/3.md

@@ -1 +0,0 @@
-# 🤫

src/pages/4.md

@@ -1,7 +0,0 @@
-## Slides are written in Markdown!
-
-Here's the source of the first slide:
-
-    # Gatsby Deck
-
-    Create presentations using Gatsby & React.

src/pages/5.md

@@ -1,6 +0,0 @@
-![Monkey](//i.imgur.com/PnbINJ6.gif)
-
-🌟 Star it on [GitHub](//github.com/fabe/gatsby-deck),  
-or create your own with:
-
-    gatsby new my-slides https://github.com/fabe/gatsby-starter-deck

src/pages/slides.md

@@ -0,0 +1,34 @@
+# Gatsby Deck
+
+Create presentations using Gatsby & React.
+
+---
+
+> Inscrutable icons litter the face of the devices even though the research 
+> community has long demonstrated that people cannot remember the meaning of
+> more than a small number of icons […] Who can remember what each icon
+> means? Not me.
+> <cite>Don Norman</cite>
+
+---
+
+# 🤫
+
+---
+
+## Slides are written in Markdown!
+
+Here's the source of the first slide:
+
+    # Gatsby Deck
+
+    Create presentations using Gatsby & React.
+
+---
+
+![Monkey](//i.imgur.com/PnbINJ6.gif)
+
+🌟 Star it on [GitHub](//github.com/fabe/gatsby-deck),  
+or create your own with:
+
+    gatsby new my-slides https://github.com/fabe/gatsby-starter-deck

src/templates/slide.js

@@ -3,14 +3,6 @@ import React from 'react';
 export default ({ data, pathContext, transition }) => (
   <div
     style={transition && transition.style}
-    dangerouslySetInnerHTML={{ __html: data.markdownRemark.html }}
+    dangerouslySetInnerHTML={{ __html: pathContext.html }}
   />
 );
-
-export const pageQuery = graphql`
-  query SlideByPath($absolutePath: String!) {
-    markdownRemark(fileAbsolutePath: { eq: $absolutePath }) {
-      html
-    }
-  }
-`;