This site is dedicated to the Cornell Fencing Alumni Association.
Stylesheets were shamelessly scraped from http://www.styleshout.com/
# Download code from github
git clone https://github.com/cornellfencing/cornellfencing.github.io
# Go to the new project directory
cd cornellfencing.github.io/
We use Node.js to run a local dev server. Install Node.js from the official website. Get the LTS version.
In the directory for this project:
# Install the dependencies (only need to do this the first time you run)
npm install
# Launch the server
npm start
# You'll see an output like:
> cornellfencingv4@1.0.0 start /Users/nickheiner/Code/cornellfencingv4
> static -a 0.0.0.0 -H '{"Cache-Control": "no-cache, must-revalidate"}' app
serving "app" at http://0.0.0.0:8080
# (Update) the dependencies
npm update
Once npm is successfully running use a web browser to go to the URL listed in the output (http://0.0.0.0:8080
in the example above) to see your page. Hit "refresh" whenever you make any changes to the files on disk.
All CSS overrides beyond the defaults should be made in app/css/layouts.css
. The other CSS files shouldn't need to be touched unless you very explicitly know what you're doing.
Dump all new image assets in the app/images
directory and source them in index.html. For something like adding images to the scrolling hero image, add the image URL in the format in app/css/layouts.css
(under 0. Alumni Hero Banner Images
), and then add the relevant id to the index.html file. Search "team-2015" if you're looking for an example in that file. For splash images try and match the pixel sizes of the ones already being used and crop the images or add a black bar to their tops so that the links at the top are visible.
This page uses a lot of out-of-the-box js libraries that I didn't really make any effort to change. Nearly of the javascript-based behavior of the page is powered by Foundation Zurb, and secondarily supported by jquery. If you're looking to change the JS on your own, no groundwork has really been laid out for you, so please follow general best practices and try not to make a mess.
First, check your commits with diff and status:
git diff
git status
Next, if you have any new untracked files use git add to add them, for example:
Untracked files:
(use "git add <file>..." to include in what will be committed)
app/images/MyNewImage.jpg
git add app/images/MyNewImage.jpg
Then, submit your changes for review:
git checkout -b your-name/feature-name
git commit -am "Your commit message"
git push -u origin your-name/feature-name
Once you've done that, go to the New Pull Request page. Change the compare
branch to be the branch you pushed above.
First, ensure that the git remote origin
refers to the cornellfencing/cornellfencing.github.io repo:
$ git remote -v | grep origin
origin git@github.com:cornellfencing/cornellfencing.github.io.git (fetch)
origin git@github.com:cornellfencing/cornellfencing.github.io.git (push)
If that didn't look right, use:
$ git remote set-url origin git@github.com:cornellfencing/cornellfencing.github.io.git
After that's done, you're ready to deploy:
npm run deploy
This will push the contents of the app
directory to Github pages. It will take a few minutes for the updated site to be live. GH Pages caches, so you may need to clear your browser cache before you see the updates.