Git Hub Portfolio Development with Github, Jekyll, & Yeoman/Gulpjs
Session 1
From Nothing to a Static Website
What are we going to do?
- A portfolio & blog website
- Add to your web dev tool box:
- Version Control with Git/github
- Tool Chains with experience in Ruby & NodeJS
- Static Site Generation with experience in Jekyll
- Scaffolding with Yeoman & Task running with GulpJS
- A little bit of bash shell
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
Hi! I'm Morris
the cat dev manager. I need developers. Developers that can
write code that does not suck,
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2046180/morris.jpg)
collaborate with others,
can communicate ideas,
and does not drool on themselves or bath in perfume.
Hi! I'm Anne.
And I worked really hard to become a developer!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2046161/anne.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2047145/aresume.png)
Grampa says, "Send out resumes!!"
Now how do I find my first gig?
?? WTF is this?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2046180/morris.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2047145/aresume.png)
Yo Anne!
Don't tell me!
Show Me!
Bernini's Apollo & Daphne
The most amazing thing I have ever seen.
Bernini's Apollo & Daphne
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2236681/abitofDaphne.jpeg)
The most amazing thing I have ever seen.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2236688/Apollo___Daphne_September_2015-1a.jpg)
The most amazing thing I have ever seen.
Telling
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2047145/aresume.png)
Showing
Showing Supports Telling
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2052073/socialite.jpg)
Open Source Team
zero projects
low focus; no brand; no story
Highly Focused; Branded; Compelling Story
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2047145/aresume.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2047145/aresume.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2236616/LinkedinLogoTransparent__1_.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2236616/LinkedinLogoTransparent__1_.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2236616/LinkedinLogoTransparent__1_.png)
Hiring Manager:
Focused; Some brand; A story
15 projects
aha... I can show you!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2047234/surprise.png)
If I put my projects in a portfolio
on github and had a blog:
They can SEE my code doesn't suck
They can SEE me communicate
They can SEE me work collaboratively
They can smell that I don't bath in perfume!
Nope...can't do that
But what is the heck is github? And this git thing?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2047296/WBzKPlOAfQt.jpg)
Github is:
an open source
coding collaboration website
based on the git version control system
that turned into a social network
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2047458/octocat.png)
But what is Git?
Git is a version control system written by Linus Torvalds
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2047479/Founding-Father-Octocat.jpg)
Git and github are so linked together they are almost one thing
Fun Fact: Linus Torvalds also wrote the linux kernel
What is github for?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2047479/Founding-Father-Octocat.jpg)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2052073/socialite.jpg)
So let's partake of open source software... using git and git hub!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2239555/c9workspace.png)
A quick c9 Workspace Tour
Using the c9 Terminal (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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2066159/icomoon-terminal_256_0_002b36_none.png)
Type this in your c9 terminal window and press enter!
# what directory are we in?
pwd
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2066159/icomoon-terminal_256_0_002b36_none.png)
# what files and subdirectories do we have?
ls
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2066159/icomoon-terminal_256_0_002b36_none.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2239619/c9-logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2239634/pwd.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2239619/c9-logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2239646/ls.png)
git clone simple-project
# in your ~/workspace subdirectory
#clone our working project to your machine
git clone http://github.com/ricmclaughlin/simple-project
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2066159/icomoon-terminal_256_0_002b36_none.png)
# go into the cloned subdirectory
cd simple-project
# list the files in the subdirectory
ls
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2066159/icomoon-terminal_256_0_002b36_none.png)
Now checkout what you cloned!
# did your git clone work?
ls
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2066159/icomoon-terminal_256_0_002b36_none.png)
Git | English | Why? |
---|---|---|
Clone | copy from github to your machine | Try it out local |
Fork | copy to your github and link | Try it and modify it local (make your own version) |
Git to English Translation
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..
git checkout README.md #Amazing, octocat has my six!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2051540/constructocat2.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2066159/icomoon-terminal_256_0_002b36_none.png)
Git | English | Why? |
---|---|---|
Checkout | get last commited version | Your working version is screwed and you want to undo the screwing |
Git to English Translation
Github = Offsite Backup
Not Fun Fact: Your machine will crash someday
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2051625/linktocat.jpg)
Feature: Github backs up your stuff
Benefit: When your machine crashes your stuff remains safe
Let's setup a project and a c9 workspace and back it up to github!
first_one project setup
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2051625/linktocat.jpg)
Create a new repository called first_one
(ignore setup page - we will do this in sec)
http://github.com/[github user name]
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2157064/Google_Chrome_icon__2011_.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2157078/firefox-512.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2239677/github-512.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2239619/c9-logo.png)
Create a new workspace called first_one
Make index.html and setup git
# from your ~/workspace/first_one subdirectory
# make the first file in the project
echo "<h1>My First Project</h1>" > index.html
# see index.html show up in your workspace file browser?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2066159/icomoon-terminal_256_0_002b36_none.png)
# initialize git -> setup git in this subdirectory
git init
# see your git status
git status
# add remote -> associate our project with our repository on github
git remote add origin https://github.com/[github user name]/first_one
# how do we know it worked?
git remote -v
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2066159/icomoon-terminal_256_0_002b36_none.png)
Now stage, commit & push
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2051625/linktocat.jpg)
# from your ~/workspace/first_one subdirectory
# now stage your changes
git add .
# commit your changes -> save your awesome new project
# always in the present tense
git commit -m "initial commit"
# push your project to git hub
git push origin master
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2066159/icomoon-terminal_256_0_002b36_none.png)
http://github.com/[github user name]/first_one
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2157064/Google_Chrome_icon__2011_.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2157078/firefox-512.png)
Did it work???
Git | English | Why? |
---|---|---|
init | setup git in this directory | you want to add the project to git |
add remote | link this project to a project on github | you want to setup to sync your changes offsite |
git push | copy latest commit to remote server | sync your changes offsite |
origin | the name of remote project | it is git convention to call it origin |
Git to English Translation
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2051479/labtocat.png)
Git Branch
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2051479/labtocat.png)
# from your ~/workspace/first_one subdirectory
# 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 your file explorer tell you?
git add . # stage your changes
git commit -m "add octocat" # commit your changes
git status # why do git status here?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2066159/icomoon-terminal_256_0_002b36_none.png)
Git Merge
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2051479/labtocat.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2066159/icomoon-terminal_256_0_002b36_none.png)
# from your ~/workspace/first_one subdirectory
# switch to master branch
git checkout master
# what does your terminal prompt tell you?
# master show not have octocat.html!
ls
# merge my_branch into master
git merge add_octocat
# octocat.html should be in the house!
ls
Cleanup after your merge
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2051479/labtocat.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2066159/icomoon-terminal_256_0_002b36_none.png)
# from your ~/workspace/first_one subdirectory
# delete add_octocat branch to clean up
git branch -d add_octocat
# did we delete add_octocat?
git branch
# everything good?
git status
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
Oh. Well isn't that just nifty...
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2047348/smart.jpg)
Where's the portfolio and the blog and all that stuff??
Oh, it's not that bad...
In fact, you are already on your way!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2047503/Professortocat_v2.png)
Today - A Github Profile
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2047259/thinking.png)
Checkout your portfolio:
Imagine it is more like:
Contributions, repositories and public activity = Collaboration
Hey, it's a start... let's improve it!
Browser
http://github.com/[your github username]
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2157064/Google_Chrome_icon__2011_.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2157078/firefox-512.png)
Browser
http://github.com/Swiip
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2157064/Google_Chrome_icon__2011_.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2157078/firefox-512.png)
All About Your Github Website
Fun Fact: You can personalize your website with its own domain!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2051530/femalecodertocat.png)
Feature: Every github profile can have a free website associated with it
Benefit: A free portfolio website, baby!
portfolio project setup
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2051625/linktocat.jpg)
Create a new repository called
[github username].github.io
(ignore setup page - we will do this in sec)
http://github.com/[github user name]
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2157064/Google_Chrome_icon__2011_.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2157078/firefox-512.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2239677/github-512.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2239619/c9-logo.png)
Create a new workspace called
[github username].github.io
Make Your Github Website!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2051530/femalecodertocat.png)
# from your ~/workspace/[github user name].github.io subdirectory
# clone your project
git clone https://github.com/[github user name]/[github user name].github.io
# how do you know it worked?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2066159/icomoon-terminal_256_0_002b36_none.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2239619/c9-logo.png)
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?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2066159/icomoon-terminal_256_0_002b36_none.png)
Ok.
That is, well, good, I guess.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2047348/smart.jpg)
Where's the meat, or should I say, projects?
Take a look at your new portfolio:
Browser
[github username].github.io
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2157064/Google_Chrome_icon__2011_.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2157078/firefox-512.png)
Projects? We can do that.
We can do that... right?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2052700/maxtocat.gif)
Projects Get Websites too
Fun Fact: You have gone to lots of github project pages without realizing it....
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2052745/orderedlistocat.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2157064/Google_Chrome_icon__2011_.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2157078/firefox-512.png)
Projects Get Websites too
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2052745/orderedlistocat.png)
Browser
http://github.com/twbs/bootstrap
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2157064/Google_Chrome_icon__2011_.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2157078/firefox-512.png)
Browser
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2157064/Google_Chrome_icon__2011_.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2157078/firefox-512.png)
Let's figure out how this works:
http://github.com/twbs/bootstrap/tree/gh-pages
Now checkout the gh-pages branch:
Github stores your project website in the gh-pages branch!
Branch to gh-pages & push
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2052815/dojocat.jpg)
# from your ~/workspace/first_one subdirectory
# make your gh-pages branch & checkout (in one step!)
git checkout -b gh-pages
# confirm we did it right
git status
# push the branch to git hub
git push origin gh-pages
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2066159/icomoon-terminal_256_0_002b36_none.png)
Checkout your project in the web!
http://username.github.com/first_one
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2157064/Google_Chrome_icon__2011_.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2157078/firefox-512.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2239619/c9-logo.png)
Open your first_one workspace
We have a Project on Github
We need to add a link to that project from our portfolio!
Add a Project to Your Portfolio
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2052815/dojocat.jpg)
# from your ~/workspace/[github username].github.io subdirectory
# add then commit your changes
git add .
git commit -m "add first project link"
# confirm we did it right
git status
# push the branch to git hub
git push origin master
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2066159/icomoon-terminal_256_0_002b36_none.png)
# add this link to your index.html
Checkout my <a href="https://[github user name].github.io/first_one">Project</a>.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2157066/accessories-text-editor-icon.png)
Editor
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2239619/c9-logo.png)
Open your [github user name].github.io workspace
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2239619/c9-logo.png)
Open your index.html in the c9 editor
Mission Accomplished!
You have a portfolio website!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2052096/welcometocat.png)
With a first small project that is live!
With a link to the first project from your portfolio!
Bam!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2052745/orderedlistocat.png)
In your browser take a look at your portfolio!
http://[github user name].github.io/
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2157064/Google_Chrome_icon__2011_.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2157078/firefox-512.png)
I think not.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2047348/smart.jpg)
How do you expect to update that project?
Where is the blog?
Where's the content management?
We Have Lots of Work Still Left to do
![](https://s3.amazonaws.com/media-p.slid.es/uploads/420833/images/2053341/visionary.jpg)
We need:
- A Better Set of Site Management Tools
- A Better Github Management System
- A Frickin' Blog
Git Hub Portfolio Development with Github, Jekyll, & Yeoman/Gulpjs - Session 1
By Ric McLaughlin
Git Hub Portfolio Development with Github, Jekyll, & Yeoman/Gulpjs - Session 1
From nothing to a gh-pages static site
- 2,069