GitHub Pages leverages the power of Jekyll to transform your Markdown and HTML files into a static website.
Front Matter: All Markdown (.md) and Jupyter Notebook (.ipynb) files with front matter are processed into a static data structure, making their keys and values accessible to the GitHub Pages system via Jekyll.
Jekyll Language: Jekyll can access all site-wide keys and values defined in _config.yml, as well as individual page front matter keys and values. This allows for dynamic organization and rendering of documents based on their metadata.
Jekyll and Liquid
The primary purpose of Jekyll within GitHub Pages is to help developers create dynamic web pages. By using site and page front matter, you can organize and render pages based on data. Liquid provides the templating syntax that allows you to dynamically generate content within your Jekyll templates. In essence, Jekyll is the system, and Liquid is the templating language.
Jekyll and Liquid provide programming constructs that are essential in all programming environments. These constructs are particularly relevant to concepts required by AP (CSP, CSA) and college articulated courses (CSSE, Data Structures).
Below are these key elements as defined in Liquid.
Variable Assignments: This assigns all the posts in the site to the variable rawposts.
{% assign rawposts = site.posts %}
Conditionals: This checks if the number of posts is greater than zero.
{%- if posts.size > 0 -%}
{%- endif -%}
Loops: This iterates through each post in the site's posts.
{%- for post in site.posts -%}
{%- endfor -%}
Include: Include (HTML)
{%- include post_list_image_card.html -%}
FRQ 1: Explain the relationship between Jekyll and Liquid. What is the role of Front Matter in making data accessible to both?
Language Comparisons
Since we are mentioning essential programming constructs, following are examples of similar constructs in languages you will be exposed to in the CompSci pathway at Del Norte High School.
JavaScript
// Variable Assignments
var rawposts = site.posts;
// Conditionals
if (posts.length > 0) {
// conditional code here
}
// Loops
for (let post of site.posts) {
// repeating code here
}
// Include (Function)
import { function } from './file.js';
AP CSP Pseudocode
// Variable Assignments
rawposts ← site.getPosts()
// Conditionals, they use language "Selection"
IF (LENGTH(posts) > 0) {
// conditional code here
}
// Loops, the use language "Interaction"
FOR EACH post IN site.getPosts() {
// repeating code here
}
// Include (Procedure)
INCLUDE function FROM file
Python
#Variable Assignments
rawposts = site.posts
#Conditionals
if len(posts) > 0:
pass # conditional code here in place of pass
#Loops
for post in site.posts:
pass # repeating code here in place of pass
#Include (Function)
from file.py import function
Java
import java.util.List;
// Variable Assignments
List <Post> rawposts = site.getPosts();
// Conditionals
if (posts.size() > 0) {
// conditional code here
}
// Loops
for (Post post : site.getPosts()) {
// repeating code here
}
// Include (Method)
import static com.example.file.function;
FRQ 2: Compare the Liquid Loop construct to its equivalent in Python. How do both achieve the concept of iteration?
Blogging Example Code
A core part of this project is the blogs layout (_layouts/blogs.html). This file is used to organize the blog list on the website. Read the comments in the code and consider making changes to the data or code to alter the appearance of the blogs. Try to modify the blog layout to better suit your needs or preferences.
<!-- This inserts content from the page using this layout -->
{{ content | markdownify }}
<!-- Get all posts -->
{% assign rawposts = site.posts %}
<!-- Hide posts if front matter flag hide:true -->
{% assign posts = '' | split:'' %}
{% for post in rawposts %}
{% if post.hide != true %}
{% assign posts = posts | push: post %}
{% endif %}
{% endfor %}
<!-- Sort posts by rank, then date, put posts with "sticky_posts: 1" front matter at the top -->
{% assign grouped_posts = posts | group_by: "sticky_rank" | sort: "name", "last" %}
{% assign sticky_posts = '' | split:'' %}
{% assign non_sticky_posts = '' | split:'' %}
<!-- Split posts into sticky and non-sticky -->
{% for gp in grouped_posts %}
{%- if gp.name == "" -%}
{% assign non_sticky_posts = gp.items | sort: "date" | reverse %}
{%- else %}
{% assign sticky_posts = sticky_posts | concat: gp.items %}
{%- endif %}
{% endfor %}
<!-- Generate Card for each Post -->
{% assign sticky_posts = sticky_posts | sort: "sticky_rank", "last" %}
{% assign posts = sticky_posts | concat: non_sticky_posts %}
{%- if posts.size > 0 -%}
{%- if page.list_title -%}
<h2 class="post-list-heading">{{ page.list_title }}</h2>
{%- endif -%}
<ul class="post-list">
{%- assign date_format = site.minima.date_format | default: "%b %-d, %Y" -%}
{%- for post in posts -%}
<li>
<!-- This file can be found in _includes -->
{%- include post_list_image_card.html -%}
</li>
{%- endfor -%}
</ul>
{%- endif -%}
FRQ 3: Analyze the liquid code block in the blogging example. Describe the two filtering and sorting actions it performs on the posts.
HTML Included Code
The block of code below is located in the system at _includes/post_list_image_card.html. This file is included in the blogs and generates the HTML for the card. If you want to change the style or appearance of the card output for the blogs, you should modify the _includes/post_list_image_card.html file.
<!-- Box shadow and rounded corners, using Primer CSS classes https://github.com/primer/css -->
<div class="Box box-shadow-medium rounded-1 col-12">
<!-- Check if the post has an image --><!-- Container for the post content, taking up 8 columns -->
<div class="col-8 d-table-cell p-3">
<!-- Post title wrapped in an h3 tag -->
<h3>
<!-- Link to the post's URL with the post title as the link text -->
<a class="post-link" href="">
</a>
</h3>
<!-- Post description paragraph -->
<p class="post-meta-description"></p>
<!-- Post date paragraph, formatted according to the date_format variable -->
<p class="post-meta"></p>
</div>
</div>
FRQ 4: Based on the HTML included code, how is the display of the post image handled? What would happen if a post was missing the image front matter key?
Conclusion
Jekyll and Liquid are powerful tools that extend the functionality of GitHub Pages beyond simple static hosting. By leveraging front matter and Liquid's programming constructs, developers can create complex, data-driven static websites, which serves as a valuable learning experience in modern web development principles.
FRQ 5: Briefly summarize how the combination of Jekyll, Liquid, and Front Matter enables a static website to feel dynamic.
