Creating categories on Jekyll driven site

Question

I'm having a hard time understanding how to generate archive pages for each category I use on my blog. I'd like the user to be able to click on a category and then be taken to a page that lists out all articles with the desired category assigned.

The only way I can think of doing it is by manually creating a specific html file for each category in the root. But I'm sure there must be a more dynamic way?

I have the site hosted on github - https://github.com/sirbrad/sirbrad.github.com

Thanks in advance!

Brad

Answer 1

You can generate a list of all the available categories by using the site.categories data, using the first element of each category (which is an array) to get the category name:

{% for cat in site.categories %}
    <li>{{ cat[0] }}</li>
{% endfor %}

And you can generate a list of all the posts in a given category like so:

{% for post in site.categories.CATEGORY_NAME %}

It doesn't seem possible to generate an individual HTML page for each category as you were hoping, but perhaps a good compromise would be to generate a single page containing a list of all categories, where each category contains all the posts in that category. You could then use some simple JavaScript to hide the posts in each category until the category name is selected, giving almost the same user experience as individual archive pages for each category.

Answer 2

Note: I'm linking examples here that are using tags (because the examples already existed, with tags), but they work the same for categories.

---

If you don't want to use a plugin, for example if you want your site to work on GitHub Pages, you have only two options:

1. Create a single page which contains all categories, alphabetically sorted

2. Indeed create a separate HTML file for each category manually, but put as much as possible into a layout file, so creating a new category page isn't much work:

   /_layouts/tagpage.html:

   ---
   layout: default
   ---
   
   <h1>{{ page.tag }}</h1>
   
   <ul>
   {% for post in site.tags[page.tag] %}
     <li>
       {{ post.date | date: "%B %d, %Y" }}: <a href="{{ post.url }}">{{ post.title }}</a>
     </li>
   {% endfor %}
   </ul>
   

   With this layout file, you need only two lines of YAML front-matter to add a new tag page:
   (in this case for the jekyll tag)

   /tags/jekyll/index.html:

   ---
   layout: tagpage
   tag: jekyll
   ---
   

   So the actual effort to create a new tag page is minimal - the only thing is that you need to remember to do it when you're using a new tag for the first time.

Answer 3

You can use Dave Perett's generate_categories.rb plugin to automatically create a page for each category in your site. Then, use a for loop to run through your site categories and create a link for each in your navigation (or wherever you want to link to the archive pages), as Jon did in his answer to your quesiton.

Answer 4

For github pages, you can make an archive page with

{% for pt in site.categories %}[{{pt[0]}}](#cat-{{pt[0]}}), {% endfor %}

{% for cat in site.categories %}
{% assign nt = cat[0] %}

#### {{ nt }} {#cat-{{nt}}}
<ul> 
  {% for post in site.posts %}
     {% for pt in post.categories %}
    {% if nt == pt %}
      <li>
        {{post.published}} <a href="{{ post.url }}">{{ post.title }}</a>
      </li>
    {% endif %}  
   {% endfor %} 
  {% endfor %}
</ul>  
{% endfor %}

On my machine, with about 200 posts it takes 3s to generate the whole site. This is because the inner if is executed categories x number_of_posts times. On the other hand, you will have an archive page without using any plugin.