Step by Step Tutorial

2. LiquidPermalink

Liquid is where Jekyll starts to get more interesting. Liquid is a templating language which has three main parts: objects, tags and filters.

Objects tell Liquid where to output content. They’re denoted by double curly braces: {{ and }}. For example:

{{ page.title }}

Outputs a variable called page.title on the page.

Tags create the logic and control flow for templates. They are denoted by curly braces and percent signs: {% and %}. For example:

{% if page.show_sidebar %}
  <div class="sidebar">
    sidebar content
  </div>
{% endif %}

Outputs the sidebar if page.show_sidebar is true. You can learn more about the tags available to Jekyll here.

Filters change the output of a Liquid object. They are used within an output and are separated by a |. For example:

{{ "hi" | capitalize }}

Outputs Hi. You can learn more about the filters available to Jekyll here.

Now it’s your turn, change the Hello World! on your page to output as lowercase:

...
<h1>{{ "Hello World!" | downcase }}</h1>
...

It may not seem like it now, but much of Jekyll’s power comes from combining Liquid with other features.

In order to see the changes from downcase Liquid filter, we will need to add front matter.

That’s next. Let’s keep going.

Back