Paginate posts for home page

- Configurejekyll-paginate
- Modify home page to include paginator loop
- Add pagination include and basic styling
- Add " - page #" to <title></tile> for SEO benefits

_assets/css/_page.scss

@@ -706,3 +706,27 @@ $button-size: 1.5rem;
     font-weight: bold;
   }
 }
+
+/*
+   Post pagination links
+   ========================================================================== */
+
+.pagination {
+  padding-top: 0.5em;
+  border-top: 1px solid lighten($black,70);
+  ul {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  li {
+    display: inline-block;
+  }
+  li + li:before {
+    content: "";
+    padding-right: 10px;
+  }
+  .current {
+    font-weight: bold;
+  }
+}

_config.yml

@@ -173,7 +173,8 @@ gems:
 
 # Outputting
 permalink: /:categories/:title/
-paginate_path: /page:num
+paginate: 5 # amount of posts to show
+paginate_path: /page:num/
 timezone: America/New_York # http://en.wikipedia.org/wiki/List_of_tz_database_time_zones
 
 # HTML Compression

_includes/pagination

@@ -0,0 +1,66 @@
+{% include base_path %}
+
+{% if paginator.total_pages > 1 %}
+<nav class="pagination">
+  <ul>
+    {% comment %} Link for previous page {% endcomment %}
+    {% if paginator.previous_page %}
+      {% if paginator.previous_page == 1 %}
+        <li><a href="{{ base_path }}/" class="btn">Previous</a></li>
+      {% else %}
+        <li><a href="{{ base_path }}/page{{ paginator.previous_page }}/" class="btn">Previous</a></li>
+      {% endif %}
+    {% endif %}
+
+    {% comment %}First page{% endcomment %}
+    {% if paginator.page == 1 %}
+      <li><strong class="current">1</strong></li>
+    {% else %}
+      <li><a href="{{ base_path }}/">1</a></li>
+    {% endif %}
+
+    {% assign page_start = 2 %}
+    {% if paginator.page > 4 %}
+      {% assign page_start = paginator.page | minus: 2 %}
+      {% comment %} Ellipsis for truncated links {% endcomment %}
+      <li>&hellip;</li>
+    {% endif %}
+
+    {% assign page_end = paginator.total_pages | minus: 1 %}
+    {% assign pages_to_end = paginator.total_pages | minus: paginator.page %}
+    {% if pages_to_end > 4 %}
+      {% assign page_end = paginator.page | plus: 2 %}
+    {% endif %}
+
+    {% for index in (page_start..page_end) %}
+      {% if index == paginator.page %}
+        <li><strong class="current">{{ index }}</strong></li>
+      {% else %}
+        {% comment %} Distance from current page and this link {% endcomment %}
+        {% assign dist = paginator.page | minus: index %}
+        {% if dist < 0 %}
+          {% comment %} Distance must be a positive value {% endcomment %}
+          {% assign dist = 0 | minus: dist %}
+        {% endif %}
+        <li><a href="{{ base_path }}/page{{ index }}/">{{ index }}</a></li>
+      {% endif %}
+    {% endfor %}
+
+    {% comment %}Ellipsis for truncated links{% endcomment %}
+    {% if pages_to_end > 3 %}
+      <li>&hellip;</li>
+    {% endif %}
+
+    {% if paginator.page == paginator.total_pages %}
+      <li><strong class="current">{{ paginator.page }}</strong></li>
+    {% else %}
+      <li><a href="{{ base_path }}/page{{ paginator.total_pages }}/">{{ paginator.total_pages }}</a></li>
+    {% endif %}
+
+    {% comment %}Link next page{% endcomment %}
+    {% if paginator.next_page %}
+      <li><a href="{{ base_path }}/page{{ paginator.next_page }}/" class="btn">Next</a></li>
+    {% endif %}
+  </ul>
+</nav>
+{% endif %}

_includes/seo

@@ -16,7 +16,7 @@
   {% assign canonical_url = page.url | replace: "index.html", "" | prepend: site.url %}
 {% endif %}
 
-<title>{{ seo_title | default: site.title }}</title>
+<title>{{ seo_title | default: site.title }}{% if paginator %}{% unless paginator.page == 1 %} {{ site.title_separator }} page {{ paginator.page }}{% endunless %}{% endif %}</title>
 
 {% assign seo_description = page.description | default: page.excerpt | default: site.description %}
 {% if seo_description %}

index.html

@@ -1,6 +1,5 @@
 ---
 layout: archive
-permalink: /
 excerpt: "A minimal Jekyll theme for your blog by designer Michael Rose."
 header:
   image: unsplash-image-7.jpg
@@ -9,8 +8,10 @@ header:
 
 {% include base_path %}
 
-### Recent Posts
+<h3>Recent Posts</h3>
 
-{% for post in site.posts limit:5 %}
+{% for post in paginator.posts %}
   {% include archive-list-single %}
-{% endfor %}
+{% endfor %}
+
+{% include pagination %}