diff --git a/content/blog/2018-06-01-old-blog-example.md b/content/blog/2018-06-01-old-blog-example.md
new file mode 100644
index 0000000..0307d36
--- /dev/null
+++ b/content/blog/2018-06-01-old-blog-example.md
@@ -0,0 +1,10 @@
+---
+title: Old
+description: 2018-01-01
+menu: blog_2018
+weight: 999
+---
+
+# Title
+
+coming......
\ No newline at end of file
diff --git a/content/blog/2018-06-03-new-blog-example.md b/content/blog/2018-06-03-new-blog-example.md
new file mode 100644
index 0000000..f06bb9c
--- /dev/null
+++ b/content/blog/2018-06-03-new-blog-example.md
@@ -0,0 +1,10 @@
+---
+title: New
+description: 2018-06-11
+menu: blog_2018
+weight: 998
+---
+
+# Title
+
+coming......
\ No newline at end of file
diff --git a/content/blog/_index.md b/content/blog/_index.md
new file mode 100644
index 0000000..7bbffe7
--- /dev/null
+++ b/content/blog/_index.md
@@ -0,0 +1,10 @@
+---
+title: Blog
+description: Happy journey with Actix
+menu:
+    blog_intro:
+        name: Welcome
+weight: 1
+---
+
+Welcome to Actix blogs.
\ No newline at end of file
diff --git a/layouts/blog/baseof.html b/layouts/blog/baseof.html
new file mode 100644
index 0000000..a7bcfbb
--- /dev/null
+++ b/layouts/blog/baseof.html
@@ -0,0 +1,60 @@
+{{ partial "header" . }}
+{{ $currentURL := .URL }}
+
+<div class="actix-pageheader">
+  <div class="container">
+    <h1 id="blog-title" class="display-4">{{ .Title }}</h1>
+    {{ if .Description }}
+    <p class="lead">{{ .Description }}</p>
+    {{ end }}
+  </div>
+</div>
+
+<div class="container actix-blog">
+  <div class="row">
+    <div class="col-md-3">
+
+      <button class="btn doctoggle" type="button" data-toggle="collapse" data-target="#collapsing-docnav" aria-expanded="false" aria-controls="collapsing-docnav">
+        Toggle navigation
+      </button>
+      
+      <nav class="leftnav collapse show" id="collapsing-docnav">
+        <div class="" id="">
+          <h5>Introduction</h5>
+          <div>
+            <ul class="nav">
+              {{ range .Site.Menus.blog_intro }}
+              <li{{ if eq $currentURL .URL }} class="active"{{ end }}>
+                <a href="{{ .URL }}">{{ .Name }}</a>
+              </li>
+              {{ end }}
+            </ul>
+          </div>
+
+          <h5>2018</h5>
+          <div>
+            <ul class="nav">
+              {{ range .Site.Menus.blog_2018 }}
+              <li{{ if eq $currentURL .URL }} class="active"{{ end }}>
+                <a href="{{ .URL }}">{{ .Name }}</a>
+              </li>
+              {{ end }}
+            </ul>
+          </div>
+        </div>
+      </nav>
+
+    </div>
+    <div class="col-md-9">
+      <div class="actix-content">
+        {{ block "main" . }}{{ end }}
+        <!-- Yes, we have to use *Prev* to get the next content, because the
+        weights are sorted inversely to how they are actually displayed... -->
+        {{ with .PrevInSection }}<div class="actix-next"><b>Next up</b>: <a href = {{ .URL }}>{{ end }}
+        {{ with .PrevInSection }} {{ .Title }}</a></div>{{ end }}
+      </div>
+    </div>
+  </div>
+</div>
+
+{{ partial "footer" . }}
diff --git a/layouts/blog/blog.html b/layouts/blog/blog.html
new file mode 100644
index 0000000..e0e8308
--- /dev/null
+++ b/layouts/blog/blog.html
@@ -0,0 +1,3 @@
+{{ define "main" }}
+  {{ .Content }}
+{{ end }}
diff --git a/layouts/blog/single.html b/layouts/blog/single.html
new file mode 100644
index 0000000..e0e8308
--- /dev/null
+++ b/layouts/blog/single.html
@@ -0,0 +1,3 @@
+{{ define "main" }}
+  {{ .Content }}
+{{ end }}
diff --git a/layouts/docs/baseof.html b/layouts/docs/baseof.html
index d814984..ca93679 100644
--- a/layouts/docs/baseof.html
+++ b/layouts/docs/baseof.html
@@ -78,8 +78,8 @@
           <h5>API Documentation</h5>
           <div>
             <ul class="nav">
-              <li><a href="https://docs.rs/actix">actix <span class="fa fa-external-link"></span></a></li>
-              <li><a href="https://docs.rs/actix-web">actix-web <span class="fa fa-external-link"></span></a></li>
+              <li><a href="https://docs.rs/actix" target="view_window">actix <span class="fa fa-external-link"></span></a></li>
+              <li><a href="https://docs.rs/actix-web" target="view_window">actix-web <span class="fa fa-external-link"></span></a></li>
             </ul>
           </div>
         </div>
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 21a18e9..292e115 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -36,6 +36,9 @@
             <li class="nav-item">
               <a class="nav-link" href="/docs/">Documentation</a>
             </li>
+            <li class="nav-item">
+              <a class="nav-link" href="/blog/">Blog</a>
+            </li>
             <li class="nav-item">
               <a class="nav-link" href="/community/">Community</a>
             </li>
diff --git a/static/css/actix.css b/static/css/actix.css
index 70283cb..009f477 100644
--- a/static/css/actix.css
+++ b/static/css/actix.css
@@ -187,6 +187,9 @@ img {
 
 .leftnav li a {
   color: #888;
+  width:100%;
+  height:100%;
+  word-wrap: break-word;
 }
 
 .leftnav li.active {
@@ -252,7 +255,7 @@ img {
 
 .jumbotron .actix-logo {
   max-height: 10rem;
-  max-width: 80%;
+  max-width: 80%;leadlead
 }
 
 .jumbotron .lead {
@@ -276,6 +279,12 @@ img {
   margin-bottom: 0;
 }
 
+.actix-pageheader #blog-title {
+  width:100%;
+  height:100%;
+  word-wrap: break-word;
+}
+
 @media (min-width: 576px) {
   .actix-pageheader {
     padding: 2rem 0rem;