course-website

course-website

This is a Jekyll template, patterned off my main Jekyll template, for organizing a course website and hosting it on Github.

Steve's No-Good-Very-Bad Course Website Jekyll Template

This repository contains a Jekyll template, patterned entirely off my no-good-very-bad Jekyll Template at svmiller.com, for organizing a course website. I should note that because I ganked it from my website template, there's a lot of empty tags in the template that make reference to things that don't appear in the main .yml file. In other words, they reference things that should be there but, because they're not there, ultimately won't interfere with how the site renders.

Installation

This assumes that you have a working installation of Jekyll. If you don't, first visit Jekyll's documentation to learn how to.

  1. Fork this repo and clone it locally.
cd ~/Sites/

git clone https://github.com/YOUR_USER_NAME/course-website.git
  1. Create a new empty theme with Jekyll
cd ~/Sites/

jekyll new-theme ipa

             create ~/Sites/ipa/assets
             create ~/Sites/ipa/_layouts
             create ~/Sites/ipa/_includes
             create ~/Sites/ipa/_sass
             create ~/Sites/ipa/_layouts/page.html
             create ~/Sites/ipa/_layouts/post.html
             create ~/Sites/ipa/_layouts/default.html
             create ~/Sites/ipa/Gemfile
             create ~/Sites/ipa/ipa.gemspec
             create ~/Sites/ipa/README.md
             create ~/Sites/ipa/LICENSE.txt
         initialize ~/Sites/ipa/.git
             create ~/Sites/ipa/.gitignore
Your new Jekyll theme, ipa, is ready for you in ~/Sites/ipa! 
For help getting started, read ~/Sites/ipa/README.md. 

  1. Open the ipa.gemspec file and edit it as follows:
  spec.summary    =    "WRITE A SHORT SUMMARY OF YOUR THEME"
  spec.homepage    =    "http://address.com"

### Update the following two version numbers as per what's on your system.
  spec.add_development_dependency "bundler", "~> 2.0.1"
  spec.add_development_dependency "rake", "~> 12.3.2"
  1. Run bundle install inside ~/Sites/ipa/. This should run successfully and install all the necessary gems. It will also create a Gemfile and a Gemfile.lock inside your project.

  2. Now we are ready to migrate necessary theme files from ~/Sites/course-website/ to ~/Sites/ipa/. Copy the following files and folders. If a folder already exists (e.g. _includes), just copy files inside. If a file already exists, overwrite it.

_config.yml
_css/
_data/
_images/
_includes/
_layouts/
_posts/
_sass/
_site/
assets/
blog.md
CNAME
course-materials.md
feed.xml
index.html
lectures.md
LICENSE.txt
README.md
sitemap.xml
syllabus/
untitled-lecture/
  1. Edit _config.yml to customize site details. Then fire up jekyll serve. You may need to do bundle exec jekyll serve instead, if you have a separate Ruby installation for Jekyll's purposes. The site template should be only at http://localhost:4000 now.

  2. Follow the remaining directions below to fully customize your site.

Here are the things you should tweak to make it your own:

  • _config.yml. Naturally. This should be familiar if you're accustomed to Jekyll. Do note, for convenience, that I made the syllabus field a full URL entry. You should also fill out the githubdir field since the goal is to make your course (and, by extension, the knowledge you propose to communicate) open source and reproducible on Github. Let us know where it is.
  • course-materials.md: Fudge this to add in helpful information about your course (e.g. the book and whatever else you want to communicate).
  • index.html: You won't need to edit much but, if you want your own lead image for your course website that's not from Stand and Deliver (I don't know why you would do this, but, hey, it's your class...), edit that Jekyll liquid tag I created that embeds images in my spiffy way. This should be intuitive. Just specify a relative path for the image you want to use, how wide you want it to be, and whatever caption you want to add to it.
  • _data/lectures.yml: This uses YAML data to render Github and local links to lectures. This should be straightforward (see my example file) but feel free to look at this tutorial if you want to better understand what's happening here. You could also edit lectures.md if, for example, you render your lectures to HTML in lieu of PDF. I do PDF. Changing this isn't hard, though, and should be straightforward. Basically, change ".pdf" to ".html" as you see it and then, probably, find a nice icon for HTML on Font Awesome.
  • _includes/nav.html: You won't have to tweak this, per se, but you may want to if, for example, you want to add a course blog. I don't do that, but I do prove a blog.md file. Head to Font Awesome if you're looking for the perfect icon to go with it.
  • CNAME: Adding a special domain or subdomain to your course website? Change it here. Is its own Github page on a special account you created on Github (but you're not using a special domain on top of that [example])? Delete it.

You can see a snapshot of what it looks like below. You can also try it out here: http://course-website.svmiller.com/

Feel free to contact me at svmille@clemson.edu. Send along some cheers too if you find it useful.

jekyll logo

Want a Jekyll website built?

Hire a Jekyll developer