_layouts/blog.html

<!DOCTYPE html>
<html lang="en">
{% include head.html %}

<body class="{{ page.body-class }}">
  {% include header.html %}

  <div class="main-background blog-background"></div>

  {% assign posts = paginator.posts %}
  {% assign display_post_categories = site.posts | map: 'categories' | join: ',' | replace: '-', ' ' | split: ',' | uniq | sort %}
  {% assign current_page = page.url | downcase | remove: ".html" | split: '/'  %}
  {% assign post_categories = site.posts | map: 'categories' | join: ',' | split: ',' | uniq | sort %}

  <div class="jumbotron jumbotron-fluid">
    <div class="container">
      {% for post in posts limit:1 %}
      <p class="featured-post">Featured Post</p>
      <h1>
        <a href="{{ site.baseurl }}{{ post.url }}">{{ post.title }}</a>
      </h1>
      <p class="featured-blog-preview">{{ post.excerpt | remove: '<p>' | remove: '</p>' | truncate: 100 }}</p>

      <a href="{{ site.baseurl }}{{ post.url }}" class="btn btn-lg with-right-arrow">
        Read More
      </a>

      {% endfor %}
    </div>
  </div>

  <div class="main-content-wrapper">
    <div class="main-content">
      <div class="container">
<!-- Temporarily hidden sub menu until there are more blog posts and categories -->
<!--         <nav class="navbar navbar-expand-lg navbar-light main-content-menu">
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#blogPostFilter" aria-controls="navbarNavDropdown"
            aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>

          <div class="collapse navbar-collapse" id="blogPostFilter">
            <ul class="navbar-nav">
              <li class="nav-item">
                <a class="nav-link {% if current_page[3] == null %} selected {% endif %}" data-category="all" href="{{ site.baseurl }}/blog">All</a>
              </li>
              {% for category in display_post_categories %}
              <li class="nav-item">
                <a class="nav-link {% if current_page[3] == post_categories[forloop.index0] %} selected {% endif %}" data-category="{{ category | slugify }}" href="{{ site.baseurl }}/blog/categories/{{ category | slugify }}">{{ category }}</a>
              </li>
              {% endfor %}
              <li class="nav-item">
                  <a class="nav-link">Search</a>
                </li>
            </ul>
          </div>
        </nav> -->
<!-- End submenu -->

        <div class="row blog-index">
          {% for post in posts %}
          <div class="col-md-4">
            <p class="blog-date">{{ post.date | date: '%B %d, %Y' }}</p>
            <h4>
              <a href="{{ site.baseurl }}{{ post.url }}">{{ post.title }}</a>
            </h4>
            <p>{{ post.excerpt | remove: '<p>' | remove: '</p>' | truncate: 500}}</p>
            <img src="{{ post.image }}" class="img-fluid">
          </div>
          {% endfor %}
        </div>

        <div class="d-flex justify-content-center">

          <ul class="pagination">
            {% if paginator.previous_page %}
            <li class="page-item">
              <a class="page-link" href="{{ site.baseurl }}{{ paginator.previous_page_path }}">Previous</a>
            </li>
            {% else %}
            <li class="page-item disabled">
              <a class="page-link">Previous</a>
            </li>
            {% endif %} {% if paginator.next_page %}
            <li class="page-item">
              <a class="page-link" href="{{ site.baseurl }}{{ paginator.next_page_path }}">Next</a>
            </li>
            {% else %}
            <li class="page-item disabled">
              <a class="page-link">Next</a>
            </li>
            {% endif %}
          </ul>
        </div>
      </div>
    </div>
  </div>

  {% include quick_start_module.html %}

  {% include footer.html %}

</body>

</html>