The desire

The first task I wanted to do is add a list of blog posts to the site without cluttering up the home page. I’m not going to focus too much on style this time around. Just aiming for content and functionality.

The solution

My solution, aimed at making an uncluttered website for blogging, is to use a row of navigation buttons that appear at the top of every page on the site.

The implementation

First Attempt

From reading on various websites, it appeared that this feature was easily supported in Jekyll by adding a pages-list key to _config.yml

# Setup
title:               blog.vo1stv.ca
tagline:             ''
description:         ''
home:                http://blog.vo1stv.ca
url:                 http://blog.vo1stv.ca
pages_list:       
  About: '/about'
  Projects: '/projects

In addition to the above, I created a projects.html file with liquid templates to generate the list of blog posts from sample code I found online. I also created an About page so the project button wouldn’t look so lonely at the top of the page. Then of course I had to create this, my first post, so the list of blog posts would not be empty.

I drafted the changes above in a branch of the repo and created a pull request to populate the master branch. Jekyll did the rest.

Refinements

It turned out that the documentation available on the websites I visited was heavily dependent on the theme preferred by the author in question. Since I didn’t want to lock myself into a stranger’s preferred theme, I opted to revisit the instructions above. I settled on using Jekyll’s default theme and determining the instructions from there.

The first thing I needed to do is specify in my ‘_config.yml’ file that I want to use the default jekyll theme, which is named minima. Using this theme is supported by GitHub Pages, and it provides a variety of premade page layouts, graphics, visual elements and styles that my pages can make use of.

As with anything, there is a learning curve with the minima theme. I found it helpful to define my own default.html layout in the _layouts folder of my site’s repository. This layout depends on included snippets of html for populating the head section of the html file, as well as header and footer html code for the body of the webpage. I copied the original files from the themes source repository, simplified them (mostly be removing portions related to social media feeds), and placed the custom versions under the _includes folder of my web-site repository.

Final Results

After a little tweaking, the listing below shows the resulting version of my _config.yml:

# Setup
title:               'Research and Reflection'
tagline:             '... because nothing is ever easy!'
description:         'A public forum for me to share insights on topics that require research and reflection'
home:                http://blog.vo1stv.ca
url:                 http://blog.vo1stv.ca
author:              Stephen Motty

theme: minima

# To link specific pages in your header, add the path to the pages in order as they should show up
header_pages:
 - about.md
 - projects.html