Let’s create the same section as you can see on the right: Related By Tags. To do it we’ll use liquid:

Liquid is an open-source, Ruby-based template language created by Shopify. It is the backbone of Shopify themes and is used to load dynamic content on storefronts.

The main idea is to go through all the posts, take tags from each post and compare them with tags from currently opened post. If they match add link to post to the list.

Below you can find how the whole section will look like:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

{% if page.tags.size == 1 %}
  <h2>Related By Tag</h2>
{% elsif page.tags.size > 1 %}
  <h2>Related By Tags</h2>
{% endif %}
<ul>
  {% assign posts = site.posts | sort: 'title' %}  <!-- sort all posts -->
  {% for post in posts %}
    {% assign isAdded = false %}       <!-- used to prevent duplicates -->  
    {% for tagAll in post.tags %}      <!-- all posts's tags -->
      {% for tag in page.tags %}       <!-- current post's tags -->
        {% if tagAll == tag and page.title != post.title and isAdded == false %}
          <li><a href="{{ post.url | prepend: site.url }}">{{ post.title }}</a></li>
          {% assign isAdded = true %}
        {% endif %}
      {% endfor %}
    {% endfor %}
  {% endfor %}
</ul>

I think this piece of code is self explanatory. In case of any doubts please pm me or left a comment.

And (just in case) here is how to create a sorted list of all used tags:

<h1>Tags</h1>
<ul>
  {% assign tags = (site.tags | sort:0) %}
  {% for tag in tags %}
    <li><a href="/tag/{{ tag[0] }}">{{ tag[0] }}</a></li>
  {% endfor %}
</ul>

Cheers!