In this post, I will show you the way I’m using to add tags to jekyll post on Github Pages
Add tags to posts
In each post, you need to add tags to the header. Below is an example:
1
2
3
4
5
6
7
8
---
layout: post
title: "How to add tags to jekyll post on Github Pages"
date: 2022-04-29 22:15:05 -0700
categories: development
path: "development"
tags: ["Ruby on Rails", "jekyll", "github"]
---
Create layout for tags
Create new file tag.html in _layouts folder with the content below:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
---
layout: default
---
<article class="post">
<header class="post-header">
<h1 class="post-title">{{ page.title | escape }}</h1>
</header>
<div class="post-content">
{{ content }}
</div>
</article>
Create page for tags
Create folder tags. All tag page will save here Each tag have a different page. For example with tag: jekyll we have a file named jekyll.markdown in folder tags with the content below:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
---
layout: tag
title: "Tag: jekyll"
tags: ["jekyll"]
permalink: /t/jekyll
---
<ul class="post-list">
{%- for post in site.tags['jekyll'] -%}
<li>
{%- assign date_format = site.minima.date_format | default: "%b %-d, %Y" -%}
<span class="post-meta">{{ post.date | date: date_format }}</span>
<h3>
<a class="post-link" href="">
{{ post.title | escape }}
</a>
</h3>
{%- if site.show_excerpts -%}
{{ post.excerpt }}
{%- endif -%}
</li>
{%- endfor -%}
</ul>
Edit homepage or any page you want to show tags
Add this code to the loop of posts
1
2
3
{%- for tag in post.tags -%}
<a href="/t/">#{{ tag }}</a>
{%- endfor -%}
Here is an example of my homepage:
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
---
layout: default
---
<div class="home">
{%- if page.title -%}
<h1 class="page-heading">{{ page.title }}</h1>
{%- endif -%}
{{ content }}
{%- if site.categories['development'].size > 0 -%}
<h2 class="post-list-heading">{{ page.list_title | default: "Posts" }}</h2>
<ul class="post-list">
{%- for post in site.categories['development'] -%}
<li>
{%- assign date_format = site.minima.date_format | default: "%b %-d, %Y" -%}
<span class="post-meta">{{ post.date | date: date_format }}</span>
<span class="post-meta" style="padding-left: 20px;">
{%- for tag in post.tags -%}
<a href="/t/">#{{ tag }}</a>
{%- endfor -%}
</span>
<h3>
<a class="post-link" href="">
{{ post.title | escape }}
</a>
</h3>
{%- if site.show_excerpts -%}
{{ post.excerpt }}
{%- endif -%}
</li>
{%- endfor -%}
</ul>
<p class="rss-subscribe">subscribe <a href="/feed.xml">via RSS</a></p>
{%- endif -%}
</div>
Edit post template to show tags in each post
Add this code to post.html in _layouts folder
1
2
3
4
5
6
7
8
9
<div class="row">
<div class="col-12">
Tags:
{% for tag in page.tags %}
<a class="post" href="/t/">#{{ tag }}</a>{% unless forloop.last %}, {% endunless %}
{% endfor %}
{% include social-sharing.html %}
</div>
</div>
Above is the way currently I’m using to add tags to jekyll posts in Github Pages.
I also created a video to show it. You can check it out on Youtube here: