Anthology of Interest III

A new design came with some new (to me) ways to build. This time focusing on the tech behind the site.

As stated earlier, this site used to run¹ on WordPress before moving to Octopress and finally on Jekyll. Once the design was finalised, it was time to actually start developing this thing. That brought on the question of how.

Structure of this site

Jekyll has the concept of includes, which is something I haven’t seen in a CMS before. They have made it easier to maintain consistent code across my four page types. Its not much, but my _includes folder has

• HTML head
• page hearder
• page footer
• bio

Looking at it now though I can see the giraffe should be moved into an include. The site is also somewhat small, with only a few components needed to be built, making it a very achievable target for working with a new system.

• four variants for listing posts
• page views for home, blog view, and page

Pages

Pages are unfortunately a mixture of markdown and HTML. The home and the about page for example have content littered with HTML. The idea was to have all of the page logic in the layouts with pages being as minimal as possible for easier editing

---
layout: page
title: something
---

## dat markdown
and some content

In an ideal world all pages would like this this, but due to the inconsistent structure of these pages it wasn’t to be.

Posts

Some general YAML as per the Jekyll guides is used on the posts with some additional fields for SEO. To achieve the summary seen on the blog and home page I needed to start each post with the following

{{ post.content | split: '<!-- /intro -->' | first }}

This allowed for simple plain text to been on the side bar, and a small preview of the post that would also flow natural when viewing an post.

More Jekyll-ness

As this site currently stands, its rather basic with only some minor changes ². I’m working on a side project that aims to deal with multiple types of collections and more efficient:

<ul>
{% for page in site.pages %}
    {% if include.collection == page.mission__category %}
    <li>
        <a href="{{page.url}}">{{page.title}}</a>
        {{page.mission__crew}}, {{page.mission__type}}, {{page.mission__outcome}}
    </li>
    {% endif %}
{% endfor %}
</ul> 

The above will loop through pages in the site, returning only those that match a custom property. As this list is structurally the same when used, it can be maintained in one place and easily reused with include loop.html param='value'