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,

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!

 

 

Grampa says, "Send out resumes!!"

Now how do I find my first gig?

?? WTF is this?

Yo Anne!

Don't tell me!

Show Me!

Bernini's Apollo & Daphne

The most amazing thing I have ever seen.

Bernini's Apollo & Daphne

The most amazing thing I have ever seen.

The most amazing thing I have ever seen.

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

aha... I can show you!

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?

Github is:

an open source

coding collaboration website

based on the git version control system

that turned into a social network

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

What is github for?

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 partake of open source software... using git and git hub!

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

Type this in your c9 terminal window and press enter!

# what directory are we in?

pwd

# what files and subdirectories do we have?

ls

git clone simple-project

# in your ~/workspace subdirectory

#clone our working project to your machine
git clone http://github.com/ricmclaughlin/simple-project
# go into the cloned subdirectory
cd simple-project

# list the files in the subdirectory
ls

Now checkout what you cloned!

# did your git clone work?

ls

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!
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

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

Create a new repository called first_one

(ignore setup page - we will do this in sec)

http://github.com/[github user name]

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?          
# 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

Now stage, commit & push

# 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           

http://github.com/[github user name]/first_one

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

Git Branch

# 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?

Git Merge

# 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

# 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... 

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!

Today - A Github Profile

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]

Browser

http://github.com/Swiip

All About Your Github Website

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!

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

[github username].github.io

Make Your Github Website!

# 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?

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?

Ok.

That is, well, good, I guess. 

Where's the meat, or should I say, projects?

Take a look at your new portfolio:
  

Browser

[github username].github.io

Projects? We can do that.

We can do that... right?

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

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 checkout the gh-pages branch:

Github stores your project website in the gh-pages branch!

Branch to gh-pages & push

# 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                

Checkout your project in the web!

http://username.github.com/first_one

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 

# 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
# add this link to your index.html
Checkout my <a href="https://[github user name].github.io/first_one">Project</a>.

Editor

Open your [github user name].github.io workspace

Open your index.html in the c9 editor

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/

I think not. 

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

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

  • 1,739