This is a website for the 2018 My LA2050 Activation Challenge.
- How to make changes
- How to switch between contest phases
- How to develop locally
- Generating responsive images
- Handy guides
The website is published with GitHub Pages & Netlify, and the files are generated with Jekyll.
As you make changes and commit/push them to GitHub, the website will automatically update.
For example, if you edit the about page on GitHub, and then press the “Commit changes” button–you should see your changes on the about page of the website within a few minutes.
The website is set up to show different content based on the current phase of the contest. To change which phase is active, you can follow these steps…
-
Open the configuration file
-
Find the current phase, and comment it out by placing a
#sign in front of it.
For example, change this…
# New challenge announced:
# February 1
phase: 1
…into this…
# New challenge announced:
# February 1
# phase: 1
- Find the phase you’d like to switch to, and do the opposite (remove the
#in front of it).
For example, change this…
# Entries being accepted:
# March 1
# phase: 2
…into this…
# Entries being accepted:
# March 1
phase: 2
- Commit your changes.
If you want to see a preview of your changes while you work, you can run a Jekyll server on your local machine. Installing Ruby and Jekyll is a good place to start.
After you have Jekyll installed, you can clone this project with Git or GitHub Desktop…
git clone https://github.com/la2050/activation.git
And then start running the Jekyll application like this...
jekyll serve
Some of the images on the website are available in multiple sizes, to save bandwidth. For example, you can regenerate the “goals” images by following these steps…
-
Install Node.js and NPM
-
Run this command to install the dependencies for this project
npm install
- Place your images in the assets/images/goals/original folder
/assets/images/goals/original/connect.jpg
/assets/images/goals/original/create.jpg
/assets/images/goals/original/learn.jpg
/assets/images/goals/original/live.jpg
/assets/images/goals/original/play.jpg
- Switch to the
_nodedirectory and then run this command, to generate the images
npm run images:create
If you want to generate a different set of images, you can edit the gulpfile and then repeat the steps above.