diff --git a/_config.yml b/_config.yml
index 9d350af..2c586af 100644
--- a/_config.yml
+++ b/_config.yml
@@ -30,10 +30,13 @@ sass:
# Blog settings
permalink: "/blog/:year/:title:output_ext"
date_format: "%B %-d, %Y"
+paginate: 12
+paginate_path: "/blog/page:num/"
# Build settings
plugins:
- jekyll-feed
+ - jekyll-paginate
# Exclude from processing.
# The following items will not be processed, by default.
diff --git a/_includes/featured-post-hero.html b/_includes/featured-post-hero.html
index 7a7007f..1f56b65 100644
--- a/_includes/featured-post-hero.html
+++ b/_includes/featured-post-hero.html
@@ -88,7 +88,7 @@
{% unless page.url contains "blog" %}
-
+
All Posts
diff --git a/_includes/pagination.html b/_includes/pagination.html
new file mode 100644
index 0000000..5d32203
--- /dev/null
+++ b/_includes/pagination.html
@@ -0,0 +1,53 @@
+{% if paginator.total_pages > 1 %}
+
+{% endif %}
diff --git a/assets/_sass/component/_pagination.scss b/assets/_sass/component/_pagination.scss
new file mode 100644
index 0000000..57005fe
--- /dev/null
+++ b/assets/_sass/component/_pagination.scss
@@ -0,0 +1,38 @@
+.pagination {
+ display: flex;
+ flex-wrap: wrap;
+ margin-top: rem-calc(30px);
+ @extend .list--plain;
+ @extend .monospace;
+}
+
+.pagination__item {
+ margin: rem-calc(0 5px 5px 0);
+}
+
+.pagination a {
+ display: inline-block;
+ padding: rem-calc(4px);
+ min-width: rem-calc(36px);
+ background-color: $white;
+ border: 2px solid transparent;
+ border-radius: $border-radius;
+ text-align: center;
+ font-size: rem-calc(16px);
+ color: $slate-600;
+ transition: .2s all ease-in-out;
+ transition-property: color, background-color, border-color;
+ text-decoration: none;
+
+ &:hover,
+ &:focus,
+ &.current {
+ border-color: $teal;
+ }
+
+ &.current {
+ font-weight: 700;
+ border-color: $slate-200;
+ }
+
+}
diff --git a/assets/css/main.scss b/assets/css/main.scss
index 46683f0..b6699d9 100644
--- a/assets/css/main.scss
+++ b/assets/css/main.scss
@@ -41,6 +41,7 @@
@import "component/post-index";
@import "component/post-content";
@import "component/featured-post-hero";
+@import "component/pagination";
// Import the syntax highlighting theme, see:
// https://richleland.github.io/pygments-css/
diff --git a/assets/images/icons/icon-sprite.svg b/assets/images/icons/icon-sprite.svg
index e8013d8..4d212f9 100644
--- a/assets/images/icons/icon-sprite.svg
+++ b/assets/images/icons/icon-sprite.svg
@@ -35,6 +35,11 @@
+
+
+
+
+
diff --git a/blog.html b/blog/index.html
similarity index 92%
rename from blog.html
rename to blog/index.html
index 95ccd46..5064ca2 100644
--- a/blog.html
+++ b/blog/index.html
@@ -1,7 +1,6 @@
---
layout: default
title: Blog
-permalink: /blog/
---
@@ -19,7 +18,7 @@ permalink: /blog/
- {%- for post in site.posts -%}
+ {%- for post in paginator.posts -%}
-
@@ -47,6 +46,9 @@ permalink: /blog/
{%- endif -%}
+
+
+ {% include pagination.html %}