Better HubSpot Pagination. This pagination snippet has been taken and modified from Jason Rosa's "Numbered Blog Pagination" snippet: https://designers.hubspot.com/code-gallery/entry/us/dontgojasonwaterfalls-blog-numbered-pagination

blog-pagination.html

{% if contents.total_page_count > 1 %}
  <div class="blog-pagination">

    {% set page_list = [-2, -1, 0, 1, 2] %}
    {% if contents.total_page_count - current_page_num == 1 %}{% set offset = -1 %}
    {% elif contents.total_page_count - current_page_num == 0 %}{% set offset = -2 %}
    {% elif current_page_num == 2 %}{% set offset = 1 %}
    {% elif current_page_num == 1 %}{% set offset = 2 %}
    {% else %}{% set offset = 0 %}{% endif %}
    
    {% if current_page_num != 1 %}
    <a class="blog-pagination__link blog-pagination__prev-link {{ 'blog-pagination__prev-link--disabled' if !last_page_num }}" href="{{ blog_page_link(last_page_num) }}">
      Previous
    </a>
    {% endif %}

    {% if current_page_num >= 4 %}
        <a class="blog-pagination__link blog-pagination__number-link {{ 'blog-pagination__link--active' if this_page == current_page_num }}" href="{{ blog_page_link( 1 ) }}">1</a>
        {% if current_page_num > 4 %}
            <span class="blog-pagination--ellipses">...</span>
          {% endif %}
    {% endif %}

    {% for page in page_list %}
      {% set this_page = current_page_num + page + offset %}
      {% if this_page > 0 and this_page <= contents.total_page_count %}
        <a class="blog-pagination__link blog-pagination__number-link {{ 'blog-pagination__link--active' if this_page == current_page_num }}" href="{{ blog_page_link(this_page) }}">{{ this_page }}</a>
      {% endif %}
    {% endfor %}

      {% if current_page_num <= (contents.total_page_count - 3) %}
        {% if current_page_num < (contents.total_page_count - 3) %}
            <span class="blog-pagination--ellipses">...</span>
        {% endif %}
        <a class="blog-pagination__link blog-pagination__number-link {{ 'blog-pagination__link--active' if this_page == current_page_num }}" href="{{ blog_page_link( contents.total_page_count ) }}">{{ contents.total_page_count }}</a>
      {% endif %}

      {% if contents.total_page_count != current_page_num %}
        <a class="blog-pagination__link blog-pagination__next-link {{ 'blog-pagination__next-link--disabled' if !next_page_num }}" href="{{ blog_page_link(current_page_num + 1) }}">
          Next
        </a>
      {% endif %}


  </div>
{% endif %}

blog-pagination.scss

.blog-pagination {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: flex-start;
	margin-top: 50px;
	margin-bottom: 20px;
	a.blog-pagination__link {
		&.blog-pagination__number-link {
			color: black;
			transition: all 0.3s ease-in-out;
			margin: 0 12px;
			font-size: 14px;
			font-weight: bold;
			&:hover {
				color: red;
			}
			&.blog-pagination__link--active {
				background-color: #ef3340;
				width: 40px;
				height: 40px;
				display: flex;
				align-items: center;
				justify-content: center;
				color: white;
				box-shadow:0 6px 15px rgba(0, 0, 0, 0.16);
			}
		}

		&.blog-pagination__prev-link {
			margin-right: 15px;
		}
		&.blog-pagination__next-link {
			margin-left: 15px;
		}

		&.blog-pagination__prev-link,
		&.blog-pagination__next-link {
			color: blue;
			transition: all 0.3s ease-in-out;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 14px;
			font-weight: bold;
			&:hover {
				color: red;
			}
		}
	}

	.blog-pagination--ellipses {
		margin: 0 9px;
	}
}