Setup: New Course

Setting up a new course level repo in this format

Welcome!

Dear instructor,

We are happy that you are considering using these website templates for your course. We’ve been enjoying a relatively standardized setup and the convenience of hosting our course sites via GitHub pages. These templates are being developed and used by the instructors at UCSB, and we welcome other instructors to help us and improve documentation. Submit any questions or concerns via the GitHub Issues.

The templates run using the Jekyll engine, which mainly means that the exact file names and their relative placement are very important.

Documentation for the setup is a work in progress, but below are the rough steps to get you started.

In addition to this page, you may find this page helpful: Basic Concepts

Course Organization, Course Repo, Offering Repo

The first important step is to understand the terminology we are using, and the way the pages are organized.

Set up a GitHub organization

To create a new course, first create the GitHub Organization for the course.

Setting up the Course Level Repo

Then, create the course level repo. That repo should have the name of the organization, followed by .github.io; this is an important naming convention that is required by GitHub Pages and is not arbitrary. You must follow it, or GitHub pages will not work properly.

Add the boilerplate files

For example,

$ git status
On branch master
... 
Changes not staged for commit:
...
	modified:   .gitignore

Untracked files:
  (use "git add <file>..." to include in what will be committed)

	.travis.yml
	Gemfile
	jekyll.sh
	setup.sh
$ git add .
$ git status
...
Changes to be committed:
  (use "git reset HEAD <file>..." to unstage)

	modified:   .gitignore
	new file:   .travis.yml
	new file:   Gemfile
	new file:   jekyll.sh
	new file:   setup.sh

$ git commit -m "Added initial boilerplate files"

Configure your site via _config.yml

Configure the top navigation menu

# the production_url is the url that the parent/child site have in common
#  e.g. production_url: https://ucsb-cs24.github.io
#  for main site http://ucsb-cs24.github.io
#  and child sites
#    https://ucsb-cs24.github.io/w18
#    https://ucsb-cs24.github.io/f18
#    https://ucsb-cs24.github.io/s19
#    etc.

production_url: https://ucsb-int15.github.io

# List the title and url for each item on navigation bar.
# For items that should be relative urls, put the baseurl of the site
# they come from, / for main site, and /f18, /s19, etc for child sites.

home:
   title: UCSB INT15
   url: /
   baseurl: /

offerings:
   title: S19
   url: /
   baseurl: /s19

offering_links:
  - title: Syllabus
    url: /info/syllabus/
    description: "University and course policies"

Add site’s pages

---
title: "INT 15: Data Science Tools and Techniques, Spring 2019, Franks and Kharitonova"
---

# INT 15: Data Science Tools and Techniques, Spring 2019, Franks and Kharitonova

Welcome to INT 15!

Once you see the index page show up, you can customize it with the drop-down menus, which will work with the folders you’ll be creating:

---
title: "INT 15: Data Science Tools and Techniques, Spring 2019, Franks and Kharitonova"
---

# INT 15: Data Science Tools and Techniques, Spring 2019

## Welcome to INT 15!

{% include collapse-button.html label="Information" id="info-list" %}
<div class="collapse" id="info-list">
 <div class="card card-body">
  {% include info_list.html %}
 </div>
</div>


{% include collapse-button.html label="Lecture Notes and Slides" id="lectures" %}
<div class="collapse" id="lectures">
 <div class="card card-body" markdown="1">
   {%include lecnot_table.html %}
 </div>
</div>


{% include collapse-button.html label="Homework" id="hwk" %}
<div class="collapse" id="hwk">
 <div class="card card-body">
  {% include hwk_table.html %}
 </div>
</div>

{% include collapse-button.html label="Lab" id="lab" %}
<div class="collapse" id="lab">
 <div class="card card-body">
  {% include lab_table.html %}
 </div>
</div>

{% include collapse-button.html label="Exams" id="exams" %}
<div class="collapse" id="exams">
 <div class="card card-body">
  {%include exam_table.html %}
 </div>
</div>

For now, let’s just add the following stub:

---
title: "Syllabus"
layout: default
ready: true
---

# Syllabus <a name="top"></a>

This document and others linked within it should be your PRIMARY source for understanding the expectations of this course. Be sure to read it *carefully*.
You must contact the instructor for clarification if you receive information from any another source that is in contradiction to what is provided below.

$ git add _data _info index.md

$ git commit -m "Added index.md, _data/navigation.yml and _info/syllabus.md"
$ git push origin master

Now you can begin customizing the site with the rest of the pages.

Older instructions

Step 1: Create github organization

For UCSB CS, our naming convention is, for example:

… etc.

Step 2: Create Github repo

The github repo MUST follow the Github Pages standard naming convention if you want to host on Github pages

… etc.

Step 3: Copy in boilerplate files

Follow instructions to Copy in boilerplate files. They all go in the root directory of the repo.

Step 4: Configure _config.yml

Create a file with the name _config.yml in the root directory of the repo, following both sets of instructions below.

The order of items in the _config.yml file doesn’t matter.

TODO: Continue from here

Develop and debug locally

You can skip this step if you’d rather not have to test the site locally, which means that you’ll probably be operating on the live version of the website running from the course repo.

If you want to be able to test your site locally, you’ll first need to install the Ruby Version Manager (rvm).

Develop and debug locally and via Travis CI

Related topics: