I struggled with this for sometime until I stubmled upon a Stackoverflow 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 and 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.

{% raw %}
{% 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>
{% endraw %}

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