diff --git a/scripts/home.js b/scripts/home.js
new file mode 100644
index 0000000000..29e83b3651
--- /dev/null
+++ b/scripts/home.js
@@ -0,0 +1,8 @@
+const React = require('react');
+const ReactDOM = require('react-dom');
+
+ReactDOM.render((
+  <div className="home-page">
+    首页坑位
+  </div>
+), document.getElementById('home-container'));
diff --git a/site/static/script.js b/site/static/script.js
index 4e24a7d440..7d8b972dc6 100644
--- a/site/static/script.js
+++ b/site/static/script.js
@@ -68,7 +68,7 @@ InstantClickChangeFns.push(function() {
       }
       i--;
       i = (i < 0) ? 0 : i;
-      i = (i > titles.length - 1) ? (title.length - 1) : i;
+      i = (i > titles.length - 1) ? (titles.length - 1) : i;
     }
     $('.anchor a').removeClass('current');
     $('.anchor a').eq(i).addClass('current');
diff --git a/site/templates/home.html b/site/templates/home.html
index aed819ef97..56e14029fc 100644
--- a/site/templates/home.html
+++ b/site/templates/home.html
@@ -1,39 +1,15 @@
 {% extends "layout.html" %}
 
-{% block styles %}
-<link href="http://fonts.useso.com/css?family=Raleway:600,500,400,300" rel="stylesheet" type="text/css">
-{% endblock %}
-
 {% block bodyAttribute %}class="index-page"{% endblock %}
 
 {% block content %}
-<div class="main-box" id="main">
-  <div class="banner-box">
-    <div id="bannerAnim"></div>
-    <div class="banner-entry fn-hide">
-      <div class="entry-title">Ant</div>
-      <div class="entry-title">Design</div>
-      <div class="entry-slogan">
-        {{ config.site.description }}
-      </div>
-      <a class="entry-link" href="{{static_url('../spec/introduce')}}">
-        <i class="anticon anticon-smile"></i>
-        开始探索
-      </a>
-    </div>
-    <div class="banner-img fn-alpha-out"></div>
-  </div>
-</div>
-<script src="{{static_url('homeLoad.js')}}"></script>
+<div id="home-container"></div>
+<script src="{{static_url('../dist/home.js')}}"></script>
 <style>
-.main-wrapper {
-  overflow: hidden;
-  position: relative;
-  height: calc(100% - 190px);
-  min-height: 500px;
-  background: #fff;
-  transform-style: preserve-3d;
-  transition: transform .6s cubic-bezier(0.785, 0.135, 0.15, 0.86), height .5s ease-out;
+.home-page {
+  text-align: center;
+  min-height: 560px;
+  padding-top: 200px;
 }
 </style>
 {% endblock %}
diff --git a/webpack.config.js b/webpack.config.js
index 4a3a9d5cf1..1e1d2fe777 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -6,6 +6,7 @@ var pkg = require('./package');
 var entry = {};
 entry['index'] = './scripts/importCss.js';
 entry['demo'] = './scripts/demo.js';
+entry['home'] = './scripts/home.js';
 
 module.exports = {
   entry: entry,