get pagination working

_config.yml

@@ -14,9 +14,17 @@ menu:
   - id: contact
     name: Contact
     url: /contact
-paginate: 12
+paginate: 10
 paginate_path: '/page:num/'
 permalink: pretty
 plugins:
   - jekyll-feed
   - jekyll-paginate
+exclude:
+  - src
+  - Gemfile
+  - Gemfile.lock
+  - gulpfile.js
+  - node_modules
+  - package.json
+  - package-lock.json

_includes/pagination.html

@@ -1,35 +1,33 @@
 
-<nav class="pagination">
-  {% if paginator.previous_page %}
-
-    {% if paginator.previous_page == 1 %}
-      <a href="/">Prev</a>
-    {% else %}
-      <a href="/page{{ paginator.previous_page }}">Prev</a>
-    {% endif %}
-
-  {% else %}
-    <span class="disabled">Prev</span>
-  {% endif %}
-
-  {% if paginator.page == 1 %}
-    <span class="active">1</span>
-  {% else %}
-    <a href="/">1</a>
-  {% endif %}
-
-  {% for count in (2..paginator.total_pages) %}
-
-    {% if count == paginator.page %}
-      <span class="active">{{ count }}</span>
-    {% else %}
-      <a href="/page{{ count }}">{{ count }}</a>
-    {% endif %}
-  {% endfor %}
-
-  {% if paginator.next_page %}
-    <a href="/page{{ paginator.next_page }}">Next</a>
-  {% else %}
-    <span class="disabled">Next</span>
-  {% endif %}
-</nav> <!-- End Section Pagination -->
+<div class="page-navigation">
+  <nav class="navigation" role="navigation">
+    <h2 class="screen-reader-text">Page navigation</h2>
+    <div class="nav-links">
+      <div class="row">
+        <!-- Get Previous Page -->
+        <div class="col-md-4 prev-page">
+          {% if paginator.previous_page %}
+            <a href="{{ paginator.previous_page_path }}">
+              <span class="next-prev-text">
+                <i class="fa fa-angle-left"></i>PREVIOUS
+              </span><br>
+            </a>
+          {% endif %}
+        </div>
+        <div class="col-md-4 page_number">
+          Page: {{ paginator.page }} of {{ paginator.total_pages }}
+        </div>
+        <!-- Get Next Page -->
+        <div class="col-md-4 next-page">
+          {% if paginator.next_page %}
+            <a href="{{ paginator.next_page_path }}">
+              <span class="next-prev-text">
+                NEXT<i class="fa fa-angle-right"></i>
+              </span><br>
+            </a>
+          {% endif %}
+        </div>
+      </div>
+    </div><!-- .nav-links -->
+  </nav><!-- .navigation-->
+</div>

_includes/post-navigation.html

@@ -0,0 +1,33 @@
+
+<div class="post-navigation">
+  <nav class="navigation" role="navigation">
+    <h2 class="screen-reader-text">Post navigation</h2>
+    <div class="nav-links">
+      <div class="row">
+        <!-- Get Next Post -->
+        <div class="col-md-6 next-post">
+          {% if page.next.url %}
+            <a href="{{ page.next.url | prepend: site.baseurl }}">
+              <span class="next-prev-text">
+                <i class="fa fa-angle-left"></i>NEXT
+              </span><br>
+              {{ page.next.title }}
+            </a>
+          {% endif %}
+        </div>
+
+        <!-- Get Previous Post -->
+        <div class="col-md-6 prev-post">
+          {% if page.previous.url %}
+            <a href="{{ page.previous.url | prepend: site.baseurl }}">
+              <span class="next-prev-text">
+                PREVIOUS<i class="fa fa-angle-right"></i>
+              </span><br>
+              {{ page.previous.title }}
+            </a>
+          {% endif %}
+        </div>
+      </div>
+    </div><!-- .nav-links -->
+  </nav><!-- .navigation-->
+</div>

_layouts/main.html

@@ -16,6 +16,4 @@
     </div>
   </div>
 
-  {% include pagination.html %}
-
   {% include footer.html %}

_layouts/post.html

@@ -53,35 +53,4 @@ <h5 class="entry-date">
   </footer><!-- .entry-footer -->
 </article><!-- #post-## -->
 
-<div class="post-navigation">
-  <nav class="navigation" role="navigation">
-    <h2 class="screen-reader-text">Post navigation</h2>
-    <div class="nav-links">
-      <div class="row">
-        <!-- Get Next Post -->
-        {% if page.next.url %}
-          <div class="col-md-6 next-post">
-            <a href="{{ page.next.url | prepend: site.baseurl }}">
-              <span class="next-prev-text">
-                <i class="fa fa-angle-left"></i>NEXT
-              </span><br>
-              {{ page.next.title }}
-            </a>
-          </div>
-        {% endif %}
-
-        <!-- Get Previous Post -->
-        {% if page.previous.url %}
-          <div class="col-md-6 prev-post">
-            <a href="{{ page.previous.url | prepend: site.baseurl }}">
-              <span class="next-prev-text">
-                PREVIOUS<i class="fa fa-angle-right"></i>
-              </span><br>
-              {{ page.previous.title }}
-            </a>
-          </div>
-        {% endif %}
-      </div>
-    </div><!-- .nav-links -->
-  </nav><!-- .navigation-->
-</div>
+{% include post-navigation.html %}

index.html

@@ -62,4 +62,6 @@ <h5 class="entry-date">
     <footer class="entry-footer">
     </footer><!-- .entry-footer -->
   </article><!-- #post-## -->
-{% endfor %}
+{% endfor %}
+
+{% include pagination.html %}