Webpage for CS 241

Jekyll and Github Pages

This website is made with Jekyll and Github Pages.

Jekyll is a static site generator that allows us to write markdown instead of html and comes with Liquid Templating which uses a combination of tags, objects, and filters to load dynamic content and has a nice cheat sheet.

Github Pages will host this repo not only as a code base but will also as a webserver for our website.

The magic happens in the integration. Github Pages has Jekyll integration, so if you push any changes to this repo, then Github Pages will automatically have Jekyll generate a new static site and serve it. This means that you can makes changes to the webpage simply by pushing changes to it. No more package installations, no more Angular JS, no more rsync. This also means that you can take advantage of the Github UI and edit files from a web browser.

Structure

• _data: stores configurations files
  • labs.yaml: stores the lab info
  • mps.yaml: stores the mp info
  • schedule.yaml: stores the lecture schedule
  • staff.yaml: stores the staff info
  • honors_projects.yaml
    • honors_schedule.yaml
    • malloc_hof.yaml Winners for the malloc contest
    • man.json Autogenerated json file that resolves man page link
    • staff-emeritus.yaml Staff that have contributed greatly to the course
    • staff-gone.yaml All staff that have left
    • staff.yaml Current staff
• _includes: holds html that is used everywhere
  • head.html: holds code for including other files
  • header.html: top nav bar code
• _layouts: hold layout templates
  • doc.html: layout template for documentation
• _docs: where all the documentation is stored as markdown
• _sass: sass files (files named appropriately)
• css: holds css
• images: holds images
• js: holds javascripts
• lib: folder for libraries
• static: holds other static content, like PDFs
• _config.yml: global site configuration
• _pages Keeps stray pages
  • 404.html: 404 error page
  • help.md: markdown for help page
  • index.md: syllabus page
  • labs.html: lab schedule page
  • mps.html: mp schedule page
  • schedule.html: lecture schedule page
  • staff.html: listing of staff

How to write documentation

Where to create the file

All documentation is stored in assignment-docs repository. To make any changes, go to that repository.

Content for this file

Once you have created this file you can add all the markdown you please. Somethings to take note of is that javascript will run to make all the areas between h2/## tags into sections and add an entry to the table of content. The title of the section and the entry of in the table of content is exactly the text that comes after your h2/##. Also h1/# is reserved for the title which will automatically be added in.

Front Matter (configurations)

After you are done writing content you need to add front matter to the top of the file. Front matter allows Jekyll to know things like "which template should be used to generate this page", "what is the title of this page?", and "should this page be accessible through a custom link?". To put it simply just add the following:

---
layout: doc
title: "Password Cracker"
submissions:
- title: Part 1
  due_date: 10/17 11:59pm
  graded_files:
  - cracker1.c
- title: Part 2
  due_date: 10/24 11:59pm
  graded_files:
  - cracker2.c
learning_objectives:
  - Multithread Programming and its performance gains
  - Using a thread safe datastructure
  - Using synchronization primitives
wikibook:
  - "Pthreads, Part 1: Introduction"
  - "Pthreads, Part 2: Usage in Practice"
  - "Synchronization, Part 1: Mutex Locks"
  - "Synchronization, Part 2: Counting Semaphores"
  - "Synchronization, Part 3: Working with Mutexes And Semaphores"
  - "Synchronization, Part 4: The Critical Section Problem"
  - "Synchronization, Part 5: Condition Variables"
  - "Synchronization, Part 6: Implementing a barrier"
---

layout: doc will tell jekyll to use _layouts/doc.html as the layout.

title: "Password Cracker" will tell jekyll that the title is "Password Cracker" and add that in an h1 tag.

submissions:
- title: Part 1
  due_date: 10/17 11:59pm
  graded_files:
  - cracker1.c
- title: Part 2
  due_date: 10/24 11:59pm
  graded_files:
  - cracker2.c

Is a list of submissions. This will add:

Part 1 due 10/17 11:59pm
  cracker1.c
Part 2 due 10/24 11:59pm
  cracker2.c

To the sidebar of the docs.

learning_objectives:
  - Multithread Programming and its performance gains
  - Using a thread safe datastructure
  - Using synchronization primitives

Will automatically add a section labeled "Learning Objectives" to the top of the docs with the appropriate bullet points.

wikibook:
  - "Pthreads, Part 1: Introduction"
  - "Pthreads, Part 2: Usage in Practice"
  - "Synchronization, Part 1: Mutex Locks"
  - "Synchronization, Part 2: Counting Semaphores"
  - "Synchronization, Part 3: Working with Mutexes And Semaphores"
  - "Synchronization, Part 4: The Critical Section Problem"
  - "Synchronization, Part 5: Condition Variables"
  - "Synchronization, Part 6: Implementing a barrier"

Will automatically add a section labeled "Suggested Readings" to the top of the docs. Note that these are the titles of the pages of the wikibook and must be wrapped in quotes to escape the ":". This will also automatically generate the links to the wikibook (and only wikibook). If you want to link to something outside of the wikibook, then you will need to create another section for that.

If you do not want students to be able to access this page (say you are beta testing), then put them in _drafts and you can preview the site with --drafts, when you build with Jekyll.

Syntax Highlighting

Also you might want to add syntax highlighting.

This can be done by fencing with triple backticks:

A full list of languages that Jekyll supports.