Sort Post Tags in Alphabetical Order in Jekyll Website

Jan. 03, 2025 • Updated Jan. 04, 2025

For Jekyll website, we can sort post tags in alphabetical order using code1 (take the case of my website2):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
---
layout: archive
---

{{ content }}

{% assign sorted_tags = site.tags | sort %}

{% for tag in sorted_tags %}
  <a class="btn btn--label" href="#{{ tag[0] | slugify }}"">
    <i class=" fa fa-tags" aria-hidden="true"></i> {{ tag[0] }} ({{ tag[1].size }})
  </a>
{% endfor %}

{% assign entries_layout = page.entries_layout | default: 'list' %}
{% for tag in sorted_tags %}
  <section id="{{ tag[0] | slugify | downcase }}" class="taxonomy__section">
  <h2 class="archive__subtitle"><i class="fa fa-tags" aria-hidden="true" style="margin-right:0.3em;"></i>{{ tag[0] }}({{ tag[1].size }})</h2>
  <div class="entries-{{ entries_layout }}">
    {% for post in tag.last %}
      {% include archive-single.html type=entries_layout %}
    {% endfor %}
  </div>
  </section>
{% endfor %}

As a comparison, the code to list post tags based on the number of posts is:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
---
layout: archive
---

{{ content }}

{% assign tags_max = 0 %}
{% for tag in site.tags %}
  {% if tag[1].size > tags_max %}
    {% assign tags_max = tag[1].size %}
  {% endif %}
{% endfor %}

<div class="label-panel">
  {% for i in (1..tags_max) reversed %}
    {% for tag in site.tags %}
      {% if tag[1].size == i %}
      <a class = "btn btn--label" href="#{{ tag[0] | slugify }}"">
        <i class="fa fa-tags" aria-hidden="true"></i> {{ tag[0] }} ({{ i }})
      </a>
      {% endif %}
    {% endfor %}
  {% endfor %}
</div>

{% assign entries_layout = page.entries_layout | default: 'list' %}
{% for i in (1..tags_max) reversed %}
  {% for tag in site.tags %}
    {% if tag[1].size == i %}
      <section id="{{ tag[0] | slugify | downcase }}" class="taxonomy__section">
        <h2 class="archive__subtitle"><i class="fa fa-tags" aria-hidden="true" style="margin-right:0.3em;"></i>{{ tag[0] }} ({{ i }})</h2>
        <div class="entries-{{ entries_layout }}">
          {% for post in tag.last %}
            {% include archive-single.html type=entries_layout %}
          {% endfor %}
        </div>
      </section>
    {% endif %}
  {% endfor %}
{% endfor %}


References