Categories can be added to all Jekyll posts. Since I wanted a page that showcased my experience, projects, and blog posts, I use Jekyll to categorize them. Here’s a rundown of how I use categories and display them in different formats.

1. Create pages for different sections

Recall that various sections of jekyll pages should be placed in their own folders. Create these folders and the corresponding index.html pages inside them. I have folders named blog, experience, and projects.

2. Take note that most things will belong to the _posts folder

The word post is typically associated with blog entries (since Jekyll was designed for blogs). However, since we're adding a little more to it than it's intended purpose, the _post folder will basically mean stuff. This means that for my case, projects and experiences will be formatted and named as if they're blog posts. This is a little of what my _posts folder looks like.

1
2
3
4
_posts
|---2012-01-01-uh.md
|---2015-05-01-fanfiction-checker.md
|---2016-08-14-material-design-jekyll.md

The first file falls under experiences, and the second, under projects. I used dates relatively close to the display dates I wanted as my post name. By keeping everything in the _posts folder, Jekyll allows me to loop through them later on.

3. Add a category variable to each post file's front matter

I added a category (you can also do categories but I'm not a fan of that) on the front matter of each post, categorizing them as either experience, project, or blog. This will later make it easy for me to sort the posts into the pages they belong to.

4. Add any more important variables

I am a very big fan of how Jekyll handles front matter. I can basically add any variable to it, display it however manner I'd like in my templates. This makes it easy to display titles, dates, or tags in a different format. Below is how my front matter for projects looks:

1
2
3
4
5
6
7
8
9
10
11
---
layout: large_card
title: "Personal Website"
company: "Independent"
date: "August 2016"
tools: "HTML, CSS, Jekyll, Material Design Lite, Github Pages"
show: true
category: projects
link: https://github.com/rachelmad/rachelmad.github.io
link_name: Github
---

I have basic information about the project, like its name and date, link, and the tools I used to create it. I also want the ability to easily display and hide projects on my site without manually adding or removing posts. So I created a boolean value, show, that controls whether or not I want the project to be displayed. You can have as many or few values on your YAML matter.

4. Create a page for each section

The index page for each section will need to loop through all the posts for the particular category. This can be done with a simple for loop. The one on my projects index file looks like this:

1
2
3
4
5
{% for post in site.categories.projects %}

// Add things here

{% endfor %}

In my for loop above, I go through all posts in the site that have the category projects. Any code that goes inside the for loop is applied to the posts individually.

The first thing I do in my for loop is an if block to check if the show boolean is set to true. This makes sure that I'm not displaying projects I don't want to. Here's what an if block looks like in Jekyll.

1
2
3
4
5
{% if post.show == true %}

// Add things here

{% endif %}

Most of my project card is relatively simple. I display the post's title, date, description, and tools, formatting them nicely. The most interesting part is the how I handle the link at the bottom. Not all projects have a link, so I have {% if post.link %} that executes the block if a link exists. Then I have an if-else block that determines if the link is in Github and should use the Font Awesome Github icon, or if it should just display the link name. That block looks like this:

1
2
3
4
5
{% if post.link_name == "Github" %}
    <i class="fa fa-github icon-button fa-2x" aria-hidden="true"></i>
{% else %}
    {{ post.link_name }}
{% endif %}

And that should be it. Hope someone finds this helpful!

If this is interesting, don't forget to check out my entry on using material design lite on your Jekyll blog.