Setup

1. Install Ruby & Node

Mac OS X

Install brew if you don't have it, and then install Ruby & Node by running:

brew install ruby node

Windows

Someone with Windows write this up

2. Clone this repository

Go to the directory you want this project to be in (can be anywhere) and run:

git clone https://github.com/techsoc/website-2015.git

3. Install Jekyll

In order to keep our Jekyll version in sync, we'll be using bundler. Install it by running:

gem install bundler

Then cd to the website folder and run:

bundle install

..which will install all Ruby dependencies.

4. Install Gulp

Gulp will help fix our CSS by adding all vendor prefixes as well as regenerate the site whenever changes are made. Install it by cd'ing to this project and running:

npm install && npm install -g gulp

Short intro to Jekyll

We are using Jekyll to build the site, which is a static site generator. It uses the Liquid templating language, which you might need to know the basics of to edit parts of the site.

At the top of files you will often notice a "block" containing some data separated with --- (three dashes) from the rest of the content. This is the YAML front matter and is used to associate some data with a file.

Contributing

To edit any parts of the site, you will first need cd to this project directory and start gulp by running:

gulp

Gulp does 2 things:

1. It creates a local webserver (accessible at http://localhost:3000)
2. It "watches" files, and whenever something changes it regenerates the website automatically

I've added some little guidance below for some common tasks, but this is definitely not enough. For now, just look around the project and try to spot patterns. And ask lots of questions on #dev-site on Slack. I will try to keep this README up to date with common questions.

Modifying HTML

Never edit anything in the _site folder. It is autogenerated & will overwrite your changes.

Modifying CSS

Do not edit assets/css/main.css, it is autogenerated. Edit CSS in the assets/scss directory. It's actually a bit more than raw CSS, it's SCSS, which is CSS with some added features.

Adding events

Create a file with an .md extension in the events folder. The filename will be part of the URL, so please name it appropriately (and follow a pattern if there is one), e.g. a file hacklondon.md will create a page at uclutech.com/events/hacklondon.

Adding members/posts/event series/...

Just look at what is already there & if anything is unclear, ask on the #dev-site Slack channel. I will try to write up common questions here.

Adding a redirect (shortening a URL)

To add a redirect, create a file <filename>.html in the _redirects folder, with the content:

---
redirect_to: <URL to redirect to>
---

This will create a redirect from uclutech.com/<filename> to <URL to redirect to>. See _redirects/lhd.html for an example.