diff --git a/app.coffee b/app.coffee
deleted file mode 100644
index f6f4d6780158d..0000000000000
--- a/app.coffee
+++ /dev/null
@@ -1,9 +0,0 @@
-exports.loadContext = (callback) ->
-  context = require.context './pages', true
-  if module.hot
-    module.hot.accept(context.id, ->
-      context = require.context './pages', true
-      callback context
-    )
-
-  callback context
diff --git a/app.js b/app.js
new file mode 100644
index 0000000000000..148e5fd58a30a
--- /dev/null
+++ b/app.js
@@ -0,0 +1,11 @@
+exports.loadContext = function(callback) {
+  var context;
+  context = require.context('./pages', true);
+  if (module.hot) {
+    module.hot.accept(context.id, function() {
+      context = require.context('./pages', true);
+      return callback(context);
+    });
+  }
+  return callback(context);
+};
diff --git a/components/ReadNext.cjsx b/components/ReadNext.cjsx
deleted file mode 100644
index 4d49aeb451db3..0000000000000
--- a/components/ReadNext.cjsx
+++ /dev/null
@@ -1,50 +0,0 @@
-React = require 'react'
-Router = require 'react-router'
-{Link} = Router
-prune = require 'underscore.string/prune'
-includes = require 'underscore.string/include'
-find = require 'lodash/collection/find'
-
-module.exports = React.createClass
-
-  render: ->
-    {rhythm, fontSizeToMS} = @props.typography
-    readNext = @props.post.readNext
-    if readNext?
-      nextPost = find @props.pages, (page) -> includes page.path, readNext.slice(1, -1)
-    unless nextPost
-      <noscript />
-    else
-      nextPost = find @props.pages, (page) -> includes page.path, readNext.slice(1, -1)
-
-      # Create prunned version of the body.
-      html = nextPost.data.body
-      body = prune(html.replace(/<[^>]*>/g, ''), 200)
-
-      <div>
-        <h6
-          style={{
-            margin: 0
-            fontSize: fontSizeToMS(-1).fontSize
-            lineHeight: fontSizeToMS(-1).lineHeight
-            letterSpacing: -0.5
-          }}
-        >
-          READ THIS NEXT:
-        </h6>
-        <h3
-          style={{
-            marginBottom: rhythm(1/4)
-          }}
-        >
-          <Link
-            to={nextPost.path}
-            query={{readNext: true}}
-          >
-            {nextPost.data.title}
-          </Link>
-        </h3>
-        <p>{body}</p>
-        <hr />
-      </div>
-
diff --git a/components/ReadNext.jsx b/components/ReadNext.jsx
new file mode 100644
index 0000000000000..5eac26ae428b9
--- /dev/null
+++ b/components/ReadNext.jsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import { Link } from 'react-router';
+import { prune, include as includes } from 'underscore.string';
+import find from 'lodash/collection/find';
+
+module.exports = React.createClass({
+  render: function() {
+    var body, fontSizeToMS, html, nextPost, readNext, ref, rhythm;
+    ref = this.props.typography, rhythm = ref.rhythm, fontSizeToMS = ref.fontSizeToMS;
+    readNext = this.props.post.readNext;
+    if (readNext != null) {
+      nextPost = find(this.props.pages, function(page) {
+        return includes(page.path, readNext.slice(1, -1));
+      });
+    }
+    if (!nextPost) {
+      return React.createElement("noscript", null);
+    } else {
+      nextPost = find(this.props.pages, function(page) {
+        return includes(page.path, readNext.slice(1, -1));
+      });
+      // Create pruned version of the body.
+      html = nextPost.data.body;
+      body = prune(html.replace(/<[^>]*>/g, ''), 200);
+
+      return (
+        <div>
+          <h6
+            style={{
+              margin: 0,
+              fontSize: fontSizeToMS(-1).fontSize,
+              lineHeight: fontSizeToMS(-1).lineHeight,
+              letterSpacing: -0.5
+            }}
+          >
+            READ THIS NEXT:
+          </h6>
+          <h3
+            style={{
+              marginBottom: rhythm(1/4)
+            }}
+          >
+            <Link
+              to={nextPost.path}
+              query={{readNext: true}}
+            >
+              {nextPost.data.title}
+            </Link>
+          </h3>
+          <p>{body}</p>
+          <hr />
+        </div>
+      );
+    }
+  }
+});
diff --git a/html.cjsx b/html.cjsx
deleted file mode 100644
index ef158c14f496b..0000000000000
--- a/html.cjsx
+++ /dev/null
@@ -1,49 +0,0 @@
-React = require 'react'
-Typography = require 'typography'
-DocumentTitle = require 'react-document-title'
-
-typography = new Typography()
-{TypographyStyle} = typography
-
-module.exports = React.createClass
-  getDefaultProps: ->
-    body: ""
-
-  render: ->
-    title = DocumentTitle.rewind()
-    if @props.title then title = @props.title
-
-    if __GH_PAGES__? and __GH_PAGES__
-      urlPrefix = @props.config.ghPagesURLPrefix
-    else
-      urlPrefix = ""
-
-    <html lang="en">
-      <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'/>
-        <title>{@props.title}</title>
-        <link rel="shortcut icon" href={@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;
-          }
-        """}}/>
-      </head>
-      <body className="landing-page">
-        <div id="react-mount" dangerouslySetInnerHTML={{__html: @props.body}} />
-        <script src={urlPrefix + "/bundle.js"}/>
-      </body>
-    </html>
diff --git a/html.jsx b/html.jsx
new file mode 100644
index 0000000000000..3552b2d03562f
--- /dev/null
+++ b/html.jsx
@@ -0,0 +1,61 @@
+import React from 'react';
+import Typography from 'typography';
+import DocumentTitle from 'react-document-title';
+
+var TypographyStyle = new Typography().TypographyStyle;
+
+module.exports = React.createClass({
+  getDefaultProps: function() {
+    return {
+      body: ""
+    };
+  },
+
+  render: function() {
+    var title, urlPrefix;
+    title = DocumentTitle.rewind();
+    if (this.props.title) {
+      title = this.props.title;
+    }
+    if ((typeof __GH_PAGES__ !== "undefined" && __GH_PAGES__ !== null) && __GH_PAGES__) {
+      urlPrefix = this.props.config.ghPagesURLPrefix;
+    } else {
+      urlPrefix = "";
+    }
+
+    return (
+      <html lang="en">
+        <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'/>
+          <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;
+              }
+            `
+          }}/>
+        </head>
+        <body className="landing-page">
+          <div id="react-mount" dangerouslySetInnerHTML={{__html: this.props.body}} />
+          <script src={urlPrefix + "/bundle.js"}/>
+        </body>
+      </html>
+    );
+
+  }
+});
diff --git a/pages/_template.cjsx b/pages/_template.cjsx
deleted file mode 100644
index 4afd57ac31405..0000000000000
--- a/pages/_template.cjsx
+++ /dev/null
@@ -1,58 +0,0 @@
-React = require 'react'
-Router = require 'react-router'
-{RouteHandler, Link} = Router
-{Container, Grid, Breakpoint, Span} = require 'react-responsive-grid'
-Typography = require 'typography'
-require '../css/styles.css'
-{link} = require 'gatsby-helpers'
-
-typography = Typography()
-{rhythm, fontSizeToMS} = typography
-
-module.exports = React.createClass
-  render: ->
-    if @props.state.path is link('/')
-      header = (
-        <h1
-          style={{
-            fontSize: fontSizeToMS(2.5).fontSize
-            lineHeight: fontSizeToMS(2.5).lineHeight
-            marginBottom: rhythm(1.5)
-          }}
-        >
-          <Link
-            style={{
-              textDecoration: 'none'
-              color: 'inherit'
-            }}
-            to={link('/')}
-          >
-            {@props.config.blogTitle}
-          </Link>
-        </h1>
-      )
-    else
-      header = (
-        <h3>
-          <Link
-            style={{
-              textDecoration: 'none'
-              color: 'inherit'
-            }}
-            to={link('/')}
-          >
-            {@props.config.blogTitle}
-          </Link>
-        </h3>
-      )
-
-    <Container
-      style={{
-        maxWidth: rhythm(24)
-        padding: "#{rhythm(2)} #{rhythm(1/2)}"
-      }}
-    >
-      {header}
-      <RouteHandler typography={typography} {...@props}/>
-    </Container>
-
diff --git a/pages/_template.jsx b/pages/_template.jsx
new file mode 100644
index 0000000000000..9bd5deec2b0e5
--- /dev/null
+++ b/pages/_template.jsx
@@ -0,0 +1,62 @@
+import React from 'react';
+import { RouteHandler, Link } from 'react-router';
+import { Container, Grid, Breakpoint, Span } from 'react-responsive-grid';
+import Typography from 'typography';
+import { link } from 'gatsby-helpers';
+
+var typography = new Typography();
+var rhythm = typography.rhythm, fontSizeToMS = typography.fontSizeToMS;
+
+import '../css/styles.css';
+
+module.exports = React.createClass({
+  render: function() {
+    var header;
+    if (this.props.state.path === link('/')) {
+      header = (
+        <h1
+          style={{
+            fontSize: fontSizeToMS(2.5).fontSize,
+            lineHeight: fontSizeToMS(2.5).lineHeight,
+            marginBottom: rhythm(1.5)
+          }}
+        >
+          <Link
+            style={{
+              textDecoration: 'none',
+              color: 'inherit'
+            }}
+            to={link('/')}
+          >
+            {this.props.config.blogTitle}
+          </Link>
+        </h1>
+      );
+    } else {
+      header = (
+        <h3>
+          <Link
+            style={{
+              textDecoration: 'none',
+              color: 'inherit'
+            }}
+            to={link('/')}
+          >
+            {this.props.config.blogTitle}
+          </Link>
+        </h3>
+      );
+    }
+    return (
+      <Container
+        style={{
+          maxWidth: rhythm(24),
+          padding: `${rhythm(2)} ${rhythm(1/2)}`
+        }}
+      >
+        {header}
+        <RouteHandler typography={typography} {...this.props}/>
+      </Container>
+    );
+  }
+});
diff --git a/pages/index.cjsx b/pages/index.cjsx
deleted file mode 100644
index 1cba76e436b99..0000000000000
--- a/pages/index.cjsx
+++ /dev/null
@@ -1,53 +0,0 @@
-React = require 'react'
-Router = require 'react-router'
-{RouteHandler, Link} = Router
-sortBy = require 'lodash/collection/sortBy'
-DocumentTitle = require 'react-document-title'
-{link} = require 'gatsby-helpers'
-
-module.exports = React.createClass
-  statics:
-    data: ->
-      yo: true
-
-  render: ->
-    {rhythm} = @props.typography
-    pageLinks = []
-    for page in sortBy(@props.pages, (page) -> page.data?.date).reverse()
-      title = page.data?.title || page.path
-      if page.path isnt link("/") and not page.data?.draft
-        pageLinks.push (
-          <li
-            key={page.path}
-            style={{
-              marginBottom: rhythm(1/4)
-            }}
-          >
-            <Link to={page.path}>{title}</Link>
-          </li>
-        )
-
-    <DocumentTitle title="#{@props.config.blogTitle}">
-      <div>
-        <p
-          style={{
-            marginBottom: rhythm(2.5)
-          }}
-        >
-          <img
-            src="./kyle-round-small-pantheon.jpg"
-            style={{
-              float: 'left'
-              marginRight: rhythm(1/4)
-              marginBottom: 0
-              width: rhythm(2)
-              height: rhythm(2)
-            }}
-          />
-          Written by <strong>{@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>
-        </p>
-        <ul>
-          {pageLinks}
-        </ul>
-      </div>
-    </DocumentTitle>
diff --git a/pages/index.jsx b/pages/index.jsx
new file mode 100644
index 0000000000000..a883443870576
--- /dev/null
+++ b/pages/index.jsx
@@ -0,0 +1,66 @@
+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';
+
+module.exports = React.createClass({
+  statics: {
+    data: function() {
+      return {
+        yo: true
+      };
+    }
+  },
+  render: function() {
+    var i, len, page, pageLinks, ref, ref1, ref2, rhythm, title;
+    rhythm = this.props.typography.rhythm;
+    pageLinks = [];
+    ref = sortBy(this.props.pages, function(page) {
+      var 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 !== link("/") && !((ref2 = page.data) != null ? ref2.draft : void 0)) {
+        pageLinks.push(
+          <li
+            key={page.path}
+            style={{
+              marginBottom: rhythm(1/4)
+            }}
+          >
+            <Link to={page.path}>{title}</Link>
+          </li>
+        );
+      }
+    }
+    return (
+      <DocumentTitle title={this.props.config.blogTitle}>
+        <div>
+          <p
+            style={{
+              marginBottom: rhythm(2.5)
+            }}
+          >
+            <img
+              src="./kyle-round-small-pantheon.jpg"
+              style={{
+                float: 'left',
+                marginRight: rhythm(1/4),
+                marginBottom: 0,
+                width: 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>
+          </p>
+          <ul>
+            {pageLinks}
+          </ul>
+        </div>
+      </DocumentTitle>
+    );
+  }
+});
diff --git a/wrappers/html.cjsx b/wrappers/html.cjsx
deleted file mode 100644
index 2f683880b0b67..0000000000000
--- a/wrappers/html.cjsx
+++ /dev/null
@@ -1,11 +0,0 @@
-React = require 'react'
-
-module.exports = React.createClass
-  displayName: "HTMLWrapper"
-
-  render: ->
-    #html = require "../" + @props.page.requirePath
-    console.log @props
-    html = "<div>fix me</div>"
-    <div dangerouslySetInnerHTML={{__html: html}}/>
-
diff --git a/wrappers/html.jsx b/wrappers/html.jsx
new file mode 100644
index 0000000000000..26cba1edaad0b
--- /dev/null
+++ b/wrappers/html.jsx
@@ -0,0 +1,11 @@
+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.cjsx b/wrappers/md.cjsx
deleted file mode 100644
index bdedb021003a6..0000000000000
--- a/wrappers/md.cjsx
+++ /dev/null
@@ -1,48 +0,0 @@
-React = require 'react'
-require '../css/zenburn.css'
-moment = require 'moment'
-DocumentTitle = require 'react-document-title'
-{link} = require 'gatsby-helpers'
-
-ReadNext = require '../components/ReadNext'
-
-module.exports = React.createClass
-  displayName: "MarkdownWrapper"
-
-  render: ->
-    {rhythm} = @props.typography
-    post = @props.page.data
-
-    <DocumentTitle title="#{post.title} | #{@props.config.blogTitle}">
-      <div className="markdown">
-        <h1>{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} {...@props}/>
-        <p>
-          <img
-            src={link("/kyle-round-small-pantheon.jpg")}
-            style={{
-              float: 'left'
-              marginRight: rhythm(1/4)
-              marginBottom: 0
-              width: rhythm(2)
-              height: rhythm(2)
-            }}
-          />
-          <strong>{@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>
diff --git a/wrappers/md.jsx b/wrappers/md.jsx
new file mode 100644
index 0000000000000..547488e2b9c6e
--- /dev/null
+++ b/wrappers/md.jsx
@@ -0,0 +1,51 @@
+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 '../css/zenburn.css';
+
+module.exports = React.createClass({
+  render: function() {
+    var post, rhythm;
+    rhythm = this.props.typography.rhythm;
+    post = this.props.page.data;
+
+    return (
+      <DocumentTitle title={`${post.title} | ${this.props.config.blogTitle}`}>
+        <div className="markdown">
+          <h1>{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} {...this.props}/>
+          <p>
+            <img
+              src={link("/kyle-round-small-pantheon.jpg")}
+              style={{
+                float: 'left',
+                marginRight: rhythm(1/4),
+                marginBottom: 0,
+                width: 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>
+    );
+  }
+});