diff --git a/.cobalt.yml b/.cobalt.yml
deleted file mode 100644
index 3dc7db5..0000000
--- a/.cobalt.yml
+++ /dev/null
@@ -1,6 +0,0 @@
-name: Actix-web framework
-source: "."
-dest: "build"
-ignore:
-  - .git/*
-  - build/*
diff --git a/_cobalt.yml b/_cobalt.yml
new file mode 100644
index 0000000..f00fab3
--- /dev/null
+++ b/_cobalt.yml
@@ -0,0 +1,39 @@
+# Build options
+source: "."
+template_extensions:
+  - md
+  - liquid
+include_drafts: false
+ignore:
+  - .git/*
+  - build/*
+  - README.md
+destination: _site
+
+# Site options
+site: 
+  title: ~
+  description: ~
+  base_url: ~
+  data: ~
+
+# Page/Post options
+default:
+  excerpt_separator: "\n\n"
+  is_draft: false
+syntax_highlight:
+  theme: "base16-ocean.dark"
+assets:
+  sass:
+    style: Nested
+pages:
+  default: {}
+posts:
+  title: ~
+  description: ~
+  dir: posts
+  drafts_dir: _drafts
+  order: Desc
+  rss: ~
+  jsonfeed: ~
+  default: {}
\ No newline at end of file
diff --git a/_includes/head.liquid b/_includes/head.liquid
index 5701a53..5d69d0b 100644
--- a/_includes/head.liquid
+++ b/_includes/head.liquid
@@ -1,7 +1,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1", maximum-scale=1,user-scalable=no,shrink-to-fit=no">
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <title>{{ title }}</title>
+<title>{{ page.title }}</title>
 <link rel="shortcut icon" href="/public/imgs/favicon.ico">
 <link rel="stylesheet" href="/public/css/styles.css">
 <script src="/public/js/nav.js" async="async"></script>
diff --git a/_includes/header.liquid b/_includes/header.liquid
index f049c95..8c3b991 100644
--- a/_includes/header.liquid
+++ b/_includes/header.liquid
@@ -5,10 +5,10 @@
         <label ><a href="#" id="menu">menu</a></label>
       </div>
       <div id="rnav">
-          <li> <a href="/tutorials" title="tutorials">Tutorials</a></li>
+          <li> <a href="/tutorials.html" title="tutorials">Tutorials</a></li>
           <li> <a href="/docs" title="docs">Docs</a></li>
           <li> <a href="/blog" title="blog">Blog</a></li>
-          <li> <a href="/community" title="community">Community</a></li>
-          <li> <a href="/more" title="github">More</a></li>
+          <li> <a href="/community.html" title="community">Community</a></li>
+          <li> <a href="/more.html" title="github">More</a></li>
       </div> 
   </div>
diff --git a/_layouts/blog.liquid b/_layouts/blog.liquid
index b8acad2..d9dbc1e 100644
--- a/_layouts/blog.liquid
+++ b/_layouts/blog.liquid
@@ -13,12 +13,12 @@
           <aside>
             <p>2018</p>
             <ul>
-              <li><a {%if route == "Blog-example"%}class="active"{%endif%} href="/blog/Blog-example.html">Blog Example</a></li>
+              <li><a {%if page.permalink == "Blog-example"%}class="active"{%endif%} href="/blog/Blog-example.html">Blog Example</a></li>
             </ul>
           </aside>
           <hr id="hr">
           <main>
-          {{ content }}
+          {{ page.content }}
           </main>
         </div>
       </section>
diff --git a/_layouts/default.liquid b/_layouts/default.liquid
index 3baaad7..8a52c9d 100644
--- a/_layouts/default.liquid
+++ b/_layouts/default.liquid
@@ -8,7 +8,7 @@
       {% include "header.liquid" %}
     </header>
     <main>
-      {{ content }}
+      {{ page.content }}
     </main>
     <footer>
       {% include "footer.liquid" %}
diff --git a/_layouts/docs.liquid b/_layouts/docs.liquid
index a761d3e..dfb4872 100644
--- a/_layouts/docs.liquid
+++ b/_layouts/docs.liquid
@@ -13,24 +13,24 @@
           <aside>
             <p>Basics</p>
             <ul>
-              <li><a {%if route == "Basics-example"%}class="active"{%endif%} href="/docs/Basics-example.html">Basics Example</a></li>
+              <li><a {%if page.permalink == "Basics-example"%}class="active"{%endif%} href="/docs/Basics-example.html">Basics Example</a></li>
             </ul>
             <p>Reference</p>
             <ul>
-              <li><a {%if route == "Reference-example"%}class="active"{%endif%} href="/docs/Reference-example.html">Reference Example</a></li>
+              <li><a {%if page.permalink == "Reference-example"%}class="active"{%endif%} href="/docs/Reference-example.html">Reference Example</a></li>
             </ul>
             <p>Advance</p>
             <ul>
-              <li><a {%if route == "Advance-example"%}class="active"{%endif%} href="/docs/Advance-example.html">Advance Example</a></li>
+              <li><a {%if page.permalink == "Advance-example"%}class="active"{%endif%} href="/docs/Advance-example.html">Advance Example</a></li>
             </ul>
             <p>Misc</p>
             <ul>
-              <li><a {%if route == "Misc-example"%}class="active"{%endif%} href="/docs/Misc-example.html">Misc Example</a></li>
+              <li><a {%if page.permalink == "Misc-example"%}class="active"{%endif%} href="/docs/Misc-example.html">Misc Example</a></li>
             </ul>
           </aside>
           <hr id="hr">
           <main>
-          {{ content }}
+          {{ page.content }}
           </main>
         </div>
       </section>
diff --git a/_site/LICENSE b/_site/LICENSE
new file mode 100644
index 0000000..6cdf2d1
--- /dev/null
+++ b/_site/LICENSE
@@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "{}"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright 2017-NOW Nikolay Kim
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
diff --git a/_site/blog/2018/Basics-example.html b/_site/blog/2018/Basics-example.html
new file mode 100644
index 0000000..cacd888
--- /dev/null
+++ b/_site/blog/2018/Basics-example.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1", maximum-scale=1,user-scalable=no,shrink-to-fit=no">
+<meta charset="utf-8">
+<meta http-equiv="X-UA-Compatible" content="IE=edge">
+<title>Blog::Blog Example</title>
+<link rel="shortcut icon" href="/public/imgs/favicon.ico">
+<link rel="stylesheet" href="/public/css/styles.css">
+<script src="/public/js/nav.js" async="async"></script>
+
+  </head>
+  <body>
+    <header>
+        <div id="mnav">
+      <div id="lnav">
+        <div id="line"></div>
+        <h1><a href="/"><img src="/public/imgs/ACTIX.png"/></a><a id="home" href="/">Actix</a></h1>
+        <label ><a href="#" id="menu">menu</a></label>
+      </div>
+      <div id="rnav">
+          <li> <a href="/tutorials.html" title="tutorials">Tutorials</a></li>
+          <li> <a href="/docs" title="docs">Docs</a></li>
+          <li> <a href="/blog" title="blog">Blog</a></li>
+          <li> <a href="/community.html" title="community">Community</a></li>
+          <li> <a href="/more.html" title="github">More</a></li>
+      </div> 
+  </div>
+
+    </header>
+    <main>
+      <section class="docs">
+        <div class="inner">
+          <aside>
+            <p>2018</p>
+            <ul>
+              <li><a  href="/blog/Blog-example.html">Blog Example</a></li>
+            </ul>
+          </aside>
+          <hr id="hr">
+          <main>
+          <h2>Basics Example</h2>
+<p>The words is comming.</p>
+
+          </main>
+        </div>
+      </section>
+    </main>
+    <footer>
+      <div >
+  <p>Made ❤️  by the <a href="https://cobalt-org.github.io/">Cobalt</a> with the <a href="https://github.com/actix/actix-website">Actix</a> theme</p>
+</div>
+
+    </footer>
+  </body>
+</html>
diff --git a/_site/blog/index.html b/_site/blog/index.html
new file mode 100644
index 0000000..5bd7207
--- /dev/null
+++ b/_site/blog/index.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1", maximum-scale=1,user-scalable=no,shrink-to-fit=no">
+<meta charset="utf-8">
+<meta http-equiv="X-UA-Compatible" content="IE=edge">
+<title>Blog</title>
+<link rel="shortcut icon" href="/public/imgs/favicon.ico">
+<link rel="stylesheet" href="/public/css/styles.css">
+<script src="/public/js/nav.js" async="async"></script>
+
+  </head>
+  <body>
+    <header>
+        <div id="mnav">
+      <div id="lnav">
+        <div id="line"></div>
+        <h1><a href="/"><img src="/public/imgs/ACTIX.png"/></a><a id="home" href="/">Actix</a></h1>
+        <label ><a href="#" id="menu">menu</a></label>
+      </div>
+      <div id="rnav">
+          <li> <a href="/tutorials.html" title="tutorials">Tutorials</a></li>
+          <li> <a href="/docs" title="docs">Docs</a></li>
+          <li> <a href="/blog" title="blog">Blog</a></li>
+          <li> <a href="/community.html" title="community">Community</a></li>
+          <li> <a href="/more.html" title="github">More</a></li>
+      </div> 
+  </div>
+
+    </header>
+    <main>
+      <section class="docs">
+        <div class="inner">
+          <aside>
+            <p>2018</p>
+            <ul>
+              <li><a  href="/blog/Blog-example.html">Blog Example</a></li>
+            </ul>
+          </aside>
+          <hr id="hr">
+          <main>
+          <h2>Documentation</h2>
+<p>Welcome to the Actix-web Blog!</p>
+<p>If you feel like contributing further, you can fork that repo,
+branch from <code>source</code>, and submit a pull request.</p>
+<p>Contributions are always welcome!</p>
+
+          </main>
+        </div>
+      </section>
+    </main>
+    <footer>
+      <div >
+  <p>Made ❤️  by the <a href="https://cobalt-org.github.io/">Cobalt</a> with the <a href="https://github.com/actix/actix-website">Actix</a> theme</p>
+</div>
+
+    </footer>
+  </body>
+</html>
diff --git a/_site/community.html b/_site/community.html
new file mode 100644
index 0000000..0478f6a
--- /dev/null
+++ b/_site/community.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1", maximum-scale=1,user-scalable=no,shrink-to-fit=no">
+<meta charset="utf-8">
+<meta http-equiv="X-UA-Compatible" content="IE=edge">
+<title>Community</title>
+<link rel="shortcut icon" href="/public/imgs/favicon.ico">
+<link rel="stylesheet" href="/public/css/styles.css">
+<script src="/public/js/nav.js" async="async"></script>
+
+  </head>
+  <body>
+    <header>
+        <div id="mnav">
+      <div id="lnav">
+        <div id="line"></div>
+        <h1><a href="/"><img src="/public/imgs/ACTIX.png"/></a><a id="home" href="/">Actix</a></h1>
+        <label ><a href="#" id="menu">menu</a></label>
+      </div>
+      <div id="rnav">
+          <li> <a href="/tutorials.html" title="tutorials">Tutorials</a></li>
+          <li> <a href="/docs" title="docs">Docs</a></li>
+          <li> <a href="/blog" title="blog">Blog</a></li>
+          <li> <a href="/community.html" title="community">Community</a></li>
+          <li> <a href="/more.html" title="github">More</a></li>
+      </div> 
+  </div>
+
+    </header>
+    <main>
+      <section >
+<div >
+<h2>Examples</h2>
+<p>The words is comming.</p>
+</div>
+</section>
+
+    </main>
+    <footer>
+      <div >
+  <p>Made ❤️  by the <a href="https://cobalt-org.github.io/">Cobalt</a> with the <a href="https://github.com/actix/actix-website">Actix</a> theme</p>
+</div>
+
+    </footer>
+  </body>
+</html>
diff --git a/_site/docs/Basics/Basics-example.html b/_site/docs/Basics/Basics-example.html
new file mode 100644
index 0000000..e0fee7d
--- /dev/null
+++ b/_site/docs/Basics/Basics-example.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1", maximum-scale=1,user-scalable=no,shrink-to-fit=no">
+<meta charset="utf-8">
+<meta http-equiv="X-UA-Compatible" content="IE=edge">
+<title>Docs::Basics Example</title>
+<link rel="shortcut icon" href="/public/imgs/favicon.ico">
+<link rel="stylesheet" href="/public/css/styles.css">
+<script src="/public/js/nav.js" async="async"></script>
+
+  </head>
+  <body>
+    <header>
+        <div id="mnav">
+      <div id="lnav">
+        <div id="line"></div>
+        <h1><a href="/"><img src="/public/imgs/ACTIX.png"/></a><a id="home" href="/">Actix</a></h1>
+        <label ><a href="#" id="menu">menu</a></label>
+      </div>
+      <div id="rnav">
+          <li> <a href="/tutorials.html" title="tutorials">Tutorials</a></li>
+          <li> <a href="/docs" title="docs">Docs</a></li>
+          <li> <a href="/blog" title="blog">Blog</a></li>
+          <li> <a href="/community.html" title="community">Community</a></li>
+          <li> <a href="/more.html" title="github">More</a></li>
+      </div> 
+  </div>
+
+    </header>
+    <main>
+      <section class="blog">
+        <div class="inner">
+          <aside>
+            <p>Basics</p>
+            <ul>
+              <li><a  href="/docs/Basics-example.html">Basics Example</a></li>
+            </ul>
+            <p>Reference</p>
+            <ul>
+              <li><a  href="/docs/Reference-example.html">Reference Example</a></li>
+            </ul>
+            <p>Advance</p>
+            <ul>
+              <li><a  href="/docs/Advance-example.html">Advance Example</a></li>
+            </ul>
+            <p>Misc</p>
+            <ul>
+              <li><a  href="/docs/Misc-example.html">Misc Example</a></li>
+            </ul>
+          </aside>
+          <hr id="hr">
+          <main>
+          <h2>Basics Example</h2>
+<p>The words is comming.</p>
+
+          </main>
+        </div>
+      </section>
+    </main>
+    <footer>
+      <div >
+  <p>Made ❤️  by the <a href="https://cobalt-org.github.io/">Cobalt</a> with the <a href="https://github.com/actix/actix-website">Actix</a> theme</p>
+</div>
+
+    </footer>
+  </body>
+</html>
diff --git a/_site/docs/index.html b/_site/docs/index.html
new file mode 100644
index 0000000..2245e83
--- /dev/null
+++ b/_site/docs/index.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1", maximum-scale=1,user-scalable=no,shrink-to-fit=no">
+<meta charset="utf-8">
+<meta http-equiv="X-UA-Compatible" content="IE=edge">
+<title>Docs</title>
+<link rel="shortcut icon" href="/public/imgs/favicon.ico">
+<link rel="stylesheet" href="/public/css/styles.css">
+<script src="/public/js/nav.js" async="async"></script>
+
+  </head>
+  <body>
+    <header>
+        <div id="mnav">
+      <div id="lnav">
+        <div id="line"></div>
+        <h1><a href="/"><img src="/public/imgs/ACTIX.png"/></a><a id="home" href="/">Actix</a></h1>
+        <label ><a href="#" id="menu">menu</a></label>
+      </div>
+      <div id="rnav">
+          <li> <a href="/tutorials.html" title="tutorials">Tutorials</a></li>
+          <li> <a href="/docs" title="docs">Docs</a></li>
+          <li> <a href="/blog" title="blog">Blog</a></li>
+          <li> <a href="/community.html" title="community">Community</a></li>
+          <li> <a href="/more.html" title="github">More</a></li>
+      </div> 
+  </div>
+
+    </header>
+    <main>
+      <section class="blog">
+        <div class="inner">
+          <aside>
+            <p>Basics</p>
+            <ul>
+              <li><a  href="/docs/Basics-example.html">Basics Example</a></li>
+            </ul>
+            <p>Reference</p>
+            <ul>
+              <li><a  href="/docs/Reference-example.html">Reference Example</a></li>
+            </ul>
+            <p>Advance</p>
+            <ul>
+              <li><a  href="/docs/Advance-example.html">Advance Example</a></li>
+            </ul>
+            <p>Misc</p>
+            <ul>
+              <li><a  href="/docs/Misc-example.html">Misc Example</a></li>
+            </ul>
+          </aside>
+          <hr id="hr">
+          <main>
+          <h2>Documentation</h2>
+<p>Welcome to the Actix-web docs!</p>
+<p>If you feel like contributing further, you can fork that repo,
+branch from <code>source</code>, and submit a pull request.</p>
+<p>Contributions are always welcome!</p>
+
+          </main>
+        </div>
+      </section>
+    </main>
+    <footer>
+      <div >
+  <p>Made ❤️  by the <a href="https://cobalt-org.github.io/">Cobalt</a> with the <a href="https://github.com/actix/actix-website">Actix</a> theme</p>
+</div>
+
+    </footer>
+  </body>
+</html>
diff --git a/_site/index.html b/_site/index.html
new file mode 100644
index 0000000..15516e1
--- /dev/null
+++ b/_site/index.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1", maximum-scale=1,user-scalable=no,shrink-to-fit=no">
+<meta charset="utf-8">
+<meta http-equiv="X-UA-Compatible" content="IE=edge">
+<title>Actix-web framework</title>
+<link rel="shortcut icon" href="/public/imgs/favicon.ico">
+<link rel="stylesheet" href="/public/css/styles.css">
+<script src="/public/js/nav.js" async="async"></script>
+
+  </head>
+  <body>
+    <header>
+        <div id="mnav">
+      <div id="lnav">
+        <div id="line"></div>
+        <h1><a href="/"><img src="/public/imgs/ACTIX.png"/></a><a id="home" href="/">Actix</a></h1>
+        <label ><a href="#" id="menu">menu</a></label>
+      </div>
+      <div id="rnav">
+          <li> <a href="/tutorials.html" title="tutorials">Tutorials</a></li>
+          <li> <a href="/docs" title="docs">Docs</a></li>
+          <li> <a href="/blog" title="blog">Blog</a></li>
+          <li> <a href="/community.html" title="community">Community</a></li>
+          <li> <a href="/more.html" title="github">More</a></li>
+      </div> 
+  </div>
+
+    </header>
+    <main>
+      <section class="introduction">
+  <div>
+    <div id="top">
+      <h1>Actix-web framework</h1>
+      <p>Actix-web is a fast, down-to-earth, open source rust web framework.</p>
+      <div>
+        <button><a href="/tutorials.html" >Start</a></button>
+        <button><a href="/docs" >Learn</a></button>
+      </div>
+    </div>
+    <div id="Features">
+      <div id="feature" class="columns three">
+        <article>
+          <h3>Type Safe</h3>
+          <p>The words is comming.</p>
+        </article>
+        <article>
+          <h3>Stability</h3>
+          <p>The words is comming.</p>
+        </article>
+        <article>
+          <h3>Extensible</h3>
+          <p>The words is comming.</p>
+        </article>
+      </div>
+      <div id="feature" class="columns three">
+        <article>
+          <h3>Easy To Use</h3>
+          <p>The words is comming.</p>
+        </article>
+        <article>
+          <h3>Blazingly Fast</h3>
+          <p>The words is comming.</p>
+        </article>
+        <article>
+          <h3>Async Everything</h3>
+          <p>The words is comming.</p>
+        </article>
+      </div>
+      <div id="feature" class="columns three">
+        <article>
+          <h3>WebSockets</h3>
+          <p>The words is comming.</p>
+        </article>
+        <article>
+          <h3>Streaming and pipelining</h3>
+          <p>The words is comming.</p>
+        </article>
+        <article>
+          <h3>HTTP/1.x and HTTP/2.0</h3>
+          <p>The words is comming.</p>
+        </article>
+      </div>
+    </div>
+  </div>
+</section>
+
+    </main>
+    <footer>
+      <div >
+  <p>Made ❤️  by the <a href="https://cobalt-org.github.io/">Cobalt</a> with the <a href="https://github.com/actix/actix-website">Actix</a> theme</p>
+</div>
+
+    </footer>
+  </body>
+</html>
diff --git a/_site/more.html b/_site/more.html
new file mode 100644
index 0000000..107ec17
--- /dev/null
+++ b/_site/more.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1", maximum-scale=1,user-scalable=no,shrink-to-fit=no">
+<meta charset="utf-8">
+<meta http-equiv="X-UA-Compatible" content="IE=edge">
+<title>More</title>
+<link rel="shortcut icon" href="/public/imgs/favicon.ico">
+<link rel="stylesheet" href="/public/css/styles.css">
+<script src="/public/js/nav.js" async="async"></script>
+
+  </head>
+  <body>
+    <header>
+        <div id="mnav">
+      <div id="lnav">
+        <div id="line"></div>
+        <h1><a href="/"><img src="/public/imgs/ACTIX.png"/></a><a id="home" href="/">Actix</a></h1>
+        <label ><a href="#" id="menu">menu</a></label>
+      </div>
+      <div id="rnav">
+          <li> <a href="/tutorials.html" title="tutorials">Tutorials</a></li>
+          <li> <a href="/docs" title="docs">Docs</a></li>
+          <li> <a href="/blog" title="blog">Blog</a></li>
+          <li> <a href="/community.html" title="community">Community</a></li>
+          <li> <a href="/more.html" title="github">More</a></li>
+      </div> 
+  </div>
+
+    </header>
+    <main>
+      <section >
+<div >
+<h2>Examples</h2>
+<p>The words is comming.</p>
+</div>
+</section>
+    </main>
+    <footer>
+      <div >
+  <p>Made ❤️  by the <a href="https://cobalt-org.github.io/">Cobalt</a> with the <a href="https://github.com/actix/actix-website">Actix</a> theme</p>
+</div>
+
+    </footer>
+  </body>
+</html>
diff --git a/_site/public/css/styles.css b/_site/public/css/styles.css
new file mode 100644
index 0000000..217778b
--- /dev/null
+++ b/_site/public/css/styles.css
@@ -0,0 +1,325 @@
+:root {
+  --grey:  #f5f5f5;
+  --black: #000;
+  --white: #fff;
+  --new: rgb(82, 29, 79);
+  --font-stack: helvetica, arial, sans-serif;
+}
+
+*, *:before, *:after {
+  box-sizing: border-box;
+  padding:0px; margin:0px;
+}
+
+body {
+  font-family: var(--font-stack);
+  line-height: 1.4rem;
+}
+
+a {
+  color: var(--black);
+  text-decoration: none;
+}
+a:hover { color: var(--new) ;text-decoration:none; }
+
+ul, ol, li {
+  list-style: none;
+}
+
+/* ----------------------------------------nav----------------------------------------*/
+#lnav {
+  position: fixed;
+  width: 100%;
+  line-height: 60px;
+  zoom:1;
+  display: flex;
+  background-color: white;
+  justify-content: space-between;
+  border-bottom: 1px solid #dfdcdc;  
+  box-shadow: 0 3px 3px rgba(200, 216, 206, 0.12), 0 3px 3px rgba(97, 107, 100, 0.24);
+}
+#line {
+  position: fixed;
+  zoom:1;
+  display: flex;
+  width: 100%;
+  height: 4px;
+  background-color: var(--black);
+}
+#lnav h1 #home {
+  font-size: 33px;
+  margin: auto 1vw;
+  font-weight: bold;
+}
+#lnav label {
+  float: right;
+  font-size: 26px;
+  font-weight: bold;
+  margin: auto 2vw;
+}
+
+/* ----------------------------------------section----------------------------------------*/
+section {
+  min-height: 100vh;
+}
+section.docs aside ul li a, section.blog aside ul li a {
+  display: inline-block;
+  margin-left: 0.8rem;
+  text-decoration: none;
+  transition: all 0.15s ease-in-out;
+}
+
+section.docs aside ul li a.active,
+section.docs aside ul li a:hover,
+section.docs aside ul li a:active,
+section.docs aside ul li a:focus,
+section.blog aside ul li a.active,
+section.blog aside ul li a:hover,
+section.blog aside ul li a:active,
+section.blog aside ul li a:focus {
+  color: var(--new);
+  border-left: 3px solid var(--new);
+  padding: 0.25rem 0.5rem;
+}
+section.docs aside p, section.blog aside p {
+  font-size: 1.2rem;
+  font-weight: bold;
+}
+
+pre {
+  display: block;
+  padding: 9.5px;
+  margin: 0 0 10px;
+  font-size: 13px;
+  line-height: 1.42857143;
+  color: var(--new);
+  word-break: break-all;
+  word-wrap: break-word;
+  background-color: #f5f5f5;
+  border: 1px solid #ccc;
+  text-shadow: none;
+}
+
+code {
+  padding: 2px 4px;
+  font-size: 90%;
+  background-color: #f5f5f5;
+  border-radius: 4px;
+  border: 1px solid #ccc;
+  color: var(--new);
+  text-shadow: none;
+}
+
+pre code {
+  padding: 0;
+  font-size: inherit;
+  color: inherit;
+  white-space: pre-wrap;
+  background-color: transparent;
+  border-radius: 0;
+  border: 0;
+}
+
+/* ----------------------------------------footer----------------------------------------*/
+footer {
+  text-align: center;
+  justify-content: center;
+  border-top: 2px solid var(--new);
+}
+
+footer p {
+  margin: 0;
+  font-weight: lighter;
+  padding: 1rem 0;
+}
+
+/* ----------------------------------------home page----------------------------------------*/
+#top {
+  padding: 2rem;
+  text-align: center;
+  line-height: 3rem;
+  background-color:  var(--grey);
+}
+#top h1 {
+  font-size: 2.2rem;
+  color: var(--new);
+}
+#top p {
+  font-size: 1.1rem;
+  color: var(--new);
+}
+#top button {
+  margin-right: 15px;
+  font-size: 18px;
+  padding: 8px 30px;
+  background-color: rgb(190, 241, 211);
+  border: none;
+}
+
+#Features {
+  margin: 2rem auto;
+  padding: 1rem 2rem;
+  background-color:  var(--grey);
+}
+#Features #feature {
+  padding-bottom: 1rem;
+}
+#Features article {
+  padding-top: 1rem;
+}
+#Features article h3 {
+  font-size: 1.3rem;
+  color: var(--black);
+  padding-bottom: 0.5rem;
+}
+
+
+/* ----------------------------------------mobile----------------------------------------*/
+@media only screen and (max-width:  600px) {
+  #lnav h1 img {
+    width: 3rem;
+    height: 3rem;
+    vertical-align:middle;
+    margin-left: 1vw;
+  }
+  #rnav {
+    padding-top: 4rem;
+    height: 0;
+    display: block;
+    overflow: hidden;
+  }
+  #rnav li a {
+    color: var(--black);
+    display:block;
+    font-weight: bold;
+    border-bottom: 1px solid #d8d8d8;
+    padding: 0.5rem 1rem;
+  }
+  section {
+    margin: 0 auto ;
+    padding-top: 1rem;
+    width: 94%;
+  }
+  #hr {
+    width: 100%;
+    height: 0.25rem;
+    margin: 0.6rem 0;
+    background-color: var(--black);
+  }
+}
+/* ----------------------------------------table----------------------------------------*/
+@media only screen and (min-width:  600px) and (max-width:  1000px) {
+  #menu {
+    display: none;
+  }
+  #lnav h1 img {
+    width: 3rem;
+    height: 3rem;
+    vertical-align:middle;
+    margin-left: 5vw;
+  }
+
+  #rnav {
+    position: fixed;
+    right: 0;
+    line-height: 60px;
+    padding-right: 5vw;
+  }
+
+  #rnav li {
+    display: inline-block;
+  }
+  #rnav li a {
+    font-size: 20px;
+    font-weight: bold;
+    padding-left: 2vw;
+  }
+  section {
+    margin: 0 auto;
+    padding-top: 5rem;
+    width: 85%;
+  }
+  section.docs .inner, section.blog .inner {
+    display: flex;
+  }
+  section.docs aside, section.blog aside {
+    flex: 0 1 30%;
+  }
+   
+  section.docs main, section.blog main {
+    flex: 0 1 70%;
+  }
+  #hr {
+    display: none;
+  }
+  .columns {
+    display: flex;
+  }
+
+  .columns.three > article {
+    flex: 0 1 33%;
+    margin-right: 1.5%;
+  }
+
+  .columns.three > article:last-child {
+    margin-right: 0;
+  }
+}
+
+/* ----------------------------------------desktop----------------------------------------*/
+@media only screen and (min-width:  1000px) {
+  #menu {
+    display: none;
+  }
+  #lnav h1 img {
+    width: 3rem;
+    height: 3rem;
+    vertical-align:middle;
+    margin-left: 11vw;
+  }
+  #rnav {
+    position: fixed;
+    right: 0;
+    line-height: 60px;
+    padding-right: 10vw;
+  }
+
+  #rnav li {
+    display: inline-block;
+  }
+  #rnav li a {
+    font-size: 20px;
+    font-weight: bold;
+    padding-left: 2vw;
+  }
+  section {
+    margin: 0 auto;
+    padding-top: 5.5rem;
+    width: 75%;
+  }
+
+  section.docs .inner, section.blog .inner {
+    display: flex;
+  }
+  section.docs aside, section.blog aside {
+    flex: 0 1 30%;
+  }
+  section.docs main, section.blog main {
+    flex: 0 1 70%;
+  }
+  #hr {
+    display: none;
+  }
+  .columns {
+    display: flex;
+  }
+
+  .columns.three > article {
+    flex: 0 1 33%;
+    margin-right: 1.5%;
+  }
+
+  .columns.three > article:last-child {
+    margin-right: 0;
+  }
+}
diff --git a/_site/public/imgs/ACTIX.png b/_site/public/imgs/ACTIX.png
new file mode 100644
index 0000000..673e0f0
Binary files /dev/null and b/_site/public/imgs/ACTIX.png differ
diff --git a/_site/public/imgs/favicon.ico b/_site/public/imgs/favicon.ico
new file mode 100644
index 0000000..3a3c738
Binary files /dev/null and b/_site/public/imgs/favicon.ico differ
diff --git a/_site/public/js/nav.js b/_site/public/js/nav.js
new file mode 100644
index 0000000..78ba358
--- /dev/null
+++ b/_site/public/js/nav.js
@@ -0,0 +1,14 @@
+var menu = document.getElementById('menu');
+menu.addEventListener('click', function() {
+    var nav = document.getElementById('rnav');
+        if (nav.style.height == 'auto') {
+            nav.style.height = '0';
+        }else{
+            nav.style.height = 'auto';
+        }
+
+        // they are same
+        // manv.style.height = 'auto';
+        // manv.setAttribute('style', 'height: auto !important');
+        // manv.style.setProperty( 'height',' auto', 'important');
+}, false);
\ No newline at end of file
diff --git a/_site/tutorials.html b/_site/tutorials.html
new file mode 100644
index 0000000..e72d802
--- /dev/null
+++ b/_site/tutorials.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1", maximum-scale=1,user-scalable=no,shrink-to-fit=no">
+<meta charset="utf-8">
+<meta http-equiv="X-UA-Compatible" content="IE=edge">
+<title>Tutorials</title>
+<link rel="shortcut icon" href="/public/imgs/favicon.ico">
+<link rel="stylesheet" href="/public/css/styles.css">
+<script src="/public/js/nav.js" async="async"></script>
+
+  </head>
+  <body>
+    <header>
+        <div id="mnav">
+      <div id="lnav">
+        <div id="line"></div>
+        <h1><a href="/"><img src="/public/imgs/ACTIX.png"/></a><a id="home" href="/">Actix</a></h1>
+        <label ><a href="#" id="menu">menu</a></label>
+      </div>
+      <div id="rnav">
+          <li> <a href="/tutorials.html" title="tutorials">Tutorials</a></li>
+          <li> <a href="/docs" title="docs">Docs</a></li>
+          <li> <a href="/blog" title="blog">Blog</a></li>
+          <li> <a href="/community.html" title="community">Community</a></li>
+          <li> <a href="/more.html" title="github">More</a></li>
+      </div> 
+  </div>
+
+    </header>
+    <main>
+      <section >
+<div >
+<h2>Examples</h2>
+<p>The words is comming.</p>
+</div>
+</section>
+    </main>
+    <footer>
+      <div >
+  <p>Made ❤️  by the <a href="https://cobalt-org.github.io/">Cobalt</a> with the <a href="https://github.com/actix/actix-website">Actix</a> theme</p>
+</div>
+
+    </footer>
+  </body>
+</html>
diff --git a/blog/Blog-example.md b/blog/Blog-example.md
index 22d796c..2360259 100644
--- a/blog/Blog-example.md
+++ b/blog/Blog-example.md
@@ -1,6 +1,6 @@
-extends: blog.liquid
-title: "Blog::Blog Example"
-route: Blog-example
+title:  Blog::Blog Example
+layout: blog.liquid
+permalink: /blog/2018/Basics-example.html
 ---
 
 ## Basics Example
diff --git a/blog/index.md b/blog/index.md
index fe3c533..b7e5434 100644
--- a/blog/index.md
+++ b/blog/index.md
@@ -1,6 +1,6 @@
-extends: blog.liquid
-title: "Blog"
-route: ""
+title:  Blog
+layout: blog.liquid
+permalink: /blog/index.html
 ---
 
 ## Documentation
diff --git a/community.md b/community.md
index dc471c9..e126aeb 100644
--- a/community.md
+++ b/community.md
@@ -1,5 +1,6 @@
-extends: default.liquid
-path: /:filename/
+title:   Community
+layout: default.liquid
+permalink: /community.html
 ---
 <section >
 <div >
diff --git a/docs/Advance-example.md b/docs/Advance-example.md
deleted file mode 100644
index 4a417b5..0000000
--- a/docs/Advance-example.md
+++ /dev/null
@@ -1,8 +0,0 @@
-extends: docs.liquid
-title: "Docs::Advance Example"
-route: Advance-example
----
-
-## Advance Example
-
-The words is comming.
\ No newline at end of file
diff --git a/docs/Basics-example.md b/docs/Basics-example.md
index 668f47b..e66557c 100644
--- a/docs/Basics-example.md
+++ b/docs/Basics-example.md
@@ -1,6 +1,6 @@
-extends: docs.liquid
-title: "Docs::Basics Example"
-route: Basics-example
+title:   Docs::Basics Example
+layout: docs.liquid
+permalink: /docs/Basics/Basics-example.html
 ---
 
 ## Basics Example
diff --git a/docs/Misc-example.md b/docs/Misc-example.md
deleted file mode 100644
index 24209db..0000000
--- a/docs/Misc-example.md
+++ /dev/null
@@ -1,7 +0,0 @@
-extends: docs.liquid
-title: "Docs::Misc Example"
-route: Misc-example
----
-## Misc Example
-
-The words is comming.
\ No newline at end of file
diff --git a/docs/Reference-example.md b/docs/Reference-example.md
deleted file mode 100644
index 9b582b4..0000000
--- a/docs/Reference-example.md
+++ /dev/null
@@ -1,8 +0,0 @@
-extends: docs.liquid
-title: "Docs::Reference Example"
-route: Reference-example
----
-
-## Reference Example
-
-The words is comming.
diff --git a/docs/index.md b/docs/index.md
index e4bb065..71a052a 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -1,6 +1,6 @@
-extends: docs.liquid
-title: "Docs"
-route: ""
+title:  Docs
+layout: docs.liquid
+permalink: /docs/index.html
 ---
 
 ## Documentation
diff --git a/index.liquid b/index.liquid
index c729065..2b7af20 100644
--- a/index.liquid
+++ b/index.liquid
@@ -1,5 +1,6 @@
-extends: default.liquid
 title: Actix-web framework
+layout: default.liquid
+permalink: /index.html
 ---
 <section class="introduction">
   <div>
@@ -7,8 +8,8 @@ title: Actix-web framework
       <h1>Actix-web framework</h1>
       <p>Actix-web is a fast, down-to-earth, open source rust web framework.</p>
       <div>
-        <button><a href="https://actix.github.io/tutorials" >Start</a></button>
-        <button><a href="https://actix.github.io/docs" >Learn</a></button>
+        <button><a href="/tutorials.html" >Start</a></button>
+        <button><a href="/docs" >Learn</a></button>
       </div>
     </div>
     <div id="Features">
diff --git a/more.md b/more.md
index 7e69d58..da8fb33 100644
--- a/more.md
+++ b/more.md
@@ -1,5 +1,6 @@
-extends: default.liquid
-path: /:filename/
+title:   More
+layout: default.liquid
+permalink: /more.html
 ---
 <section >
 <div >
diff --git a/tutorials.md b/tutorials.md
index 48a4735..fbcc1e2 100644
--- a/tutorials.md
+++ b/tutorials.md
@@ -1,5 +1,6 @@
-extends: default.liquid
-path: /:filename/
+title:   Tutorials
+layout: default.liquid
+permalink: /tutorials.html
 ---
 <section >
 <div >