Skip to main content

Command Palette

Search for a command to run...

How To Add Tags To Jekyll Posts

Updated
2 min read

If you have a jekyll blog, and want to add a way to categorize your posts, I hope this helps you out and gives you some inspiration. Let's do this!

Simplified steps, no fluff.

  1. Create a new tags collection by adding an entry in _config.yml
     collections:
         tags:
             output: true
    
  2. Create a file for each tag you want to have in your blog under a new directory called _tags. An example would be _/tags/jekyll.html for a jekyll tag. You then need to iterate over the posts to display the ones with the tag. You can view posts for that tag if you navigate to /tags/jekyll.html

     ---
     name: jekyll
     ---
     {% raw %}
     <h1>Posts tagged with "{{page.name}}"</h1>
    
     <ul>
     {% for post in site.posts %}
     {% if post.tags contains page.name %}
     <li>
         <h4><a href="{{ post.url }}">{{ post.title }}</a></h4>
         {{ post.excerpt }}
     </li>
     {% endif %}
     {% endfor %}
     </ul>
     {% endraw %}
    
    • Note - it would probably be best to make this a reusable piece, via jekyll includes since this code will have to exist in each tag file. (I still need to look into this as well)
  3. In your post files add the tags you want to assign to the post like this. (space separated)
     ---
     tags: jekyll tutorial
     ---
    
  4. Wherever you want to show your available tags, or other collections, you can iterate through them like this.
     {% raw %}
     {% for tag in site.tags %}
         <a href="{{tag.url}}">{{ tag.name }}</a>
     {% endfor %}
     {% endraw %}
    

 

A Few After Thoughts

It is worth noting that out of the box, managing tags seems like it will have some amount of duplication. I will most likely look into solutions of my own to reduce the amount of overhead for adding a new tag as I move forward.

  • I particularly like the idea of creating a script to create my tag files for me based on what my posts currently have. This way all I will have to do is create my posts, add tags to them, and run a script.

 

Other Useful Resources

This Step-By-Step Collections Tutorial on jekyll's site is what I mainly used when creating my tags. It runs through what a collection is, and how to set one up.

I also used this post by Anna Ślimak when I was looking into my options.

More from this blog

C

Coding With Logan

29 posts