diff --git a/.babelrc b/.babelrc
new file mode 100644
index 0000000..a8b9b8b
--- /dev/null
+++ b/.babelrc
@@ -0,0 +1,4 @@
+{
+  "presets": ['react', 'es2015', 'stage-1'],
+  "plugins": ['add-module-exports']
+}
diff --git a/.gitignore b/.gitignore
index ed72704..7d16503 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,3 +2,4 @@ node_modules/
 public
 .gatsby-context.js
 .DS_Store
+.intermediate-representation/
diff --git a/components/Bio.js b/components/Bio.js
index 676d3c8..56b86e6 100644
--- a/components/Bio.js
+++ b/components/Bio.js
@@ -1,5 +1,4 @@
 import React from 'react'
-import { config } from 'config'
 import { rhythm } from 'utils/typography'
 import { prefixLink } from 'gatsby-helpers'
 import profilePic from './profile-pic.jpg'
@@ -14,7 +13,7 @@ class Bio extends React.Component {
       >
         <img
           src={prefixLink(profilePic)}
-          alt={`author ${config.authorName}`}
+          alt={`author name`}
           style={{
             float: 'left',
             marginRight: rhythm(1/4),
@@ -23,7 +22,7 @@ class Bio extends React.Component {
             height: rhythm(2),
           }}
         />
-        Written by <strong>{config.authorName}</strong> who lives and works in San Francisco building useful things. <a href="https://twitter.com/kylemathews">You should follow him on Twitter</a>
+        Written by <strong>TODO author name</strong> who lives and works in TODO San Francisco building useful things. <a href="https://twitter.com/kylemathews">You should follow him on Twitter</a>
       </p>
     )
   }
diff --git a/components/ReadNext.js b/components/ReadNext.js
index 6e60ba3..59b86ea 100644
--- a/components/ReadNext.js
+++ b/components/ReadNext.js
@@ -1,37 +1,20 @@
-import React from 'react'
-import { Link } from 'react-router'
-import { prefixLink } from 'gatsby-helpers'
-import { prune, include as includes } from 'underscore.string'
-import find from 'lodash/find'
-import { rhythm, fontSizeToMS } from 'utils/typography'
+const React = require('react')
+const { Link } = require('react-router')
 
-class ReadNext extends React.Component {
+const { rhythm, adjustFontSizeToMSValue } = require('utils/typography')
+
+const Component = React.createClass({
   render () {
-    const { pages, post } = this.props
-    const { readNext } = post
-    let nextPost
-    if (readNext) {
-      nextPost = find(pages, (page) =>
-        includes(page.path, readNext)
-      )
-    }
+    const { nextPost } = this.props
     if (!nextPost) {
-      return React.createElement('noscript', null)
+      return null
     } else {
-      nextPost = find(pages, (page) =>
-        includes(page.path, readNext.slice(1, -1))
-      )
-      // Create pruned version of the body.
-      const html = nextPost.data.body
-      const body = prune(html.replace(/<[^>]*>/g, ''), 200)
-
       return (
         <div>
           <h6
             style={{
+              ...adjustFontSizeToMSValue(-0.5),
               margin: 0,
-              fontSize: fontSizeToMS(-0.5).fontSize,
-              lineHeight: fontSizeToMS(-0.5).lineHeight,
               letterSpacing: -0.25,
             }}
           >
@@ -39,32 +22,32 @@ class ReadNext extends React.Component {
           </h6>
           <h3
             style={{
-              marginTop: 0,
-              marginBottom: rhythm(1/4),
+              margin: 0,
             }}
           >
             <Link
-              to={{
-                pathname: prefixLink(nextPost.path),
-                query: {
-                  readNext: true,
-                },
-              }}
+              to={nextPost.path}
             >
-              {nextPost.data.title}
+              {nextPost.frontmatter.title}
             </Link>
           </h3>
-          <p>{body}</p>
+          <p>{nextPost.excerpt}</p>
           <hr />
         </div>
       )
     }
   }
-}
+})
 
-ReadNext.propTypes = {
-  post: React.PropTypes.object.isRequired,
-  pages: React.PropTypes.array,
-}
+export default Component
+
+export const query = `
+readNext {
+	id
+	excerpt(pruneLength: 200)
+	frontmatter {
+		title
+	}
+}
+`
 
-export default ReadNext
diff --git a/gatsby-config.js b/gatsby-config.js
new file mode 100644
index 0000000..d46145e
--- /dev/null
+++ b/gatsby-config.js
@@ -0,0 +1,10 @@
+const config = {
+  siteMetadata: {
+    title: 'Gatsby Starter Blog',
+    author: 'Kyle Mathews',
+    homeCity: 'San Francisco',
+  },
+  sources: `${__dirname}/pages/`,
+}
+
+export default config
diff --git a/gatsby-node.js b/gatsby-node.js
new file mode 100644
index 0000000..34c2b8f
--- /dev/null
+++ b/gatsby-node.js
@@ -0,0 +1,46 @@
+import _ from 'lodash'
+import Promise from 'bluebird'
+import path from 'path'
+
+exports.rewritePath = (parsedFilePath, metadata) => {
+  if (parsedFilePath.ext === 'md') {
+    return `/${parsedFilePath.dirname.split('---')[1]}/`
+  }
+}
+
+exports.createPages = ({ graphql }) => (
+  new Promise((resolve, reject) => {
+    const pages = []
+    const blogPost = path.resolve('./page-templates/blog-post.js')
+    graphql(`
+      {
+        allMarkdown(first: 1000) {
+          edges {
+            node {
+              path
+            }
+          }
+        }
+      }
+    `)
+    .then(result => {
+      if (result.errors) {
+        console.log(result.errors)
+        reject(result.errors)
+      }
+
+      // Create blog posts pages.
+      _.each(result.data.allMarkdown.edges, (edge) => {
+        if (edge.node.path !== '/404/') {
+          pages.push({
+            path: edge.node.path,
+            component: blogPost,
+          })
+        }
+      })
+
+      console.log(pages)
+      resolve(pages)
+    })
+  })
+)
diff --git a/html.js b/html.js
index cd1c637..05dc687 100644
--- a/html.js
+++ b/html.js
@@ -3,8 +3,8 @@ import DocumentTitle from 'react-document-title'
 import { prefixLink } from 'gatsby-helpers'
 import { GoogleFont, TypographyStyle } from 'react-typography'
 import typography from './utils/typography'
-
-const BUILD_TIME = new Date().getTime()
+import HTMLScripts from 'html-scripts'
+import HTMLStyles from 'html-styles'
 
 module.exports = React.createClass({
   displayName: 'HTML',
@@ -15,11 +15,6 @@ module.exports = React.createClass({
     const { body } = this.props
     const title = DocumentTitle.rewind()
 
-    let css
-    if (process.env.NODE_ENV === 'production') {
-      css = <style dangerouslySetInnerHTML={{ __html: require('!raw!./public/styles.css') }} />
-    }
-
     return (
       <html lang="en">
         <head>
@@ -32,11 +27,11 @@ module.exports = React.createClass({
           <title>{title}</title>
           <TypographyStyle typography={typography} />
           <GoogleFont typography={typography} />
-          {css}
+          <HTMLStyles />
         </head>
         <body className="landing-page">
           <div id="react-mount" dangerouslySetInnerHTML={{ __html: body }} />
-          <script src={prefixLink(`/bundle.js?t=${BUILD_TIME}`)} />
+          <HTMLScripts scripts={this.props.scripts} />
         </body>
       </html>
     )
diff --git a/pages/_template.js b/layouts/default.js
similarity index 94%
rename from pages/_template.js
rename to layouts/default.js
index 43c459b..1a6b79b 100644
--- a/pages/_template.js
+++ b/layouts/default.js
@@ -3,7 +3,6 @@ import { Link } from 'react-router'
 import { Container } from 'react-responsive-grid'
 import { prefixLink } from 'gatsby-helpers'
 import { rhythm, adjustFontSizeToMSValue } from 'utils/typography'
-import { config } from 'config'
 
 class Template extends React.Component {
   render () {
@@ -26,7 +25,7 @@ class Template extends React.Component {
             }}
             to={prefixLink('/')}
           >
-            {config.blogTitle}
+            {'TODO insert blog title here from query'}
           </Link>
         </h1>
       )
@@ -46,7 +45,7 @@ class Template extends React.Component {
             }}
             to={prefixLink('/')}
           >
-            {config.blogTitle}
+            {'insert blog title here'}
           </Link>
         </h3>
       )
diff --git a/package.json b/package.json
index 38f90aa..c28b1e9 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/gatsbyjs/gatsby-starter-blog/issues"
   },
   "dependencies": {
-    "gatsby": "^0.12.6",
+    "gatsby": "1.0.0-alpha2",
     "lodash": "^4.15.0",
     "moment": "^2.14.1",
     "react-document-title": "^2.0.2",
diff --git a/page-templates/blog-post.js b/page-templates/blog-post.js
new file mode 100644
index 0000000..12d3494
--- /dev/null
+++ b/page-templates/blog-post.js
@@ -0,0 +1,71 @@
+import React from 'react'
+import DocumentTitle from 'react-document-title'
+import { Link } from 'react-router'
+import get from 'lodash/get'
+import { rhythm, adjustFontSizeToMSValue } from 'utils/typography'
+import ReadNext from '../components/ReadNext'
+//import { query } from '../components/ReadNext'
+import Bio from 'components/Bio'
+const query = `
+readNext {
+  path
+  excerpt(pruneLength: 200)
+  frontmatter {
+    title
+  }
+}
+`
+
+class BlogPostRoute extends React.Component {
+  render () {
+    const post = this.props.data.markdown
+    const siteTitle = get(this.props, 'data.site.siteMetadata.title')
+
+    return (
+      <DocumentTitle title={`${post.frontmatter.title} | ${siteTitle}`}>
+        <div>
+          <h1>{post.frontmatter.title}</h1>
+          <div dangerouslySetInnerHTML={{ __html: post.bodyHTML }} />
+          <p
+            style={{
+              ...adjustFontSizeToMSValue(-1/5),
+              display: 'block',
+              marginBottom: rhythm(1),
+            }}
+          >
+            Posted TODO DATE
+          </p>
+          <hr
+            style={{
+              marginBottom: rhythm(1),
+            }}
+          />
+          <ReadNext nextPost={post.frontmatter.readNext} />
+          <Bio />
+        </div>
+      </DocumentTitle>
+    )
+  }
+}
+
+export default BlogPostRoute
+
+export const pageQuery = `
+  query BlogPostByPath($path: String!) {
+    site {
+      siteMetadata {
+        title
+        author
+      }
+    }
+    markdown(path: $path) {
+      id
+      bodyHTML
+      frontmatter {
+        ${query}
+        title
+        #date(formatString: "MMMM DD, YYYY")
+      }
+    }
+  }
+`
diff --git a/pages/index.js b/pages/index.js
index 75541aa..1226cb9 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,38 +1,39 @@
 import React from 'react'
 import { Link } from 'react-router'
-import sortBy from 'lodash/sortBy'
+import get from 'lodash/get'
 import DocumentTitle from 'react-document-title'
 import { prefixLink } from 'gatsby-helpers'
 import { rhythm } from 'utils/typography'
-import access from 'safe-access'
-import { config } from 'config'
 import include from 'underscore.string/include'
 import Bio from 'components/Bio'
 
 class BlogIndex extends React.Component {
   render () {
     const pageLinks = []
-    // Sort pages.
-    const sortedPages = sortBy(this.props.route.pages, (page) =>
-      access(page, 'data.date')
-    ).reverse()
-    sortedPages.forEach((page) => {
-      if (access(page, 'file.ext') === 'md' && !include(page.path, '/404')) {
-        const title = access(page, 'data.title') || page.path
+    const posts = get(this, 'props.data.allMarkdown.edges')
+    posts.forEach((post) => {
+      if (post.node.path !== '/404/') {
+        const title = get(post, 'node.frontmatter.title') || post.node.path
         pageLinks.push(
           <li
-            key={page.path}
+            key={post.node.path}
             style={{
               marginBottom: rhythm(1/4),
             }}
           >
-            <Link style={{boxShadow: 'none'}} to={prefixLink(page.path)}>{title}</Link>
+            <Link
+              style={{boxShadow: 'none'}}
+              to={prefixLink(post.node.path)}
+            >
+              {post.node.frontmatter.title}
+            </Link>
           </li>
         )
       }
     })
+
     return (
-      <DocumentTitle title={config.blogTitle}>
+      <DocumentTitle title={get(this, 'props.data.site.siteMetadata.title')}>
         <div>
           <Bio />
           <ul>
@@ -49,3 +50,24 @@ BlogIndex.propTypes = {
 }
 
 export default BlogIndex
+
+export const pageQuery = `
+{
+  site {
+    buildTime
+    siteMetadata {
+      title
+    }
+  }
+  allMarkdown(first: 2000) {
+    edges {
+      node {
+        path
+        frontmatter {
+          title
+        }
+      }
+    }
+  }
+}
+`
diff --git a/wrappers/md.js b/wrappers/md.js
deleted file mode 100644
index c63c778..0000000
--- a/wrappers/md.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import React from 'react'
-import moment from 'moment'
-import DocumentTitle from 'react-document-title'
-import ReadNext from '../components/ReadNext'
-import { rhythm } from 'utils/typography'
-import { config } from 'config'
-import Bio from 'components/Bio'
-
-import '../css/zenburn.css'
-
-class MarkdownWrapper extends React.Component {
-  render () {
-    const { route } = this.props
-    const post = route.page.data
-
-    return (
-      <DocumentTitle title={`${post.title} | ${config.blogTitle}`}>
-        <div className="markdown">
-          <h1 style={{marginTop: 0}}>{post.title}</h1>
-          <div dangerouslySetInnerHTML={{ __html: post.body }} />
-          <em
-            style={{
-              display: 'block',
-              marginBottom: rhythm(2),
-            }}
-          >
-            Posted {moment(post.date).format('MMMM D, YYYY')}
-          </em>
-          <hr
-            style={{
-              marginBottom: rhythm(2),
-            }}
-          />
-          <ReadNext post={post} pages={route.pages} />
-          <Bio />
-        </div>
-      </DocumentTitle>
-    )
-  }
-}
-
-MarkdownWrapper.propTypes = {
-  route: React.PropTypes.object,
-}
-
-export default MarkdownWrapper