How to display tags in jekyll and get the tag to click through to all relevant collection posts - tags

Question

I am looking to display all the tags from my collection posts in a sidebar, and have each tag click through to all the relevant posts. I would also like to display the number of times the tag has been used like this:
tag_name (10)
This is what I have currently which has got all the tags as a list but I cant figure out how to get the tag to click through to all relevant pages and also display the size.
<ul class="">
{% assign tags = site.vacancies | map: 'tags' | join: ',' | split: ',' | uniq %}
{% for tag in tags %}
<li class="text-capitalize">
{{ tag }}
</li>
{% endfor %}
</ul>

Answer 1

First, retrieve all tags into an list by using site.tags provide by Jekyll Variables
{% capture site_tags %}{% for tag in site.tags %}{{ tag | first }}{% unless forloop.last %},{% endunless %}{% endfor %}{% endcapture %}
{% assign tags_list = site_tags | split:',' | sort_natural %}
Secondly, get a link for each Tag with its post count correspondingly
<ul>
{% for item in (0..site.tags.size) %}{% unless forloop.last %}
{% capture this_word %}{{ tags_list[item] | strip_newlines }}{% endcapture %}
<li><span class="tag-name">{{ this_word }}</span> <span class="count">{{ site.tags[this_word].size }}</span></li>
{% endunless %}{% endfor %}
</ul>
Thirdly, show each tag's name and its posts' name and date.
{% for item in (0..site.tags.size) %}{% unless forloop.last %}
{% capture this_word %}{{ tags_list[item] | strip_newlines }}{% endcapture %}
<article id="{{ this_word }}">
<h2 class="tag-heading tag-name">{{ this_word }}</h2>
<ul>
{% for post in site.tags[this_word] %}{% if post.title != null %}
<li><a href="{{ site.url }}{{ post.url }}" title="{{ post.title }}" >{{ post.date | date: '%m/%d/%Y' }} ---- {{ post.title }}</a></li>
{% endif %}{% endfor %}
</ul>
</article>
{% endunless %}{% endfor %}

Answer 2

So there's a way to do it by creating an array of tags while iterating through posts in the collection and using lots of liquid... and I decided to do my own workaround.
I have a master list of all the tags that I use stored in /_data/tagList.yml. Each tag has a name and slug, and you can add more fields like a description if you want to. I iterate through the data in tagList, and for each tag have a link to a dedicated page that lists all the posts that contain that tag.
If you followed the Jekyll docs and used tags in the front matter and you are consistent in naming your tags, then you can use the site.tags[tag.name] | size filter to get a count on how many posts have that tag.
Drawbacks of this workaround are:
you need to update tagList.yml any time you make a new tag
you need to make a new page for that tag (not a big deal since you can just copy/paste code from other tag pages and just change the tag you're looking for)
you need to ensure you are consistent in naming and using tags
// /_data/tagList.yml
- name: Coding
slug: coding
- name: UnpopularOpinion
slug: unpopular-opinion
// /_posts/2019-01-01-example.html
---
tags: [Coding, UnpopularOpinion]
---
// /blog/tags.html
{% for tag in site.data.tagList %}
<div>
<h2>{{tag.name}}</h2>
{% assign postCount = site.tags[tag.name] | size %}
<em>
{% if postCount == 1 %}
{{postCount}} post
{% else %}
{{postCount}} posts
{% endif %}
</em>
</div>
{% endfor %}
// /blog/tags/coding.html
{% assign numPosts = site.tags.Coding | size %}
{% if numPosts == 0 %}
<p>No posts have this tag...yet.</p>
{% endif %}
{% for post in site.tags.Coding %}
...code to display a post...
{% endfor %}