Npm package "GitHub Pages tags generator"

TL'DR

Now, you can add tags to your github-pages based website which will link to a real tag page (not link with # to a very-long-all-tags-in-one-page page).

You can get it too. Just run npm i github-pages-tags.

The long story

If you didn't know already (which means that you not opened the devtools while you in this site, shame on you :)), this site is built on GitHub Pages which can use Jekyll.

Don't get me wrong, Jekyll is great, but.. as they say by themselves:

Transform your plain text into static websites and blogs.

And the problem regards to tags is that tags are, well, dynamic. The list of the tags is concating each post tags into one (with the duplicate, fo course).

The solution has 2 parts:

1. Present the list itself.
2. Create file for each tag which will contains all the post that have this tag.

Jekyll solved for us the first part. You can easily iterate over all the tags and generate html for each of them, like this:

The second part is more problematic because assuming the user clicks on a tag and now he in, let's say http://amazing-blog.github.io/tags/my-great-tag we need to filter all the posts that have my-great-tag tag in their tags list which it's impossible because the site is static and can't calculate anything in runtime.

So, what's the solution?

Just use my plugin :)

The mechanism

• On pre-commit (you have to commit to push your changes to GitHub) the script crwl on each .md file and fetch the tags from it.
• It cleans the duplicates.
• It generating a file for each tag by the following schema _tags/{%raw%}{{tag_name}}{%endraw%}.md
• In this file it define all the meta props, including permalink.
• The file uses the tag template, so you have to make sure you have one (maybe in the future, the plugin will create this file by itself) Example of how the tag template should looks like, you can find in the plugin's readme

Questions? Ideas? Feel free to open an issue on GitHub