diff --git a/_includes/header.liquid b/_includes/header.liquid
index f010f33..de903f7 100644
--- a/_includes/header.liquid
+++ b/_includes/header.liquid
@@ -7,6 +7,7 @@
       <div id="rnav">
           <li> <a href="/tutorials" 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>
       </div> 
diff --git a/_layouts/blog.liquid b/_layouts/blog.liquid
new file mode 100644
index 0000000..5c1285d
--- /dev/null
+++ b/_layouts/blog.liquid
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    {% include "head.liquid" %}
+  </head>
+  <body>
+    <header>
+      {% include "header.liquid" %}
+    </header>
+    <main>
+      <section class="docs">
+        <div class="inner">
+          <aside>
+            <p>2018</p>
+            <ul>
+              <li><a {%if route == "Blog-example"%}class="active"{%endif%} href="/blog/Blog-example.html">Blog Example</a></li>
+            </ul>
+          </aside>
+          <main>
+          {{ content }}
+          </main>
+        </div>
+      </section>
+    </main>
+    <footer>
+      {% include "footer.liquid" %}
+    </footer>
+  </body>
+</html>
diff --git a/_layouts/docs.liquid b/_layouts/docs.liquid
index 2fe2f87..a0920e8 100644
--- a/_layouts/docs.liquid
+++ b/_layouts/docs.liquid
@@ -8,20 +8,20 @@
       {% include "header.liquid" %}
     </header>
     <main>
-      <section class="docs">
+      <section class="blog">
         <div class="inner">
           <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 route == "Basics-example"%}class="active"{%endif%} href="/blog/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 route == "Reference-example"%}class="active"{%endif%} href="/blog/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 route == "Advance-example"%}class="active"{%endif%} href="/blog/Advance-example.html">Advance Example</a></li>
             </ul>
             <p>Misc</p>
             <ul>
diff --git a/blog/Blog-example.md b/blog/Blog-example.md
new file mode 100644
index 0000000..22d796c
--- /dev/null
+++ b/blog/Blog-example.md
@@ -0,0 +1,8 @@
+extends: blog.liquid
+title: "Blog::Blog Example"
+route: Blog-example
+---
+
+## Basics Example
+
+The words is comming.
diff --git a/blog/index.md b/blog/index.md
new file mode 100644
index 0000000..fe3c533
--- /dev/null
+++ b/blog/index.md
@@ -0,0 +1,13 @@
+extends: blog.liquid
+title: "Blog"
+route: ""
+---
+
+## Documentation
+
+Welcome to the Actix-web Blog! 
+
+If you feel like contributing further, you can fork that repo,
+branch from `source`, and submit a pull request.
+
+Contributions are always welcome!
diff --git a/public/css/styles.css b/public/css/styles.css
index 012e512..625829f 100644
--- a/public/css/styles.css
+++ b/public/css/styles.css
@@ -70,7 +70,7 @@ ul, ol, li {
 }
 
 /* ----------------------------------------section----------------------------------------*/
-section.docs aside ul li a {
+section.docs aside ul li a, section.blog aside ul li a {
   display: inline-block;
   margin-bottom: 0.25rem;
   text-decoration: none;
@@ -80,7 +80,11 @@ section.docs aside ul li a {
 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.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 {
   font-weight: bold;
   background: var(--orange);
   color: var(--white);
@@ -227,19 +231,21 @@ footer p {
     padding-top: 5rem;
     width: 88%;
   }
-  section.docs .inner {
+  section.docs .inner, section.blog .inner {
     display: flex;
   }
-
-  section.docs aside {
+  section.docs aside, section.blog aside {
     flex: 0 1 30%;
   }
-  section.docs aside p {
+  
+  section.docs aside p, section.blog aside p {
     font-size: 1.3rem;
   }
-  section.docs main {
+   
+  section.docs main, section.blog main {
     flex: 0 1 70%;
   }
+  
   .columns {
     display: flex;
   }
@@ -285,17 +291,16 @@ footer p {
     width: 77%;
   }
 
-  section.docs .inner {
+  section.docs .inner, section.blog .inner {
     display: flex;
   }
-
-  section.docs aside {
+  section.docs aside, section.blog aside {
     flex: 0 1 30%;
   }
-  section.docs aside p {
+  section.docs aside p, section.blog aside p {
     font-size: 1.3rem;
   }
-  section.docs main {
+  section.docs main, section.blog main {
     flex: 0 1 70%;
   }
 
