I struggled with this for sometime until I stubmled upon a Stockoverflow post that has what I was looking for.

Seriously people think developers just type all day, I have learnt that one of the biggest skills is knowing how to google your problem and finding the correct soultion. Even the most seasoned developer has to look something up in the docs or on forums now nd then. Although developers are mega clever they’re not superman.

Breaking up my posts into years.

This is how I did it. If you’re using Bootstrap and like the layout I have you can just copy and paste the code block.


{% for post in site.posts  %}
{% capture this_year %}{{ post.date | date: "%Y" }}{% endcapture %}
{% capture next_year %}{{ post.previous.date | date: "%Y" }}{% endcapture %}

{% if forloop.first %}
<h2 id="{{ this_year }}-ref">{{this_year}}</h2>
<ul class="p-0">
    {% endif %}

    <li style="list-style: none;">
        <div class="row">
            <div class="col-md-8 post_entry my-1">
                <a href="{{ post.url }}">
                    <h2 class="string">{{ post.title }}</h2>
                </a>
            </div>
            <div class="col my-1">
                <p class="comment text-small text-right">{{ post.date | date: "%B %e" }}
                </p>
            </div>
        </div>
    </li>

    {% if forloop.last %}
</ul classp-0>
{% else %}
{% if this_year != next_year %}
</ul>
<h2 id="{{ next_year }}-ref">{{next_year}}</h2>
<ul class="p-0">
    {% endif %}
    {% endif %}
    {% endfor %}
</ul>

With thanks to the Stackoverflow answer I can now break everything into years, you can too.