Git Hub Portfolio Development with Github, Jekyll, & Yeoman/Gulpjs
Session 1
From Nothing to a Static Website
v1.5
What are we going to do?
- Your journey from here to pro
- A portfolio & blog website
- Many Skills
- Version Control with Git/github
- A little bit of bash shell
- Tool Chain Management with Ruby & NodeJS
- Static Site Generation with Jekyll
- JavaScript scaffolding with Yeoman & Task running with GulpJS
v1.5
Class Metrics
Class #1 - Feb
Participants | 10 |
---|---|
Finished with Portfolio | 100% |
Git endorsement | 80% |
tweet new post = jekyll endorsement | 20% |
tweet project = gulp.js endorsement | 20% |
Who am I?
- Worked for 4 different public software companies as a developer & dev manager on 9 different stacks
- My groups have delivered over 400k hours of software development work
- Developed numerous complete webapps solo
- Personally hired over 75 developers, Project Managers and Dev Managers
I am a free code camper exactly like you...
I love helping people that are helping themselves
If you ask, we will figure it out
v1.5
Hi! I'm Morris
the cat dev manager. I need developers. Developers that can
write code that does not suck,
collaborate with others,
can communicate ideas,
and does not drool on themselves or bath in perfume.
v1.5
Hi! I'm Anne.
And I worked really hard to become a developer!
Grampa says, "Send out resumes!!"
Now how do I find my first gig?
v1.5
?? WTF is this?
Yo Anne!
Don't tell me!
Show Me!
v1.5
Bernini's Apollo & Daphne
Just Telling You:
This is the most amazing thing I have ever seen.
v1.5
I offer no proof; you have to believe me at my word.
Bernini's Apollo & Daphne
v1.5
I offer a little proof; perhaps you might me believe me.
This is the most amazing thing I have ever seen.
The most amazing thing I have ever seen.
v1.5
Telling
Showing
Showing Supports Telling
Open Source Team
zero projects
low focus; no brand; no story
Highly Focused; Branded; Compelling Story
Hiring Manager:
Focused; Some brand; A story
15 projects
v1.5
Anatomy of a Github Portfolio
Project Detail Includes:
- What it does
- Technology Used
- Stuff You Learned
Projects by technology used - by tag
v1.5
Coding in a browser to?
Code in a Browser
Codepen
c9
local
Code in a Browser
c9
local
(Or why c9 is your next step)
FCC progression
FCC-Ballard progression
emmet class
Portfolio
class
Windows?Vagrant
v1.5
The advantages of c9
- Complete dev environment in the cloud
- Bash shell - terminal
- One workspace per project - Saves your place
- If your workspace is "broken" easily restart
v1.5
Ok, so what is c9?
v1.5
The C9 Workspace
Terminal or CommandLine
Project Navigator
Editor
Preview
v1.5
But what is the heck is github? And this git thing?
v1.5
Github is:
an open source
coding collaboration website
based on the git version control system
that turned into a social network
v1.5
But what is Git?
Git is a version control system written by Linus Torvalds
Git and github are so linked together they are almost one thing
Fun Fact: Linus Torvalds also wrote the linux kernel
v1.5
Github=Open Source Goodness
Fun Fact: As of 2015 there are 30 Million+ repositories on github!
Feature: You can share & partake of open source software
Benefit: Amazing code, free for the taking; sharing is good and feels good too
So let's share some sweet source with the world... using git and git hub!
v1.5
Prepare to Share
http://github.com/[github user name]
Click on Create a new workspace
Workspace Name: first_one
Clone from Git or Mercurial URL:
https://github.com/ricmclaughlin/simple-project.git
v1.5
Did it work?
but first a tiny bit o' bash!
# <- the hash make a comment in bash
# type this next line in and notice it does NOTHING
# type me in - I am a comment
# use pwd to show what directory are we in!
pwd
How do I make a comment?
What directory am I in?
v1.5
Did our clone work?
# us ls to list files and subdirectories
ls
What files and directories are there?
v1.5
What did we just do?
Make first_one workspace
Connect first_one repo from github
Make first_one repo
first_one
c9 Clones
(two way link)
c9 makes a window into first_one vm
v1.5
Git | English | Why? |
---|---|---|
Clone | copy from github to your machine | Try it out local |
Git to English Translation
v1.5
Git = Freedom to Screw Up
Fun Fact: Everyone screws up
Feature: Git saves a version of your stuff that you can find later!
Benefit: You never loose your progress; you always know where your work is
rm readme.md # oh crap, I just deleted all my work.
# oh crap, it didn't work... why?
rm README.md # oh crap, I really did deleted my stuff..
git checkout README.md # Amazing, octocat has my six!
v1.5
Git | English | Why? |
---|---|---|
Checkout | get last commited version | Your working version is screwed and you want to undo the screwing |
Git to English Translation
v1.5
Github = Offsite Backup
Not Fun Fact: Your machine will crash someday
Feature: Github backs up your stuff
Benefit: When your machine crashes your stuff remains safe
Let's add a file to our project and push our changes up to github
v1.5
Make a page
Make a file
Save the file as index.html
Right click on index.html and do preview
Checkout our awesome work in the preview tab
<h1>Yeah, this is it - My new page!</h1>
v1.5
Make some changes & preview
<h1>Yeah, this is it - My new page!</h1>
<p>and now I added some text</p>
Save
Refresh your preview browser tab
v1.5
Now stage, commit & push
http://github.com/[github user name]/first_one
Did it work???
# stage your changes
git add .
# does git see your changes?
git status
# now push your changes
git push origin master
# commit your changes with
# save message in the present tense
git commit -m "add index.html"
v1.5
What did we just do?
staging
working
(master)
master
Change
git add .
git commit -m "message in present tense"
index.html
index.html
changes are committed
origin
git push origin master
changes are pushed
v1.5
Git | English | Why? |
---|---|---|
git push | copy latest commit to remote server | sync your changes offsite |
origin | the name of remote project (on github) | it is git convention to call it origin |
Git to English Translation
v1.5
Git = Freedom to Experiment
Fun Fact: You will experiment a lot in the coming months years
Feature: Branch to leave the working stuff working before you start changing things
Benefit: Experiments only cost time;
Experiment on a feature branch!
v1.5
New Feature?
->Branch
# make a branch called "add_octocat"
git branch add_octocat
# Use your new branch
git checkout add_octocat
# what does your terminal prompt tell you?
# make a new file on your website
echo "Hey there Octocat!" > octocat.html
# what does git tell you?
git status
v1.5
What did we just do?
staging
working
(master)
master
Create
git branch add_octocat
git checkout
add_octocat
octocat.html
origin
working
(add_octocat)
add_octocat
v1.5
Feature work?
->Commit
# what did we change?
git status
# add our single change
git add octocat.html
# commit our change
git commit -m "add octocat.html"
# are we good?
git status
# what branch are we one?
v1.5
What did we just do?
staging
working
(master)
master
octocat.html
origin
working
(add_octocat)
add_octocat
octocat.html
git add
octocat.html
git commit -m "add octocat.html"
v1.5
Feature done?
->Merge
# switch to master branch
git checkout master
# what does your terminal prompt tell you?
# master should not have octocat.html!
ls
# merge my_branch into master
git merge add_octocat
# octocat.html should be in the house!
ls
v1.5
What did we just do?
staging
working
(master)
master
octocat.html
origin
working
(add_octocat)
add_octocat
working
(master)
No octocat.html
git checkout
master
git merge
add_octocat
octocat.html!!!
v1.5
Cleanup after your merge
# delete add_octocat branch to clean up
git branch -d add_octocat
# did we delete add_octocat?
git branch
# everything good?
git status
# push to github
git push origin master
v1.5
What did we just do?
staging
working
(master)
master
octocat.html
origin
working
(add_octocat)
add_octocat
working
(master)
git branch -d add_octocat
octocat.html!!!
octocat.html!!!
git push origin master
v1.5
Git | English | Why? |
---|---|---|
branch | make separate version to modify | You don't want to risk screwing up the master branch! |
merge | integrate branches together | your work on the branch is done |
Git to English Translation
v1.5
You just learned git!
Now Let's Make a Portfolio!
You almost have one now!
v1.5
Today - A Github Profile
Checkout your portfolio:
Imagine it is more like:
Contributions, repositories and public activity = Collaboration
Browser
http://github.com/[your github username]
Browser
http://github.com/Swiip
v1.5
A Github Profile != portfolio
Fun Fact: You can personalize your website with its own domain!
Feature: Every github profile can have a free website associated with it
Benefit: A free portfolio website, baby!
v1.5
Portfolio Project Setup
Create a new repository called
[github username].github.io
(ignore setup page - we will do this in sec)
http://github.com/[github user name]
Create a new workspace called
portfolio
v1.5
Your First Portfolio Website!
# clone your project
git clone https://github.com/[github user name]/[github user name].github.io
# how do you know it worked?
Open your [github username].github.io workspace
# make the first file in the project
echo "<h1>My Portfolio</h1>" > index.html
# because we cloned your repo git is ready to roll
git add .
# commit your awesome new project
git commit -m "initial commit"
# push your portfolio project to git hub
git push origin master
# how do we know it worked?
v1.5
Ok.
That is, well, good, I guess.
I see your source on github - where is the live version?
Take a look at your new portfolio:
Browser
[github username].github.io
v1.5
Live Projects? We can do that.
We can do that... right?
v1.5
Projects Get Websites too
Fun Fact: You have gone to lots of github project pages without realizing it....
Feature: Every github project gets a static website on the gh-pages branch
Benefit: Every single one of your github projects, even when it isn't a website, can have a website
Checkout the main bootstrap site hosted on github pages:
Browser
http://getbootstrap.com
v1.5
Projects Get Websites too
Browser
http://github.com/twbs/bootstrap
Browser
Let's figure out how this works:
http://github.com/twbs/bootstrap/tree/gh-pages
Now look at the gh-pages branch:
Github stores your project website in the gh-pages branch!
v1.5
Branch to gh-pages & push
# make your gh-pages branch & checkout (in one step!)
git checkout -b gh-pages
# confirm we did it right
git status
# push the gh-pages branch to github
git push origin gh-pages
Checkout your project in the web!
http://username.github.com/first_one
Open your first_one workspace
v1.5
What did we just do? gh-pages
staging
working
(master)
master
git checkout -b gh-pages
origin
git push origin gh-pages
http://username.github.com/first_one
gh-pages
gh-pages
v1.5
working
(gh-pages)
We need a link from our portfolio to our
project!
v1.5
Link to a Project Website
# add then commit your changes
git add .
git commit -m "add first project link"
# merge our feature branch
git merge project_link
# confirm we did it right
git status
# push the branch to github
git push origin master
# delete our feature branch
git branch -d project_link
# add this link to your index.html
Checkout my <a href="https://[github user name].github.io/first_one">Project</a>.
<p>It is raw HTML with no CSS. You can see the styling isn't that great</p>
Open your [github user name].github.io workspace
# branch
git checkout -b project_link
v1.5
Mission Accomplished!
You have a portfolio website!
With a first small project that is live!
With a link to the first project from your portfolio!
Bam!
In your browser take a look at your portfolio!
http://[github user name].github.io/
v1.5
Session 1 - Homework
- Create a new repo on github called second_one and initialize with a readme file
-
Create a second_one c9 workspace and clone second_one into that workspace
-
In a git feature branch create index.html file
-
Add some HTML of your choosing to index.html
-
In the c9 browser tab preview your changes
-
Merge your feature branch to master
-
Push your changes to github
-
Create a gh-pages branch and push the gh-pages branch to origin
-
Confirm you your new project is live at at https://[github username].github.io/second_one
New website project: second_one
Session 1 - Homework
-
Open your portfolio workspace on c9
-
In a git feature branch, open your index.html
-
Add a link to the second_one source code
-
Add a link to the second_one live project
-
Save then preview your changes
-
Merge your feature branch into master
-
Push your changes to github
-
Confirm it worked
Add the second_one project to your portfolio
Git Hub Portfolio Development with Github, Jekyll, & Yeoman/Gulpjs - Session 1 - V1.5
By Ric McLaughlin
Git Hub Portfolio Development with Github, Jekyll, & Yeoman/Gulpjs - Session 1 - V1.5
From nothing to a gh-pages static site
- 1,300