LA2050 Grants Challenge
This is a website for the My LA2050 Grants Challenge.
- How to make changes
- How to switch between contest phases
- How to see a preview of your changes
- How to develop locally
- Generating responsive images
- Handy guides
How to make changes
Proposal images for the challenge are stored in the images.la2050.org repository and published separately.
As you make changes and commit/push them to GitHub, the website will automatically update.
How to switch between contest phases
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
# 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
# Entries being accepted: # March 1 phase: 2
- Commit your changes.
How to see a preview of your changes
If you’d like to see how your changes will look on the website before making them public, you can work in the staging branch–a copy of the website files, that’s published at https://staging-challenge.la2050.org
You can make edits in the staging branch and commit them just as you would normally. They’ll automatically appear on the staging website within a few minutes.
Once you’re happy with how your changes look on the staging website, you can copy them over to the public website (the
main branch) using a pull request. Here are the steps:
- Press the “new pull request” button.
Write a title for your pull request (this is optional).
Press the “create pull request” button.
And then, press the “merge pull request” button.
And lastly, press the “confirm merge” button.
How to develop locally
git clone https://github.com/la2050/challenge.git
And then start running the Jekyll application like this...
Generating responsive images
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
- 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.