Catchup Day #1
Wednesday, 14 September 2016
Phew! Let's catch up on whatever's still fuzzy.
Q&A
- Make sure to contact me ahead of time if you'll be absent fro class
- Any questions?
- Today will be a second lab-like class, but with more things to do and less instruction from me
- Work on your own, then when you're done I'll pair you up for a peer review.
Fork & Clone
This time, tommytester did a much better job testing things out for you.
- Go to https://github.com/inls161/jekyll-minimal-theme and Fork the repository.
- Make a new Blank Cloud9 workspace called
minimal
- Clone your forked repository to your new Cloud9 workspace
- Install Jekyll with the command
gem install github-pages
cd
into the new directory git made for you when you cloned- run
jekyll serve --host $IP --port $PORT
- click the URL that pops up in the terminal once your site is running
- Don't panic! You'll get a Not Found error. Add
/jekyll-minimal-theme/
(with both slashes) after your url. So tommy's final URL would behttp://minimal-tommytester.c9users.io/minimal/
- You're done! Click around to explore the site.
Make a Post
Today we're going to make our first Jekyll post. to do this, we'll need to create a new file in the _posts
directory.
You'll notice a pattern with the files here: they're all titled YYYY-MM-DD-title-goes-here.md
. Right click or touch
to create a file that has today's date and a title, something like this: 2016-09-14-first-post.md
. Remember, this needs to be inside the _posts
folder.
Open up 2015-01-31-welcome.md in Cloud9. Remember the YAML header we discussed last time? This gives Jekyll critical information about how the post should be built. The one in welcome looks like this:
Open up your new post and make a similar header, but with a different title. Below the ---
, type some text. Check out your site and verify that you can see your new post.
Add & Commit 3 posts.
You've already made one post. Make a total of three and then save, add & commit them into at least three separate commits. It's OK to have more than three if you need to change them for some reason, but make sure to view them as you're making them so your commits are as clean as possible (the final versions) as possible.
Change your styles
In the css/_settings.scss
file you'll find some color variables that you can easily change. Experiment with different colors to find a scheme you like best. You can find a list of colors' hex values and CSS color names here. Make it look cool or crazy, but not ugly.
Save, add and commit these changes.
Push your commits
Push your commits to github with git push origin gh-pages
. We're not pushing to master since I renamged the branch to gh-pages this time.
View your site
Go to [username].github.io/jekyll-minimal-theme and see your live site! If your site isn't loading, go to github.com/[username]/jekyll-minimal-theme and click on 'Commits'. You should see the commits you pushed there and a green checkmark next to the last commit. If you see a red X, hover over it and call me over for help.
Peer review
As you finish you'll be paired up for a peer review. For this, go to your partner's site and github site. Email me with the following information:
(Copy and paste this list and put the info under each question)
- Your partner's github username
- Your partner's github repo URL
- Your partner's github site URL
- Did your partner add three posts?
- Did your partner have three separate commits for those posts?
- Did your partner customize the colors of the site? Did it look cool?
- Were the color changes in their own commit?
- Your github username
- Is there anything that was difficult for you in this exercise? Anything you still don't understand?
- If you didn't finish your site in time, what delayed you? How can you get faster in the future?
It's OK to talk with your partner with their site and for you to answer each others' questions.
This is due by midnight tonight but you should be able to get it done in class. If your partner isn't done by the end of class, still go ahead and fill out the above info.