This repo is the website for BitShifters, which is hosted using GitHub pages.
Since GitHub pages serves only static html content, we can use Jekyll to "compile" templated content into a live static HTML website.
Jekyll typically builds the website into an output folder in the root of the repo called _site, however, GitHub helpfully does this build for us when new files are committed into a GitHub pages repo, so that is why there is no _site folder committed in the repo.
The site uses the Bootstrap HTML/CSS framework. This makes it very easy to add responsive and well designed components to pages within minimum fuss.
It is easy to modify the website, just clone the repo and make the desired changes. To reflect the changes live, simply push changes back to the GitHub repo.
If you want to test locally before pushing to the live site repo, you need to install Jekyll.
A guide for installing Jekyll on windows can be found here
To build the site:
jekyll build
To run a local http server to see the site:
jekyll serve
To run a local http server that automatically rebuilds the site when any changes are made (very useful!):
jekyll serve --watch
The overall site is designed to be a simple CMS to make it easy for us to add new content (such as productions or competitions). Since the site is static only, there is no backend database, so things like search and dynamic filters for content are not easy to achieve.
The site has 4 main pages, each with a custom layout:
- home (default.html)
- archive (archive.html)
- info (info.html)
- support (support.html)
- art (art.html)
The site currently supports 6 types of post:
- Productions (
prods
category,_posts/prods
) - pieces of work created by the Bitshifters collective - Competitions (
compo
category,_posts/compos
) - competitions we've entered productions into - Archives (
compos
category,_posts/archives
) - pieces of work created by anyone else. They are treated by the site as productions also, but just categorised differently - Team (
team
category,_posts/team
) - one post per team member that wants to be listed in the.NFO
page - Support (
support
category,_posts/support
) - one post per support topic that will be listed in thesupport.html
page
Some files (templates, layouts, includes etc.) are mostly HTML, with embedded Liquid templating commands that are compiled by Jekyll.
Some files (pages, posts, data) are YAML style configuration files, with embedded variables and markdown formatted content.
THE FOLLOWING IS OUT OF DATE, BEWARE!
To add a new production:
- Place a image and a disk image file (SSD or DSD) in
/content/
- Create a .md file in the
_posts/prods/
folder with the correct filename convention, and the content you wish to publish - Apply the correct category and tags, and the new production will automatically be listed in the right place when the site is rebuilt
Post Filename format:
yyyy-mm-dd-team-prodname.md
---
layout: prods_post
category: [posts, prods]
tags: whatever tags you like. For compo entries, add a tag that matches a compo_id
title: name of the production
img: filename of the image in /content/ for this production (no need for any path) eg. TheMaster-Demo128.png
alt: text describing the image
team: name of the team that created the production
authors: members of the team
year: year that the production was created
type: type of the production (whatever text you like)
platform: name of the target platform
download: filename of the SSD or DSD disk image in /content/ for this production
source: link to the source code for this production (if any)
pouet: link to the pouet page for this production (if any)
video: link to a video for this production (if any)
---
PUT YOUR MARKDOWN FORMATTED POST CONTENT HERE
To add a new archive:
- Place an image and a disk image file (SSD or DSD) for the archive in
/content/
- Create a .md file in the
_posts/archives/
folder with the correct filename convention, and the content you wish to publish - Apply the correct category and tags, and the new production will automatically be listed in the right place when the site is rebuilt
Post Filename format:
yyyy-mm-dd-team-prodname.md
---
layout: prods_post
category: [posts, archives]
tags: whatever tags you like
... (same properties as productions above)
To add a new competition:
- Place an image for the archive in
/content/
- Create a .md file in the
_posts/compos/
folder with the correct filename convention, and the content you wish to publish - Apply the correct category and tags, and the new compo will automatically be listed in the right place when the site is rebuilt
Post Filename format:
yyyy-mm-dd-compo-name.md
---
layout: prods_post
category: [posts, compos]
tags: whatever tags you like
compo_id: The id of this compo. Tag any posts with this ID so that they are filtered as submissions.
year: year the competition started
title: name of the competition
img: filename of the image in /content/ for this competition (no need for any path)
platform: suitable formats for the competition
---
PUT YOUR MARKDOWN FORMATTED POST CONTENT HERE
The Jekyll theme for the Bitshifters site was based on Freelancer bootstrap theme