Jekyll usage

This page is an introductory guide that explains what Jekyll is and how we use it.

What Jekyll Does

Jekyll is a static webpage generator. Intuitively, Jekyll makes webpage development easy by allowing users to create layouts, or templates, that can be reused across webpages, so that the same HTML does not have to be rewritten or hardcoded. It also allows users to create injectable HTML that can be included, and to use Liquid so to extend HTML features.

How Jekyll Works

Note the following subfolders:

• _layouts
• _includes
• _site

Jekyll takes all the files in the site directory and compiles them based on their folder directory into web pages, and places them into the _site folder. The exception is that folders or files marked with a "_" in the front are not compiled by Jekyll into webpages. The _site folder should never be directly edited.

Using Layouts

Layout files are HTML files, except with Liquid/Jekyll tags, which often have these symbols: {} or %. For example, the "default" layout that PiE uses, in _layouts/default.html, describes to Jekyll how to place a header (which includes a navbar), a hero image and message, and a footer. In this file, you would use the tag {{content}} to describe where all the page content of a HTML files that uses this layout goes.

A webpage that uses this template would need to declare what template to use, and other details about the page, which is done in Jekyll frontmatter at the top of the html file. For example, "about/about-us.html" declares in the frontmatter that it uses the default layout, and thus Jekyll will take this page and build it using the default layout. Note that it also declares other things such as the image to use for the hero image, and the message. The cool part of Jekyll is allowing the use of treating pages as objects, and allowing easy templating through similar and easy to change parts.

Further resources

• See the Jekyll docs for an explanation of directory structure