Webpage for CS 341 (formerly CS 241)

Option 1: Build from a Docker container

First, after cloning the website repo, make sure the _coursebook submodule is updated.

git submodule init
git submodule update --recursive

Make a folder separate from the folder which holds the course repository and copy into that folder Dockerfile, Gemfile, and Gemfile.lock.

Run id -u in the terminal to get your user id. Then, in the Dockerfile, replace number in the USER line with that id in the following format

USER <uid>:<uid>

If you are not able to run docker commands without using sudo, add yourself to the docker sudo users group with the following commands:

sudo groupadd docker
sudo usermod -aG docker $USER
newgrp docker

Reboot the terminal with sudo reboot for the changes to take effect. This will give your uid permissions to run docker.

See the following link for more information on this step: https://docs.docker.com/engine/install/linux-postinstall/

Lookup the ip address of your machine using ip a. The inet address for either the loopback interface or the ens interface will work.

Build an image from the dockerfile and run it as a contaiiner:

docker build -t course_site .
docker run -v /home/marial5/illinois-cs241.github.io/:/workspace -p 4000:4000 -it course_site

In a web browser go to the ip address listed from the ip a command and port number 4000 (i.e. localhost/4000). The website will be running there.

Option 2: Run locally

Dependencies

• Ruby
• bundler (Ruby's package manager)
• gcc
• make
• hunspell

Installing

First make sure you have ruby >= 2.6. We recommend using rvm

rvm use 2.6.0

After, we recommend bundler to install all the dependencies

sudo gem install bundler

Then nagivate to the root of the repostory and install

bundle install

Finally, your repository has the submodules needed

git submodule init
git submodule update --recursive

Running

To build the site it is as simple as

bundle exec rake

If you want to build and serve a simple web server, run

bundle exec rake serve

If you want to run a spell check do

bundle exec rake spell_check

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
  • assignments.yaml: stores the assignments info. Update this to release/hide assignment
  • 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.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
• _coursebook Markdown directory with all the coursebook material

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.

Syntax Highlighting

You might want to add syntax highlighting.

This can be done by fencing with triple backticks:

A full list of languages that Jekyll supports.