Unit 02 · lesson
Jekyll `page`, `site`, and Built-In Variables
Jekyll page, site, and Built-In Variables
Once you understand a Liquid object, the next question is:
Where did that value come from?
Jekyll exposes several data scopes during rendering.
page
page represents data for the current page/document.
Custom front matter becomes available here.
---
title: Network Project
level: beginner
---
{{ page.title }}
{{ page.level }}
Jekyll also supplies page-related values such as URLs and other metadata depending on the content type.
site
site represents site-wide information and collections of content/data.
You will later use:
{{ site.title }}
and iterate structures such as:
site.posts
site.data
jekyll
Jekyll also exposes build-related data, including environment information used later for production/development behavior.
The rule is not "memorize everything in the variable reference."
The rule is:
Identify the scope that owns the data.
Guided inspection
Add a site title to _config.yml only if your project already has configuration introduced by your environment:
title: My Portfolio
Restart the Jekyll server after configuration changes when required.
Then compare:
{{ site.title }}
{{ page.title }}
One is site-wide.
One belongs to the current page.
Scope mistake
If you define title in page front matter but write:
{{ site.title }}
and get an unexpected value, the syntax may be valid.
Your scope is wrong.
That is a better diagnosis than "Liquid doesn't work."
Portfolio action
Identify three pieces of information and decide where they belong:
- portfolio/site name;
- current page title;
- current page description.
Write:
Value:
Scope: site/page
Reason:
Checkpoint
For one generated page, mark every dynamic value you currently output as either site or page data.
If you cannot say who owns the value, you do not understand the template yet.