Jekyll and the root

Starting out with Jekyll It didn’t take long before I ran in to a problem with pages and relative paths to resources. I should mention that I was using Jekyll to build a company website that was almost exclusively made up of pages.

Basically I had a site that looked like this:

jekyll-site
  |-_layouts
    |-base.html
  |-administration
    |-overview.md
    |-user_amd.md
  |-installation
  |-overview
    |-folder1
      |-step1.md
      |-step2.md
    |-folder2
      |-step1.md
      |-step2.md

And the problem was that a page in a sub-folder or a sub-sub-folder, while using the same base.html layout file had different relative paths to resources such as images, styles and scripts.

The solution was to define a variable called root for each page and explicitly set the relative part of the path there.

For example, one page had:

---
layout: base
title: Overview
root: ../../
---

The content of the page blah blah

And in the base.html layout file I used a syntax like this:

<link rel="stylesheet" href="{{ page.root }}assets/css/bootstrap.css">

(Originally published 2012–08–22)