I want to show posts that are from a certain category. For example, going to url will list all the posts that have "programming" as their category.

My general blog index looks like below

  {% for post in site.posts %}
    <div class="post-box">
      <div class="post-title">
        <a href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a>
      </div>
      <span class="post-date">{{ post.date | date: "%b %-d, %Y" }}</span>
      <p class="post-excerpt">{{ post.excerpt }}</p>
      <div>
        {% for category in post.categories %}
          <a href="#">#{{ category }}</a>
        {% endfor %}
      </div>
    </div>
  {% endfor %}

If Jekyll does not automatically provide a specific url for each category, I would have to dynamically change the available posts based on the given url. I can of course create a directory dedicated to each category and then make index.html inside it, but there must be a better way.

It would be perfect if there were a way to dynamically change {% for post in site.posts %} part to {% for post in posts in some_category %} with javascript. Any help would be wonderful.

I want to show posts that are from a certain category. For example, going to url http://example./posts/programming will list all the posts that have "programming" as their category.

My general blog index looks like below

  {% for post in site.posts %}
    <div class="post-box">
      <div class="post-title">
        <a href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a>
      </div>
      <span class="post-date">{{ post.date | date: "%b %-d, %Y" }}</span>
      <p class="post-excerpt">{{ post.excerpt }}</p>
      <div>
        {% for category in post.categories %}
          <a href="#">#{{ category }}</a>
        {% endfor %}
      </div>
    </div>
  {% endfor %}

If Jekyll does not automatically provide a specific url for each category, I would have to dynamically change the available posts based on the given url. I can of course create a directory dedicated to each category and then make index.html inside it, but there must be a better way.

It would be perfect if there were a way to dynamically change {% for post in site.posts %} part to {% for post in posts in some_category %} with javascript. Any help would be wonderful.

• javascript
• jekyll

3 Answers 3

I can of course create a directory dedicated to each category and then make index.html inside it, but there must be a better way.

This is a great way to do it, isn't much work at all and works flawlessly on gh-pages. It's exactly what I do on my own sites as I prefer to keep my .md posts filed by category in the directory structure, so I simply have:

/blog/
    /_posts/20015-01-01-my-awesome-post.md
    index.html

/labs/
    /_posts/20015-01-01-my-technical-post.md
    index.html

I find it preferable for maintenance to not have 1001 posts all in _posts/ and I get the pretty permalink structure I want without entering categories in each posts front-matter.

That's exactly what https://github./jekyll/jekyll-archives is doing.

You could use a plugin (for that, see David Jacquel's answer)...but you can't use it if you want to host your site on GitHub Pages, because GitHub Pages supports only a few plugins, and jekyll-archives isn't one of them.

So if you can't use a plugin, AFAIK there's no other way than to create a page for each category manually.
I'm no JavaScript guru, but I'm quite sure that it's not possible to dynamically change the category with JavaScript, because Jekyll pages are piled once and can't be changed on the fly at runtime.

But creating a new category page for each category isn't as much work as it seems.

I have a blog post here where I explain how to do it:
Separate pages per tag/category with Jekyll (without plugins)

Short version:
(I'm using tags instead of categories here, but both work exactly the same)

1. Create a special layout file /_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>
   

2. With this layout file, you need only two lines of YAML front-matter to create a new tag page, for example /tags/jekyll/index.html:

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