Editing manually

Sometimes Netlify won't cut it annoyingly, it can't do everything. So for everything else, you'll have to dip into the code itself. It's also worth having a look at the code that Netlify CMS produces automatically, as sometimes it can be a bit strange, and not perfectly formatted and such.

The site itself uses Jekyll, so it's definitely worth getting to grips with it before you try and make changes, the official site at here has fairly good documentation.

Jekyll uses the Liquid templating language to help with building more complex setups. You shouldn't use it in your collections if possible, but it's completely invaluable when building new layouts.

This section isn't a tutorial on using Jekyll, as there's already great resources for that (like linked above), but more of a description of how this particular site it laid out.

Pages

You can identify pages by the fact that they're just sitting around in the root directory, with filenames ending in .html and .md. When creating a new page, you should always prefer using markdown over raw HTML whenever possible, it's just way easier to read and maintain. However, don't be afraid to use raw HTML if markdwon won't do.

All pages (and all other items in collections) need to have frontmatter in them. This frontmatter corresponds to the extra fields as seen above in Netlify CMS.

All frontmatter should include, at the very least, a layout and a title.

Other useful fields that might be handy are styles (for including additional CSS for only this page), and scripts (the same, but for scripts).

---
layout: page
title: Committee
styles:
  - /css/committee.css
scripts:
  - /js/fadein.js
---

The main page content uses Markdown, a really powerful and fun markup language, that makes writing text easy. It's not too hard to get the hang of the basics. Additionally, it can also contain raw HTML, which is very handy if you're building more complex layouts - however, use this ability sparingly, and always prefer native markdown elements over HTML ones.

Collections

The collections for the site, are intuitively located in the collections directory.

collections
├── _clubs
└── _news

All of the content in these works pretty much identically to the pages from above, however, within a single collection, all items should all aim to look as similar to each other as possible and use the same layout wherever possible.

Redirections

Settings up short links is lots of fun, and makes us look extra professional. They

To add a new redirection, add a new entry to _redirects, for example:

/guild https://guildofstudents.com/organisation/css

The first section should be the origin, i.e. cssbham.com/guild and the second section should be the destination, i.e. the guild url.

You can also chain redirects to each other. For example:

/join /guild

Note that these redirections are resolved by Netlify and so will not work in a development environment beyond the preview provided by Netlify.

Site wide config

Site wide config settings can be found in _config.yml. These contain configuration for all the pages on the site, such as menus, the site name, the base url, etc.

Netlify CMS config

Configuring Netlify CMS can be done from admin/config.yml. This file will let you configure the behaviour of the CMS editor, and the collections that they can modify from that interface.

You probably shouldn't need to modify this that much unless you're making sweeping changes to the collections or frontmatter definitions - in that case, make sure you update the config to reflect that.

Committee data

In the data/ folder you can put any site-specific data. One interesting item there lists the current committee for the /committee page.

To update to the new committee, you'll need to update these files. Don't overwrite the existing ones, instead make a copy and name it according to the academic year that the committee will preside over. Follow the exact same format that's already defined, and update the current value to be true (and also modify the old committee values to be false while you're at it).

You'll probably also want committee photos. You need to crop them beforehand to be square, or you'll get weird results. You can put them anywhere, but in practice you should put them in /assets/committee/<years>/full/.

Then, run _scripts/committee.sh (on a Linux system) to generate the mini images that are more optimized for loading on the web.