diff --git a/.eslintrc b/.eslintrc
new file mode 100644
index 0000000..e229935
--- /dev/null
+++ b/.eslintrc
@@ -0,0 +1,17 @@
+{
+  "extends": "eslint-config-airbnb",
+  "rules": {
+    "indent": [2, 2, {"SwitchCase": 1}],
+    "no-console": [0],
+    "func-names": [0],
+    "semi": [2, "never"],
+    "no-extra-semi": [2],
+    "space-before-function-paren": [2, "always"],
+    "no-else-return": [0],
+    "space-infix-ops": [0],
+    "react/prefer-es6-class": [0],
+  },
+  "globals": {
+    "__PREFIX_LINKS__": true,
+  },
+}
diff --git a/app.js b/app.js
index 148e5fd..07fd802 100644
--- a/app.js
+++ b/app.js
@@ -1,11 +1,10 @@
-exports.loadContext = function(callback) {
-  var context;
-  context = require.context('./pages', true);
+exports.loadContext = function (callback) {
+  let context = require.context('./pages', true)
   if (module.hot) {
-    module.hot.accept(context.id, function() {
-      context = require.context('./pages', true);
-      return callback(context);
-    });
+    module.hot.accept(context.id, () => {
+      context = require.context('./pages', true)
+      return callback(context)
+    })
   }
-  return callback(context);
-};
+  return callback(context)
+}
diff --git a/components/ReadNext.jsx b/components/ReadNext.jsx
index f00ef1c..5c517f7 100644
--- a/components/ReadNext.jsx
+++ b/components/ReadNext.jsx
@@ -1,28 +1,33 @@
-import React from 'react';
-import { Link } from 'react-router';
-import { prune, include as includes } from 'underscore.string';
-import find from 'lodash/collection/find';
+import React from 'react'
+import { Link } from 'react-router'
+import { prune, include as includes } from 'underscore.string'
+import find from 'lodash/collection/find'
 import { rhythm, fontSizeToMS } from 'utils/typography'
-import { link } from 'gatsby-helpers'
 
-export default class extends React.Component {
-  render() {
-    let body, html, nextPost, readNext;
-    readNext = this.props.post.readNext;
-    if (readNext != null) {
-      nextPost = find(this.props.pages, function(page) {
-        return includes(page.path, readNext.slice(1, -1));
-      });
+export default class ReadNext extends React.Component {
+  propTypes () {
+    return {
+      post: React.PropTypes.object,
+      pages: React.PropTypes.object,
+    }
+  }
+  render () {
+    const readNext = this.props.post.readNext
+    let nextPost
+    if (readNext !== null) {
+      nextPost = find(this.props.pages, (page) =>
+        includes(page.path, readNext.slice(1, -1))
+      )
     }
     if (!nextPost) {
-      return React.createElement("noscript", null);
+      return React.createElement('noscript', null)
     } else {
-      nextPost = find(this.props.pages, function(page) {
-        return includes(page.path, readNext.slice(1, -1));
-      });
+      nextPost = find(this.props.pages, (page) =>
+        includes(page.path, readNext.slice(1, -1))
+      )
       // Create pruned version of the body.
-      html = nextPost.data.body;
-      body = prune(html.replace(/<[^>]*>/g, ''), 200);
+      const html = nextPost.data.body
+      const body = prune(html.replace(/<[^>]*>/g, ''), 200)
 
       return (
         <div>
@@ -31,19 +36,19 @@ export default class extends React.Component {
               margin: 0,
               fontSize: fontSizeToMS(-1).fontSize,
               lineHeight: fontSizeToMS(-1).lineHeight,
-              letterSpacing: -0.5
+              letterSpacing: -0.5,
             }}
           >
             READ THIS NEXT:
           </h6>
           <h3
             style={{
-              marginBottom: rhythm(1/4)
+              marginBottom: rhythm(1/4),
             }}
           >
             <Link
               to={nextPost.path}
-              query={{readNext: true}}
+              query={{ readNext: true }}
             >
               {nextPost.data.title}
             </Link>
@@ -51,7 +56,7 @@ export default class extends React.Component {
           <p>{body}</p>
           <hr />
         </div>
-      );
+      )
     }
   }
 }
diff --git a/html.jsx b/html.jsx
index 082ec6c..23be058 100644
--- a/html.jsx
+++ b/html.jsx
@@ -1,15 +1,20 @@
-import React from 'react';
-import Typography from 'typography';
-import DocumentTitle from 'react-document-title';
+import React from 'react'
+import DocumentTitle from 'react-document-title'
 import { link } from 'gatsby-helpers'
 import { TypographyStyle } from 'utils/typography'
 
 export default class Html extends React.Component {
-  render() {
-    let title;
-    title = DocumentTitle.rewind();
+  propTypes () {
+    return {
+      body: React.PropTypes.string,
+      favicon: React.PropTypes.string,
+      title: React.PropTypes.string,
+    }
+  }
+  render () {
+    let title = DocumentTitle.rewind()
     if (this.props.title) {
-      title = this.props.title;
+      title = this.props.title
     }
 
     return (
@@ -17,34 +22,41 @@ export default class Html extends React.Component {
         <head>
           <meta charSet="utf-8"/>
           <meta httpEquiv="X-UA-Compatible" content="IE=edge"/>
-          <meta name='viewport' content='user-scalable=no width=device-width, initial-scale=1.0 maximum-scale=1.0'/>
+          <meta
+            name="viewport"
+            content="user-scalable=no width=device-width, initial-scale=1.0 maximum-scale=1.0"
+          />
           <title>{this.props.title}</title>
           <link rel="shortcut icon" href={this.props.favicon}/>
           <TypographyStyle/>
-          <style dangerouslySetInnerHTML={{__html:
-            `
-              body {
-                color: rgb(66,66,66);
-              }
-              h1,h2,h3,h4,h5,h6 {
-                color: rgb(44,44,44);
-              }
-              a {
-                color: rgb(42,93,173);
-                text-decoration: none;
-              }
-              a:hover {
-                text-decoration: underline;
-              }
-            `
-          }}/>
+          <style
+            dangerouslySetInnerHTML={{
+              __html:
+                `
+                  body {
+                    color: rgb(66,66,66);
+                  }
+                  h1,h2,h3,h4,h5,h6 {
+                    color: rgb(44,44,44);
+                  }
+                  a {
+                    color: rgb(42,93,173);
+                    text-decoration: none;
+                  }
+                  a:hover {
+                    text-decoration: underline;
+                  }
+                `,
+            }}
+          />
         </head>
         <body className="landing-page">
-          <div id="react-mount" dangerouslySetInnerHTML={{__html: this.props.body}} />
-          <script src={link("/bundle.js")}/>
+          <div id="react-mount" dangerouslySetInnerHTML={{ __html: this.props.body }} />
+          <script src={link('/bundle.js')}/>
         </body>
       </html>
-    );
+    )
   }
 }
-Html.defaultProps = { body: "" };
+
+Html.defaultProps = { body: '' }
diff --git a/package.json b/package.json
index 8bc6c27..8c0e770 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,7 @@
   "description": "Starter Gatsby Blog",
   "main": "n/a",
   "scripts": {
+    "lint": "./node_modules/.bin/eslint --ext .js,.jsx --ignore-pattern public .",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {
@@ -27,7 +28,13 @@
     "react-dom": "^0.14.3",
     "react-responsive-grid": "^0.3.0",
     "react-router": "^0.13.5",
+    "safe-access": "^0.1.0",
     "typography": "^0.6.2",
     "underscore.string": "^3.2.2"
+  },
+  "devDependencies": {
+    "eslint": "^1.10.3",
+    "eslint-config-airbnb": "^5.0.1",
+    "eslint-plugin-react": "^4.0.0"
   }
 }
diff --git a/pages/_template.jsx b/pages/_template.jsx
index 8f13d4d..dd3706f 100644
--- a/pages/_template.jsx
+++ b/pages/_template.jsx
@@ -1,59 +1,65 @@
-import React from 'react';
-import { RouteHandler, Link } from 'react-router';
-import { Container, Grid, Breakpoint, Span } from 'react-responsive-grid';
-import { link } from 'gatsby-helpers';
+import React from 'react'
+import { RouteHandler, Link } from 'react-router'
+import { Container } from 'react-responsive-grid'
+import { link } from 'gatsby-helpers'
 import { rhythm, fontSizeToMS } from 'utils/typography'
+import { config } from 'config'
 
-import '../css/styles.css';
+import '../css/styles.css'
 
 export default class extends React.Component {
-  render() {
-    let header;
-    if (this.props.state.path === link('/')) {
+  propTypes () {
+    return {
+      route: React.PropTypes.object,
+    }
+  }
+  render () {
+    let header
+    if (this.props.route.path === link('/')) {
       header = (
         <h1
           style={{
             fontSize: fontSizeToMS(2.5).fontSize,
             lineHeight: fontSizeToMS(2.5).lineHeight,
-            marginBottom: rhythm(1.5)
+            marginBottom: rhythm(1.5),
           }}
         >
           <Link
             style={{
               textDecoration: 'none',
-              color: 'inherit'
+              color: 'inherit',
             }}
             to={link('/')}
           >
-            {this.props.config.blogTitle}
+            {config.blogTitle}
           </Link>
         </h1>
-      );
+      )
     } else {
       header = (
         <h3>
           <Link
             style={{
               textDecoration: 'none',
-              color: 'inherit'
+              color: 'inherit',
             }}
             to={link('/')}
           >
-            {this.props.config.blogTitle}
+            {config.blogTitle}
           </Link>
         </h3>
-      );
+      )
     }
     return (
       <Container
         style={{
           maxWidth: rhythm(24),
-          padding: `${rhythm(2)} ${rhythm(1/2)}`
+          padding: `${rhythm(2)} ${rhythm(1/2)}`,
         }}
       >
         {header}
         <RouteHandler {...this.props}/>
       </Container>
-    );
+    )
   }
 }
diff --git a/pages/index.jsx b/pages/index.jsx
index 52497fd..2157e59 100644
--- a/pages/index.jsx
+++ b/pages/index.jsx
@@ -1,45 +1,45 @@
-import React from 'react';
-import { RouteHandler, Link } from 'react-router';
-import sortBy from 'lodash/collection/sortBy';
-import DocumentTitle from 'react-document-title';
-import { link } from 'gatsby-helpers';
-import { rhythm, fontSizeToMS } from 'utils/typography'
+import React from 'react'
+import { Link } from 'react-router'
+import sortBy from 'lodash/sortBy'
+import DocumentTitle from 'react-document-title'
+import { link } from 'gatsby-helpers'
+import { rhythm } from 'utils/typography'
+import access from 'safe-access'
+import { config } from 'config'
 
 export default class extends React.Component {
-  static data() {
+  propTypes () {
     return {
-      yo: true
+      route: React.PropTypes.object,
     }
   }
-  render() {
-    let i, len, page, pageLinks, ref, ref1, ref2, title;
-    pageLinks = [];
-    ref = sortBy(this.props.pages, (page) => {
-      let ref;
-      return (ref = page.data) != null ? ref.date : void 0;
-    }).reverse();
-    for (i = 0, len = ref.length; i < len; i++) {
-      page = ref[i];
-      title = ((ref1 = page.data) != null ? ref1.title : void 0) || page.path;
-      if (page.path && page.path !== "/" && !((ref2 = page.data) != null ? ref2.draft : void 0)) {
+  render () {
+    const pageLinks = []
+    // Sort pages.
+    const sortedPages = sortBy(this.props.route.pages, (page) =>
+      access(page, 'data.date')
+    ).reverse()
+    sortedPages.forEach((page) => {
+      const title = access(page, 'data.title') || page.path
+      if (page.path && page.path !== '/' && access(page, 'file.extension') === '.md') {
         pageLinks.push(
           <li
             key={page.path}
             style={{
-              marginBottom: rhythm(1/4)
+              marginBottom: rhythm(1/4),
             }}
           >
             <Link to={link(page.path)}>{title}</Link>
           </li>
-        );
+        )
       }
-    }
+    })
     return (
-      <DocumentTitle title={this.props.config.blogTitle}>
+      <DocumentTitle title={config.blogTitle}>
         <div>
           <p
             style={{
-              marginBottom: rhythm(2.5)
+              marginBottom: rhythm(2.5),
             }}
           >
             <img
@@ -49,10 +49,10 @@ export default class extends React.Component {
                 marginRight: rhythm(1/4),
                 marginBottom: 0,
                 width: rhythm(2),
-                height: rhythm(2)
+                height: rhythm(2),
               }}
             />
-            Written by <strong>{this.props.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>{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>
           </p>
           <ul>
             {pageLinks}
diff --git a/utils/typography.js b/utils/typography.js
index 9f62b24..9fc33b7 100644
--- a/utils/typography.js
+++ b/utils/typography.js
@@ -1,19 +1,19 @@
-import Typography from 'typography';
+import Typography from 'typography'
 
 const options = {
   baseFontSize: '18px',
   baseLineHeight: '27px',
   modularScales: [
     {
-      "scale": "minor third"
-    }
-  ]
+      scale: 'minor third',
+    },
+  ],
 }
 
 const typography = new Typography(options)
 
 // Hot reload typography in development.
-if (process.env.NODE_ENV !== "production") {
+if (process.env.NODE_ENV !== 'production') {
   typography.injectStyles()
 }
 
diff --git a/wrappers/html.jsx b/wrappers/html.jsx
deleted file mode 100644
index 26cba1e..0000000
--- a/wrappers/html.jsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react';
-
-module.exports = React.createClass({
-  render: function() {
-    var html;
-    html = "<div>fix me</div>";
-    return (
-      <div dangerouslySetInnerHTML={{__html: html}}/>
-    );
-  }
-});
diff --git a/wrappers/md.jsx b/wrappers/md.jsx
index d4e468c..f8f0231 100644
--- a/wrappers/md.jsx
+++ b/wrappers/md.jsx
@@ -1,51 +1,56 @@
-import React from 'react';
-import moment from 'moment';
-import DocumentTitle from 'react-document-title';
-import { link } from 'gatsby-helpers';
-import ReadNext from '../components/ReadNext';
-import { rhythm, fontSizeToMS } from 'utils/typography'
+import React from 'react'
+import moment from 'moment'
+import DocumentTitle from 'react-document-title'
+import { link } from 'gatsby-helpers'
+import ReadNext from '../components/ReadNext'
+import { rhythm } from 'utils/typography'
+import { config } from 'config'
 
-import '../css/zenburn.css';
+import '../css/zenburn.css'
 
 module.exports = React.createClass({
-  render: function() {
-    var post
-    post = this.props.page.data;
+  propTypes () {
+    return {
+      route: React.PropTypes.object,
+    }
+  },
+  render () {
+    const post = this.props.route.page.data
 
     return (
-      <DocumentTitle title={`${post.title} | ${this.props.config.blogTitle}`}>
+      <DocumentTitle title={`${post.title} | ${config.blogTitle}`}>
         <div className="markdown">
           <h1>{post.title}</h1>
-          <div dangerouslySetInnerHTML={{__html: post.body}}/>
+          <div dangerouslySetInnerHTML={{ __html: post.body }}/>
           <em
             style={{
               display: 'block',
-              marginBottom: rhythm(2)
+              marginBottom: rhythm(2),
             }}
           >
             Posted {moment(post.date).format('MMMM D, YYYY')}
           </em>
           <hr
             style={{
-              marginBottom: rhythm(2)
+              marginBottom: rhythm(2),
             }}
           />
           <ReadNext post={post} {...this.props}/>
           <p>
             <img
-              src={link("/kyle-round-small-pantheon.jpg")}
+              src={link('/kyle-round-small-pantheon.jpg')}
               style={{
                 float: 'left',
                 marginRight: rhythm(1/4),
                 marginBottom: 0,
                 width: rhythm(2),
-                height: rhythm(2)
+                height: rhythm(2),
               }}
             />
             <strong>{this.props.config.authorName}</strong> lives and works in San Francisco building useful things. <a href="https://twitter.com/kylemathews">You should follow him on Twitter</a>
           </p>
         </div>
       </DocumentTitle>
-    );
-  }
-});
+    )
+  },
+})