Add pagination

_config.yml

@@ -6,7 +6,7 @@ title:          Tale
 subtitle:       by Chester
 paginate:       1
 baseurl:        ""
-url:            ""
+url:            "https://chesterhow.github.io/tale/"
 
 # Assets
 sass:

_layouts/default.html

@@ -10,7 +10,7 @@
         <a href="{{ site.baseurl }}/" title="Home">
             <h2>{{ site.title }}</h2>
         </a>
-        <h4>{{ site.subtitle }}</h4>
+        <h4>[ {{ site.subtitle }} ]</h4>
       </header>
 
       <main>

_posts/2017-03-08-welcome-to-jekyll.markdown

@@ -0,0 +1,16 @@
+---
+layout: post
+title:  "Introducing Tale 3"
+date:   2017-03-08 12:32:48 +0800
+categories: jekyll update
+synopsys: "Tale is a minimal Jekyll theme for writers. Find out more here."
+---
+You’ll find this post in your `_posts` directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run `jekyll serve`, which launches a web server and auto-regenerates your site when a file is updated.
+
+To add new posts, simply add a file in the `_posts` directory that follows the convention `YYYY-MM-DD-name-of-post.ext` and includes the necessary front matter. Take a look at the source for this post to get an idea about how it works.
+
+Check out the [Jekyll docs][jekyll-docs] for more info on how to get the most out of Jekyll. File all bugs/feature requests at [Jekyll’s GitHub repo][jekyll-gh]. If you have questions, you can ask them on [Jekyll Talk][jekyll-talk].
+
+[jekyll-docs]: https://jekyllrb.com/docs/home
+[jekyll-gh]:   https://github.com/jekyll/jekyll
+[jekyll-talk]: https://talk.jekyllrb.com/

_posts/2017-03-09-welcome-to-jekyll.markdown

@@ -1,6 +1,6 @@
 ---
 layout: post
-title:  "Introducing Tale"
+title:  "Introducing Tale 2"
 date:   2017-03-09 12:32:48 +0800
 categories: jekyll update
 synopsys: "Tale is a minimal Jekyll theme for writers. Find out more here."

_sass/_home.scss

@@ -37,3 +37,35 @@
     text-decoration: none;
   }
 }
+
+.pagination {
+  font-family: $serif-font;
+  margin-bottom: 20px;
+  position: relative;
+  text-align: center;
+
+  span {
+    color: $default-shade;
+    font-size: 1.3em;
+  }
+
+  a {
+    @include transition(all .3s ease-out);
+    color: $default-color;
+    font-size: 1.3em;
+    position: absolute;
+    text-decoration: none;
+
+    &:hover {
+      color: $default-tint;
+    }
+  }
+
+  .left {
+    left: 0;
+  }
+
+  .right {
+    right: 0;
+  }
+}

index.html

@@ -3,16 +3,26 @@
 title: Home
 ---
 
-{% for post in site.posts %}
+{% for post in paginator.posts %}
   <div class="post-preview">
     <time datetime="{{ post.date }}">{{ post.date | date_to_string }}</time>
     <h1>{{ post.title }}</h1>
 
     <p>{{ post.content | truncatewords: 70 | strip_html }}</p>
 
-
     <div class="post-link">
       <a href="{{ post.url }}">continue reading</a>
     </div>
   </div>
 {% endfor %}
+
+<div class="pagination">
+  {% if paginator.previous_page %}
+    <a href="{{ paginator.previous_page_path | prepend: site.url }}" class="left">&#8592;</a>
+  {% endif %}
+  {% if paginator.next_page %}
+    <a href="{{ paginator.next_page_path | prepend: site.url }}" class="right">&#8594;</a>
+  {% endif %}
+
+  <span>{{ paginator.page }}</span>
+</div>