add actual content to tags.html

assets/css/mystyle.css

@@ -52,3 +52,14 @@ pre, code{
 .svg-icon {
     vertical-align: text-bottom;
 }
+
+/* tags page */
+.tagnames {
+    margin-bottom: 16px;
+    margin-left: 16px;
+}
+.tags-title {}
+.tags hr {
+    color: rgba(200, 200, 200, 0.5);
+    margin-bottom: 16px;
+}

tags.html

@@ -3,4 +3,82 @@ layout: default
 title: Tags
 ---
 
-This is the tags page :)
+<!-- used method from
+https://codinfox.github.io/dev/2015/03/06/use-tags-and-categories-in-your-jekyll-based-github-pages/
+-->
+
+{% comment %}
+=======================
+The following part extracts all the tags from your posts and sort tags, so that
+you do not need to manually collect your tags to a place.
+=======================
+{% endcomment %}
+{% assign rawtags = "" %}
+{% for post in site.articles %}
+  {% assign ttags = post.tags | join:'|' | append:'|' %}
+  {% assign rawtags = rawtags | append:ttags %}
+{% endfor %}
+{% assign rawtags = rawtags | split:'|' | sort %}
+
+{% comment %}
+=======================
+The following part removes dulpicated tags and invalid tags like blank tag.
+=======================
+{% endcomment %}
+{% assign tags = "" %}
+{% for tag in rawtags %}
+  {% if tag != "" %}
+    {% if tags == "" %}
+      {% assign tags = tag | split:'|' %}
+    {% endif %}
+    {% unless tags contains tag %}
+      {% assign tags = tags | join:'|' | append:'|' | append:tag | split:'|' %}
+    {% endunless %}
+  {% endif %}
+{% endfor %}
+
+
+
+{% comment %}
+=======================
+The purpose of this snippet is to list all the tags you have in your site.
+=======================
+{% endcomment %}
+<div class="tags">
+<h2 class="tags-title">TAGS</h2>
+<div class="tagnames">
+{% for tag in tags %}
+  <a class="meta-tags" href="#{{ tag | slugify }}">
+      <img src="{{ '/assets/images/tag.svg' | relative_url }}"
+           alt="tag" class="svg-icon">
+      {{ tag }}
+  </a>
+{% endfor %}
+</div>
+<hr>
+</div>
+
+
+{% comment %}
+=======================
+The purpose of this snippet is to list all your posts posted with a certain tag.
+=======================
+{% endcomment %}
+{% for tag in tags %}
+  {% assign slug_tag = tag | slugify %}
+  <h2 class="tag-string-h2" id="{{ tag | slugify }}">{{ tag }}</h2>
+  <ul>
+   {% for post in site.articles %}
+     {% if post.tags contains tag %}
+     <li><h3>
+     <a href="{{ post.url }}">
+     {{ post.title }}
+     <span class="post-meta">
+       {{ post.date | date_to_string }}
+     </span>
+     </a>
+     </h3></li>
+     {% endif %}
+   {% endfor %}
+  </ul>
+{% endfor %}