How to view posts in alphabetical order by tags and title in Jekyll

This issue was driving me nuts the other day, I could not find a solution to it and I’m not knowledeable enough to have figured it out myself. All credits goes to a user called Sheogorath on the IRC-channel #Jekyll at freenode.net for helping me with this.

So. I wanted to be able to list all my posts in an alphabetical order by tags and then sort each of these posts by title, not by date like it would by default.

Example

My desktop

• I went from a multi monitor setup to just a single monitor setup
• My Desktop - Mars 2019

My keyboards

• My keyboard - KBParadise V60
• My keyboard - Let’s Split
• My keyboard - The Black Diamond

The code

And this is how it can be done:

{% assign tags_sorted = site.tags | sort %}
{% assign posts_sorted = site.posts | sort: 'title' %}
{% for tagitem in tags_sorted %}
<!-- for each tag, create an anchor by using the tag name as an id -->
<div id="{{ tagitem[0] }}">
  <h3> {{ tagitem[0] }} </h3>  <!-- for create a heading -->

  <ul> <!-- create the list of posts -->
    <!-- iterate through all the posts on the site sorted by alphabet-->
    {% for post in posts_sorted %}
      <!-- list only those which contain the current tag -->
      {% if post.tags contains tagitem[0] %}
          <li>
            <a href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a>
          </li>
      {% endif %}
    {% endfor %}
  </ul>
</div>
{% endfor %}