Definition

Jekyll is, at its core, a text transformation engine. The concept behind the system is this: you give it text written in your favorite markup language, be that Markdown, Textile, or just plain HTML, and it churns that through a layout or a series of layout files. Throughout that process you can tweak how you want the site URLs to look, what data gets displayed in the layout, and more.

How Jekyll generates a site

Jekyll Post and Pages filenames works as urls slugs.

Articles

Content can be published in Jekyll in several ways:

• Posts
• Collections
• Pages
• Data

Article Metadata

Each Post is composed by metadata and content. This metadata is called the Front Matter and it needs to be located at the top of each post between the special characters --- to assign custom variables to the current post.

The Front Matter is the piece of code that tell Jekyll to process a page or post in a special way, where you can change the layout, language or more configurations that if not specified they just took the default settings of config.yml. .

e.g.:

---
title: My cool blog
---

It has two requirements:

• It must be at the beginning of the file
• It must be in YAML format

Predefined global variables

Predefined global that can be specified in the front matter of a post or page.

layout

If set, this specifies the layout file to use. Use the layout file name without the file extension. Layout files must be placed in the _layouts directory.

permalink

If you need your processed blog post URLs to be something other than the site-wide style (default /year/month/day/title.html), then you can set this variable and it will be used as the final URL.

published

Set to false if you don’t want a specific post to show up when the site is generated.

Source: http://jekyllrb.com/docs/frontmatter/

Formatting syntax

The most common formatting syntax used in posts and pages are:

• Markdown https://daringfireball.net/projects/markdown/
• kramdown (a more powerful Markdown superset and currently used in Github pages)

Syntax highlighting

By default Jekyll uses Rouge as its syntax highlter and is compatible with Pygments highlighter.

Templating system

Jekyll uses the Liquid template engine: https://github.com/Shopify/liquid/wiki/Liquid-for-Designers.

The template files processed by Liquid uses three main concepts to generate the valid HTML files:

• Tags

  The programming logic in Luiqid themes

  https://help.shopify.com/themes/liquid/tags

  e.g. { % if content == blank % }

• Objects

  Attributes containers to display content

  https://help.shopify.com/themes/liquid/objects

  e.g. { { page.slug } }

• Filters

  Modify the default output for each component

  https://help.shopify.com/themes/liquid/filters

  e.g. { { page.url | prepend: site.baseurl } }

• Liquid reference: https://help.shopify.com/themes/liquid

• Liquid cheatsheet: https://www.shopify.ca/partners/shopify-cheat-sheet

Liquid Related links

• https://github.com/Shopify/liquid/wiki/liquid-for-designers
• https://www.shopify.ca/partners/shopify-cheat-sheet
• https://jekyllrb.com/docs/templates/
• https://help.shopify.com/themes/liquid/
  • https://www.shopify.ca/partners/shopify-cheat-sheet

Commands

• Local instance with bundle

$ bundle exec jekyll serve --watch --drafts

References

• Jekyll Official Documentation