How I Use Jekyll For This Site

Here are the main features of Jekyll I used to generate all the static pages of this site.

Root Folder

$ ls
assets _config.yml _data Gemfile
Gemfile.lock _health _home _includes
_layouts _love _meaning _posts
robots.txt _wealth

_config.yaml

The _config.yaml file content is:

title: "Kaue's Way of Life"
description: "Kaue's Way of Life."
url: "https://kaue.me"
author: "Kaue Silveira"
defaults:
  -
    scope:
      path: ""
    values:
      layout: "default"
destination: ../server/_site
collections:
  home:
    output: true
    permalink: /:title/
  health:
    output: true
    permalink: /:collection/:title/
  wealth:
    output: true
    permalink: /:collection/:title/
  love:
    output: true
    permalink: /:collection/:title/
  meaning:
    output: true
    permalink: /:collection/:title/
  posts:
    output: true
    permalink:
      /:collection/:year/:month/:day/:title/
sass:
  style: compressed
plugins:
  - jekyll-feed

I have multiple folders with specific content (home, health, wealth, love, meaning) plus the general posts folder.

I use the jekyll-feed plugin to generate the Atom (RSS-like) feed. This is the content of my Gemfile:

source 'https://rubygems.org'
group :jekyll_plugins do
 gem "jekyll-feed"
end

Content Folders

This is what the content folders look like:

$ ls _home/
about.md changes.md goals.md health.md
home.md love.md meaning.md posts.md
self-evaluation.md wealth.md
$ ls _health/
exercise.md nutrition.md sleep.md
$ ls _posts/ | head -n 3
2018-11-25-dr-satching-panda-on-time....md
2018-11-25-matthew-walker-why-we-sleep....md
2018-11-25-stronglifts-5x5-workout-....md

Content Files

Content files look like this:

$ cat _health/sleep.md | head
---
menu_order: 100
description: "Sleep."
---

# Sleep

{% include goals.md %}

## Challenges

I have some custom page attributes (like menu_order) and includes (like goals.md) which I cover next.

Includes

This converts a path into a list of parts:

{% assign categories = include.path |
    split: "/" %}
{% unless categories contains "posts" and
      categories.size > 2 %}
  {% assign route="" %}
  <br>
  <ul class="breadcrumb">
  {% for category in categories %}
    {% assign route = route |
        append: category | append: '/' %}
    {% if forloop.last %}
      <li class="active">
        {{ category | capitalize }}
      </li>
    {% elsif category.size == 0 %}
      <li><a href="{{ route }}">Home</a></li>
    {% else %}
      <li><a href="{{ route }}">
        {{ category | capitalize }}
      </a></li>
    {% endif %}
  {% endfor %}
  </ul>
{% endunless %}

Goals

The specific content pages (like sleep.md above) include the corresponding goals using:

$ ls _includes/goals
awareness.md career.md exercise.md friends.md
fun.md good.md investing.md nutrition.md
parents.md partner.md saving.md sleep.md
$ cat _includes/goals.md 
## Goals

{% include goals/{{ page.slug }}.md %}

The overall goals page lists all goals like:

{% assign titles_col = site.collections |
    where: "label", "home" | first %}
{% assign titles = titles_col.docs |
    where: "has_goals", "true" |
    sort: 'menu_order' %}
{% for item in titles %}
  {% assign subtitles_col = site.collections |
      where: "label", item.slug | first %}
  {% assign subtitles = subtitles_col.docs |
      sort: 'menu_order' %}
## {{ item.title }}
  {% for subitem in subtitles %}
### {{ subitem.title }}
    {% include goals/{{ subitem.slug }}.md %}
  {% endfor %}
{% endfor %}

This lists pages sorted by their menu_order:

{% assign pages = site.home |
    where_exp: "item", "item.menu_order > 0" |
    where_exp: "item",
        "item.hide_from_menu != true" |
    sort: 'menu_order' %}
{% for item in pages %}
  <li
      {% if item.url == page.url %}
        class="active"
      {% endif %}
  >
    <a href="{{ item.url }}">
      {{ item.title }}
    </a>
  </li>
{% endfor %}

Sub-Pages

This lists sub-pages:

{% assign collection = site.collections |
    where: "label", page.slug | first %}
{% if collection and page.slug != "posts" %}
## Pages

  {% assign pages = collection.docs |
      where_exp: "item", "item.menu_order > 0" |
      where_exp: "item",
          "item.hide_from_home != true" |
      sort: 'menu_order' %}
  {% for item in pages %}
    <a href="{{ item.url }}">
      {{ item.title }}
    </a>
  {% endfor %}
{% endif %}

Posts By Tag

This lists posts with a tag matching the current page (e.g. sleep):

{% if page.slug == "home" or
    page.slug == "posts" %}
  {% assign pages = site.posts %}
{% else %}
  {% assign pages = site.tags[page.slug] %}
{% endif %}
{% if pages.size > 0 %}
## Posts

  {% for item in pages limit:include.limit %}
    <a href="{{ item.url }}">
      {{ item.date | date_to_string }}:
        {{ item.title }} [
          {% for tag in item.tags %}
            {{ tag | capitalize }}
            {% unless forloop.last %},
            {% endunless %}
          {% endfor %}
        ]
    </a>
  {% endfor %}
{% endif %}

Layout

The layout conditionally includes dependencies only for the pages that need them, e.g.:

{% if page.include_math_plot %}
  <script
      src="https://unpkg.com/mathjs....js">
  </script>
  <script
      src="https://cdn.plot.ly/plotly....js">
  </script>
{% endif %}
{% if page.include_rouge %}
  <link rel="stylesheet"
      href="/assets/css/rouge.css">
{% endif %}

The layout also lists sub-pages and posts:

{% unless page.hide_subpages %}
  {% capture pages_html  %}
    {% include pages.html %}
  {% endcapture %}
  {{ pages_html | markdownify }}
  {% capture posts_html  %}
    {% include posts.html %}
  {% endcapture %}
  {{ posts_html | markdownify }}
{% endunless %}

Subscribe to my mailing list and get a free email course

* indicates required

Interests


Updated on 2020 May 25.
DISCLAIMER: This is not professional advice. The ideas and opinions presented here are my own, not necessarily those of my employer.