update_tags

update_tags

Automatically update your Jekyll blog's tag index pages for GitHub Pages.

Update Tags

update_tags is a command line app which automatically creates and updates your Jekyll blog post's tag's index pages so that they'll work with GitHub pages.

The Problem

Tagging posts in jekyll is straightforward if you can use plugins like this one. However, GitHub Pages only supports a set of whitelisted plugins and I don't see any blog-post-tagging related helpers in that list. To make tags work with GitHub Pages, you need to create an index page for each of your tags, which is painful. Read more

The Solution

Create a file named _includes/tag_index_page.md, like this one:

---
layout: default
---

<h1>{{ tag }} Posts</h1>

{% for post in tagged_posts %}
  {{ post.title }}
{% endfor %}

This file defines how your tag index pages will look. You get access to two special variables; tag and tagged_posts.

Then, install update_tags and run update_tags continuously while you work on your jekyll blog. Let's say you create a blog post with the following tags in your front matter:

---
tags: ["Test Driven Development", "Ruby"]
---

Two pages will be automatically created by update_tags using the template defined in _includes/tag_index_page.md for each of the two tags. You will see them in the browser at tag/test-driven-development and tag/ruby.

Example

If the quick and dirty explanation in The Solution section above doesn't make sense yet, try the following to see update_tags in action from beginning to end.

Create a new blank jekyll blog:

jekyll new MyBlog --blank
cd MyBlog

Create a file named _includes/tag_index_page.md with the following contents:

---
layout: default
---

<h1>{{ tag }} Posts</h1>

{% for post in tagged_posts %}
  {{ post.title }}
{% endfor %}

Run update_tags and jekyll serve (with live reloading):

update_tags continuously # leave it running
jekyll s -l              # leave it running

Create a blog post; here's an example you can dump into _posts/2022-10-01-hello-world.md:

---
layout: default
tags: ["React Native", "Ruby on Rails"]
---

I like making things with Ruby on Rails and React Native.

Now, open your browser to localhost:4000/tag/ruby-on-rails or localhost:4000/tag/react-native. You'll see the tag index pages listing all posts with the respective tag. As you write new posts with existing tags, the tag index pages will be kept in sync. When you create new tags, new tag index pages will be automatically created.

Install

gem install update_tags

Usage

Leave this running while editing your blog locally:

update_tags continuously

Or run this once before committing and pushing your edited blog back up to the GitHub pages repository:

update_tags now

You can also specify a different tag output directory:

update_tags continuously --at taglets

Or specify a different tag index page template with:

update_tags continuously --template _includes/my_tag_index_page_template.md