Jekyll

Creating web sites (like this one) on github-pages using Markdown

Jekyll

Jekyll is a software package that can be used in conjunction with github.com to publish web pages easily.

The web site you are looking at now is created via Jekyll.

More information about Jekyll is available at this page: https://pconrad-webapps.github.io/topics/jekyll

Creating pages

Example of minimal front matter:

---
---

If you want your pages to have an html <title> element, you need to specify at least one default layout (explained below), and the specify this layout along with the title:

---
layout: default
title: Jekyll
---

Nested lists

* First level item 1
 - Second level item a
 - Seond level item b
* First level item 2

In Kramdown, you must indent four spaces to get a second level of list:

* First level item 1
    - Second level item a
    - Second level item b
* First level item 2

Configuration

Layouts

In Jekyll a layout specifies the common features of a category of pages on your site. For example, for a course web site, you might have different layouts for:

Strictly speaking, layouts are optional. It is possible to create a minimally functional site without providing layouts. However, it is recommended to provide at least one default layout. If you don’t, while the pages produced will work in most browsers, pages will not be compliant HTML. For example it is the layout that provides the template for putting in the <head></head> section that contains the page <title></title> element. Thus, without a layout, specifying a title: my title in the front matter will have no effect.

Layouts are created in the _layouts subdirectory of the root of the site repository.

The jekyll documentation provides a good tutorial on creating a default.html layout. This is a good place to start, though your default.html layout can likely be much simpler than the one shown on that site. Here is a much simpler example. Here is some insight into what it contains:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Jekyll</title>
  </head>
  <body id="page-top">
    {{ content }}
  </body>
</html>

Specify default layout in _config.yml

Put this in your _config.yml to specify that default is the default layout for all .md files that don’t specify a different layout. That way, you can just use a minmal front matter that contains only the page title.

defaults:
  -
    scope:
      path: "" # an empty string here means all files in the project
    values:
      layout: "default"

Includes

You can factor out what are sometimes called “partials” in other web frameworks, i.e. something like a #include in C/C++. To do that, you create a directory in the root of the repo called _includes.

The Jekyll documentation contains a tutorial example of doing this, but again it is a bit complex. So, here is a simpler example of creating some common navigation for a site. This provides a link to the root of the site, and a link to the github repo where the site is hosted.

Under _includes, create the file nav.html. This example uses absolute links, but it would be possible to use relative links also.

<nav id="mainNav">
<table border="1" style="width:auto;">
 <tr>
  <td><a href="https://UCSB-CS56-pconrad.github.io">home</a></td>
  <td><a href="https://github.com/UCSB-CS56-pconrad/UCSB-CS56-pconrad.github.io/">github repo</a></td>
 </tr>
</table>
</nav>

Then, edit the _layouts/default.html as shown to include this file:

<body id="page-top">
  

<script>
  console.log("site.url=https://ucsb-cs148.github.io");
  console.log("site.baseurl=");
  console.log("site.data.navigation.home.url=/");
  console.log("site.data.navigation.home.baseurl=/");
  console.log("home_url=/");
  console.log("home_url_final=https://ucsb-cs148.github.io/");
</script>



<script>
  console.log("offering_url=/w24");
  console.log("offering_baseurl=");
  console.log("offering_url_final=https://ucsb-cs148.github.io/w24");
  console.log("offering_title=W24");
</script>


<nav class="navbar navbar-expand-lg navbar-light bg-light">

  <a class="navbar-brand" href="https://ucsb-cs148.github.io/">UCSB CS148</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <ul class="navbar-nav mr-auto"><li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" id="main-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Resources
  </a>
  <div class="dropdown-menu" aria-labelledby="main-dropdown"><a class="dropdown-item" href="https://ucsb-cs148.github.io/topics/">Topics</a><a class="dropdown-item" href="https://ucsb-cs148.github.io/javatopics/">Java Topics</a><a class="dropdown-item" href="https://ucsb-cs148.github.io/jstopics/">JavaScript Topics</a><a class="dropdown-item" href="https://ucsb-cs148.github.io/patterns/">Patterns</a><a class="dropdown-item" href="https://ucsb-cs148.github.io/standards/">Standards</a></div>
</li>
<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" id="offerings-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    W24
  </a>
  <div class="dropdown-menu" aria-labelledby="offerings-dropdown"><a class="dropdown-item offerings-dropdown-item" href="#"
	 data-url="https://ucsb-cs148.github.io/w24"
	 data-term="W24">W24</a><a class="dropdown-item offerings-dropdown-item" href="#"
	 data-url="https://ucsb-cs148.github.io/w23"
	 data-term="W23">W23</a><a class="dropdown-item offerings-dropdown-item" href="#"
	 data-url="https://ucsb-cs148.github.io/f21"
	 data-term="F21">F21</a><a class="dropdown-item offerings-dropdown-item" href="#"
	 data-url="https://ucsb-cs148.github.io/s21"
	 data-term="S21">S21</a></div>
</li>
<li class="nav-item " data-term="W24"><a class="nav-link" href="https://ucsb-cs148.github.io/w24/hwk/"title="Homework Assignments"data-term="W24" >Hwk</a>

</li><li class="nav-item " data-term="W24"><a class="nav-link" href="https://ucsb-cs148.github.io/w24/lab/"title="Lab Assignments"data-term="W24" >Lab</a>

</li><li class="nav-item " data-term="W24"><a class="nav-link" href="https://ucsb-cs148.github.io/w24/teams_page/"title="Teams List"data-term="W24" >Teams</a>

</li><li class="nav-item " data-term="W24"><a class="nav-link" href="https://ucsb-cs148.github.io/w24/lectures/"title="Project"data-term="W24" >Lectures</a>

</li><li class="nav-item " data-term="W24"><a class="nav-link" href="https://ucsb-cs148.github.io/w24/exam/"title="Exams"data-term="W24" >Exam</a>

</li><li class="nav-item " data-term="W24"><a class="nav-link" href="https://ucsb-cs148.github.io/w24/info/calendar/"title="Assignment Calendar"data-term="W24" ><i class='fa fa-calendar' aria-hidden='true'></i>&nbsp;Cal</a>

</li><li class="nav-item dropdown " data-term="W24">
  <a class="nav-link dropdown-toggle" href="#" id="navbar-offering-specific-dropdown-More" data-toggle="dropdown" aria-haspopup="true"
     aria-expanded="false">More</a>
    <div class="dropdown-menu" aria-labelledby="navbar-offering-specific-dropdown-More"><a class="dropdown-item" href="https://ucsb-cs148.github.io/w24/info/syllabus/"title="Syllabus"data-term="" >Syllabus</a>

<a class="dropdown-item" href="https://ucsb-cs148.github.io/w24/info/"title="List of General Information Pages"data-term="" >Info Pages</a>

<a class="dropdown-item" href="https://ucsb-cs148.github.io/w24/info/office_hours/"data-term="" >Office Hours</a>

<a class="dropdown-item" href="https://ucsb-cs148.github.io/w24/staff/"data-term="" >Staff</a>

</div>
</li>


<li class="nav-item dropdown " data-term="W24">
  <a class="nav-link dropdown-toggle" href="#" id="navbar-offering-specific-dropdown-Links" data-toggle="dropdown" aria-haspopup="true"
     aria-expanded="false">Links</a>
    <div class="dropdown-menu" aria-labelledby="navbar-offering-specific-dropdown-Links"><a class="dropdown-item" href="https://canvas.ucsb.edu"title="Overall Grade Information"data-term="" >Canvas</a>

<a class="dropdown-item" href="https://gradescope.com"title="HW and Lab Grades"data-term="" >GradeScope</a>

<a class="dropdown-item" href="https://piazza.com"title="Q&A Forum"data-term="" >Piazza (not in use since 2023)</a>

</div>
</li>


<li class="nav-item dropdown " data-term="W24">
  <a class="nav-link dropdown-toggle" href="#" id="navbar-offering-specific-dropdown-Github" data-toggle="dropdown" aria-haspopup="true"
     aria-expanded="false">Github</a>
    <div class="dropdown-menu" aria-labelledby="navbar-offering-specific-dropdown-Github"><a class="dropdown-item" href="https://github.com/ucsb-cs148-w24"data-term="" ><i class='fab fa-github' aria-hidden='true'></i>&nbsp;ucsb-cs148-w24</a>

</div>
</li>


<li class="nav-item d-none" data-term="W23"><a class="nav-link" href="https://ucsb-cs148.github.io/w23/hwk/"title="Homework Assignments"data-term="W23" >Hwk</a>

</li><li class="nav-item d-none" data-term="W23"><a class="nav-link" href="https://ucsb-cs148.github.io/w23/lab/"title="Lab Assignments"data-term="W23" >Lab</a>

</li><li class="nav-item d-none" data-term="W23"><a class="nav-link" href="https://ucsb-cs148.github.io/w23/teams_page/"title="Teams List"data-term="W23" >Teams</a>

</li><li class="nav-item d-none" data-term="W23"><a class="nav-link" href="https://ucsb-cs148.github.io/w23/lectures/"title="Project"data-term="W23" >Lectures</a>

</li><li class="nav-item d-none" data-term="W23"><a class="nav-link" href="https://ucsb-cs148.github.io/w23/exam/"title="Exams"data-term="W23" >Exam</a>

</li><li class="nav-item d-none" data-term="W23"><a class="nav-link" href="https://ucsb-cs148.github.io/w23/info/calendar/"title="Assignment Calendar"data-term="W23" ><i class='fa fa-calendar' aria-hidden='true'></i>&nbsp;Cal</a>

</li><li class="nav-item dropdown d-none" data-term="W23">
  <a class="nav-link dropdown-toggle" href="#" id="navbar-offering-specific-dropdown-More" data-toggle="dropdown" aria-haspopup="true"
     aria-expanded="false">More</a>
    <div class="dropdown-menu" aria-labelledby="navbar-offering-specific-dropdown-More"><a class="dropdown-item" href="https://ucsb-cs148.github.io/w23/info/syllabus/"title="Syllabus"data-term="" >Syllabus</a>

<a class="dropdown-item" href="https://ucsb-cs148.github.io/w23/info/"title="List of General Information Pages"data-term="" >Info Pages</a>

<a class="dropdown-item" href="https://ucsb-cs148.github.io/w23/info/office_hours/"data-term="" >Office Hours</a>

<a class="dropdown-item" href="https://ucsb-cs148.github.io/w23/staff/"data-term="" >Staff</a>

</div>
</li>


<li class="nav-item dropdown d-none" data-term="W23">
  <a class="nav-link dropdown-toggle" href="#" id="navbar-offering-specific-dropdown-Links" data-toggle="dropdown" aria-haspopup="true"
     aria-expanded="false">Links</a>
    <div class="dropdown-menu" aria-labelledby="navbar-offering-specific-dropdown-Links"><a class="dropdown-item" href="https://gauchospace.ucsb.edu"title="Overall Grade Information"data-term="" >Gauchospace</a>

<a class="dropdown-item" href="https://gradescope.com"title="HW and Lab Grades"data-term="" >GradeScope</a>

<a class="dropdown-item" href="https://piazza.com"title="Q&A Forum"data-term="" >Piazza</a>

</div>
</li>


<li class="nav-item dropdown d-none" data-term="W23">
  <a class="nav-link dropdown-toggle" href="#" id="navbar-offering-specific-dropdown-Github" data-toggle="dropdown" aria-haspopup="true"
     aria-expanded="false">Github</a>
    <div class="dropdown-menu" aria-labelledby="navbar-offering-specific-dropdown-Github"><a class="dropdown-item" href="https://github.com/ucsb-cs148-w23"data-term="" ><i class='fab fa-github' aria-hidden='true'></i>&nbsp;ucsb-cs148-w23</a>

</div>
</li>


<li class="nav-item d-none" data-term="F21"><a class="nav-link" href="https://ucsb-cs148.github.io/f21/hwk/"title="Homework Assignments"data-term="F21" >Hwk</a>

</li><li class="nav-item d-none" data-term="F21"><a class="nav-link" href="https://ucsb-cs148.github.io/f21/lab/"title="Lab Assignments"data-term="F21" >Lab</a>

</li><li class="nav-item d-none" data-term="F21"><a class="nav-link" href="https://ucsb-cs148.github.io/f21/teams_page/"title="Teams List"data-term="F21" >Teams</a>

</li><li class="nav-item d-none" data-term="F21"><a class="nav-link" href="https://ucsb-cs148.github.io/f21/lectures/"title="Project"data-term="F21" >Lectures</a>

</li><li class="nav-item d-none" data-term="F21"><a class="nav-link" href="https://ucsb-cs148.github.io/f21/exam/"title="Exams"data-term="F21" >Exam</a>

</li><li class="nav-item d-none" data-term="F21"><a class="nav-link" href="https://ucsb-cs148.github.io/f21/info/calendar/"title="Assignment Calendar"data-term="F21" ><i class='fa fa-calendar' aria-hidden='true'></i>&nbsp;Cal</a>

</li><li class="nav-item dropdown d-none" data-term="F21">
  <a class="nav-link dropdown-toggle" href="#" id="navbar-offering-specific-dropdown-More" data-toggle="dropdown" aria-haspopup="true"
     aria-expanded="false">More</a>
    <div class="dropdown-menu" aria-labelledby="navbar-offering-specific-dropdown-More"><a class="dropdown-item" href="https://ucsb-cs148.github.io/f21/info/syllabus/"title="Syllabus"data-term="" >Syllabus</a>

<a class="dropdown-item" href="https://ucsb-cs148.github.io/f21/info/"title="List of General Information Pages"data-term="" >Info Pages</a>

<a class="dropdown-item" href="https://ucsb-cs148.github.io/f21/info/office_hours/"data-term="" >Office Hours</a>

<a class="dropdown-item" href="https://ucsb-cs148.github.io/f21/staff/"data-term="" >Staff</a>

</div>
</li>


<li class="nav-item dropdown d-none" data-term="F21">
  <a class="nav-link dropdown-toggle" href="#" id="navbar-offering-specific-dropdown-Links" data-toggle="dropdown" aria-haspopup="true"
     aria-expanded="false">Links</a>
    <div class="dropdown-menu" aria-labelledby="navbar-offering-specific-dropdown-Links"><a class="dropdown-item" href="https://gauchospace.ucsb.edu"title="Overall Grade Information"data-term="" >Gauchospace</a>

<a class="dropdown-item" href="https://gradescope.com"title="HW and Lab Grades"data-term="" >GradeScope</a>

<a class="dropdown-item" href="https://piazza.com"title="Q&A Forum"data-term="" >Piazza</a>

</div>
</li>


<li class="nav-item dropdown d-none" data-term="F21">
  <a class="nav-link dropdown-toggle" href="#" id="navbar-offering-specific-dropdown-Github" data-toggle="dropdown" aria-haspopup="true"
     aria-expanded="false">Github</a>
    <div class="dropdown-menu" aria-labelledby="navbar-offering-specific-dropdown-Github"><a class="dropdown-item" href="https://github.com/ucsb-cs148-f21"data-term="" ><i class='fab fa-github' aria-hidden='true'></i>&nbsp;ucsb-cs148-f21</a>

</div>
</li>


<li class="nav-item d-none" data-term="S21"><a class="nav-link" href="https://ucsb-cs148.github.io/s21/hwk/"title="Homework Assignments"data-term="S21" >Hwk</a>

</li><li class="nav-item d-none" data-term="S21"><a class="nav-link" href="https://ucsb-cs148.github.io/s21/lab/"title="Lab Assignments"data-term="S21" >Lab</a>

</li><li class="nav-item d-none" data-term="S21"><a class="nav-link" href="https://ucsb-cs148.github.io/s21/teams_page/"title="Teams List"data-term="S21" >Teams</a>

</li><li class="nav-item d-none" data-term="S21"><a class="nav-link" href="https://ucsb-cs148.github.io/s21/lectures/"title="Project"data-term="S21" >Lectures</a>

</li><li class="nav-item d-none" data-term="S21"><a class="nav-link" href="https://ucsb-cs148.github.io/s21/exam/"title="Exams"data-term="S21" >Exam</a>

</li><li class="nav-item d-none" data-term="S21"><a class="nav-link" href="https://ucsb-cs148.github.io/s21/info/calendar/"title="Assignment Calendar"data-term="S21" ><i class='fa fa-calendar' aria-hidden='true'></i>&nbsp;Cal</a>

</li><li class="nav-item dropdown d-none" data-term="S21">
  <a class="nav-link dropdown-toggle" href="#" id="navbar-offering-specific-dropdown-More" data-toggle="dropdown" aria-haspopup="true"
     aria-expanded="false">More</a>
    <div class="dropdown-menu" aria-labelledby="navbar-offering-specific-dropdown-More"><a class="dropdown-item" href="https://ucsb-cs148.github.io/s21/info/syllabus/"title="Syllabus"data-term="" >Syllabus</a>

<a class="dropdown-item" href="https://ucsb-cs148.github.io/s21/info/"title="List of General Information Pages"data-term="" >Info Pages</a>

<a class="dropdown-item" href="https://ucsb-cs148.github.io/s21/info/office_hours/"data-term="" >Office Hours</a>

<a class="dropdown-item" href="https://ucsb-cs148.github.io/s21/staff/"data-term="" >Staff</a>

</div>
</li>


<li class="nav-item dropdown d-none" data-term="S21">
  <a class="nav-link dropdown-toggle" href="#" id="navbar-offering-specific-dropdown-Links" data-toggle="dropdown" aria-haspopup="true"
     aria-expanded="false">Links</a>
    <div class="dropdown-menu" aria-labelledby="navbar-offering-specific-dropdown-Links"><a class="dropdown-item" href="https://gauchospace.ucsb.edu"title="Overall Grade Information"data-term="" >Gauchospace</a>

<a class="dropdown-item" href="https://gradescope.com"title="HW and Lab Grades"data-term="" >GradeScope</a>

<a class="dropdown-item" href="https://piazza.com"title="Q&A Forum"data-term="" >Piazza</a>

</div>
</li>


<li class="nav-item dropdown d-none" data-term="S21">
  <a class="nav-link dropdown-toggle" href="#" id="navbar-offering-specific-dropdown-Github" data-toggle="dropdown" aria-haspopup="true"
     aria-expanded="false">Github</a>
    <div class="dropdown-menu" aria-labelledby="navbar-offering-specific-dropdown-Github"><a class="dropdown-item" href="https://github.com/ucsb-cs148-s21"data-term="" ><i class='fab fa-github' aria-hidden='true'></i>&nbsp;ucsb-cs148-s21</a>

</div>
</li>


</ul>
  </div>
</nav>


   {{content}} 

Dates

Dates in Jekyll are formatted using the “Liquid filter”.

More information is here: https://help.shopify.com/themes/liquid/filters/additional-filters#date

An example is:

12-hour time (%I:%M:%S %p)


<!-- 03:20:07 PM -->

Syntax of Templates

The template used by Jekyll is called Liquid.

The following page summarizes the syntax of things such as if statements, for loops, variable assignment, etc:

https://github.com/Shopify/liquid/wiki/Liquid-for-Designers