This is the source code to cssbham.com.
A number of files can be used to configure the site:
- site-wide configuration
- contains data used to render the site, e.g. the committee
- contains markdown files for each newletter post
- location for all static assets
Aside from modifying the theme of the site or adding new functionality, no changes outsides these files should need to be made.
A number of utility scripts exist under
_scripts/. Their functionality
should be detailed at the top of each one in a comment.
First, ensure that
gem is installed.
$ gem install bundle
Install required dependencies:
$ bundle install --path vendor/bundle
Run jekyll server:
$ bundle exec jekyll serve
The website should now serving at http://127.0.0.1:4000.
Adding new redirects
To manage a new redirect, then add it to
the format of the entries that are already there.
This avoids needing to add files and folders everywhere, keeping the site cleaner.
Writing a new post
To create a new post, create a markdown file in
_posts with the post
content. You can see a template post already there to borrow from.
The filename should follow a precise format - to create this file from a shell:
$ touch _posts/"$(date +%Y-%m-%d)-<title>.md"
You can add a thumbnail to a post; simply link the thumbnail in the front matter in the markdown file for the post. The thumbnail should be a 150px square for best results.
To add a new calendar event, a member of the CSS committee with access to the calendar must add a new event, and it will automatically appear on the website.
The event data displayed on the webiste is taken directly from the Google Calendar event. Some properties are extracted using XML-like tags from the event description - note that this does not imply that other XML tags are implemented, so no other tags aside from the ones specified here should be used.
|title||the name of it appears on the calendar|
|date||the date and time as it appears on the calendar|
|location||the location as it appears on the calendar|
Note that for the facebook event link, all matching
<a></a> tags are then
removed from the event description.
The time and date format used is chosen automagically depending on the times and dates given in the calendar event. The below table details the process:
|Date Format||Used when|
|DD MMM YYYY - DD MMM YYYY||all day when the year changes|
|DD MMM YYYY HH:MM - DD MMM YYYY HH:MM||time specified when year changes|
|DD MMM - DD MMM||all day when month changes|
|DD MMM HH:MM - DD MMM HH:MM||time specified when month changes|
|DD - DD MMM||all day on different days in same month|
|DD MMM HH:MM - DD MMM HH:MM||time specified on different days in same month|
|DD MM HH:MM - HH:MM||same day|
Updating the committee
To update the committee:
- Remove the old committee's photos from
- Add the new committee's photos into
- Each image should have a 1:1 ratio.
- Add the highest quality images you can (they'll be scaled down later).
- Most common image formats are supported.
- Create all the additional files by running
_data/committee.yamlwith the correct academic year and the new committee's details and pictures (make sure to use the