Categories

Jekyll is great because you can put pretty much whatever you want in the dev folders and it all gets built out to a flat _site file. But out of the box there doesn't seem to be any way to create category pages. Luckily this is easy thanks to the Liquid templating.

• You'll want to create a directory in the root of your project. ~/myblog/categories/ as an example.
• Within that you'll want an index.html for yoursite.com/categories/.
• Your index should look something like this:

---
layout: default
---

<div class="home">

  <h1>Categories</h1>

  <ul class="posts">
    {% for category in site.categories %}
      <li><a href="/categories/{{ category[0] }}">{{ category[0] }}</a></li>
    {% endfor %}
  </ul>

  <p class="rss-subscribe">subscribe <a href="{{ "/feed.xml" | prepend: site.baseurl }}">via RSS</a></p>

</div>

• Then you want to create additional pages in there for your categories. Jekyll will generate those html documents as subfolders in the build. In this case we'll use production.html and templates.html. An example of those would be:

---
layout: default
---

<div class="home">

  <h1>Production</h1>

  <ul class="posts">
    {% for post in site.categories.production %}
      <li>
        <span class="post-date">{{ post.date | date: "%b %-d, %Y" }}</span>
        <a class="post-link" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a>
        <!-- <img src="/assets/{{ page.pageimg }}" width="100%"> -->
      </li>
    {% endfor %}
  </ul>

  <p class="rss-subscribe">subscribe <a href="{{ "/feed.xml" | prepend: site.baseurl }}">via RSS</a></p>

</div>

• After a build you should be good to go at yoursite.com/categories/ and yoursite.com/categories/production/ and such.

Note

If you want a menu item for your category you will also have to go into the site-header.html and add it before or after the {% for page in site.pages %} loop like so:

      <div class="trigger">
        {% for page in site.pages %}
          {% if page.title %}<a class="page-link" href="{{ page.url | prepend: site.baseurl }}">{{ page.title }}</a>{% endif %}
        {% endfor %}
        <a class="page-link" href="/categories/templates">Templates</a>
      </div>