I’ve been working on a GitHub page for a local community that will be referenced by members of all levels of programming skills. The site will contain blog posts and a FAQ page. The blog posts and FAQs are to be separate from the home page. FAQ pages usually list a series of questions, each followed by an answer. Such a setup in Jekyll would normally require that I update the same page manually over and over as needed. I don’t want to do that, so I explored the possibility of maintaining a collection FAQs just like blog posts are maintained in a Jekyll blog’s default setup.

Since I wanted blog posts and FAQs to be listed on separate pages I made two new folders, blog and faq. In each folder, I include an index page and a folder named
_ posts. From this point on, I’ll explain the changes made for FAQs sake and you can assume the same goes for blog posts.

[Directory structure of jekyll blog]

Inside _ posts is where you’ll keep a file for each FAQ item. Note that the assigned layout is faq_post, which will be explained later.

FAQ post file:

---
layout: faq_post
title:  "Is this a FAQ post?"
date:   2013-12-07
categories: jekyll update
---
Why, yes it is!

In order for the the FAQ index page to only list FAQ items, I needed to pull posts (not pages) with faq as a category. This task is handled by site.categories.faq. If you’re asking what site.categories is, please refer to this short piece on global variables in YAML Front-matter.

FAQ index page:

---
layout: default
title: OKC Nerdy Girls - FAQS
category: faq
---
 
<div id="home">
  <h1>FAQs</h1>
  <ul class="posts">
    {% for post in site.categories.faq %}
    <li><span>{{ post.date | date_to_string }}</span> » <a href="{{ post.url }}">{{ post.title }}</a></li>
    {% endfor %}
  </ul>
</div>

Next change I made to the directory/file structure was to the _layouts folder where I split post.html into two files, blog_post.html and faq_post.html. You do not need to do this unless actual the layout of blog and faq pages will differ. In my case, I wanted to keep the active navigation menu item highlighted without making sure every faq or blog post had the correct category when their layouts can manage that.

[Multiple post layout files for each separate list of posts]

FAQ post layout:

---
layout: default
category: faq
---
<h2>{{ page.title }}</h2>
<p class="meta">{{ page.date | date_to_string }}</p>
 
<div class="post">
{{ content }}
</div>

[Navigation pills highlighted based on page layout category]

Ideally, I would provide screenshots of the final results but the site has not yet gone live at the time of this post. The site is open sourced so you’re welcome to take a look at my committed code in GitHub.