Portfolio Development with Github, Jekyll, & Yeoman/Gulpjs

Session 1 V1.6

From Nothing to a Static Website

v1.6

Tonight's Topics

 

  • How to SHOW you are a developer
  • Intro to c9, Git, Git Hub, gh-pages & Bash
  • A Git Professional Workflow

v1.6

Tuesday's Topics

 

  • Jekyll
  • Portfolio Setup on Github
  • Ruby Tool Chain & RVM
  • Markdown
  • Jekyll posts & pages

v1.6

Thursday's Topics

 

  • Portfolio vs Website Projects
  • Scaffolding on Node.js
  • Gulp.js & Yeoman
  • The DRY Principle
  • gulp-gh-pages

v1.6

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 love helping people that are helping themselves

If you ask, we will figure it out

v1.6

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

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

?? WTF is this?

Yo Anne!

Don't tell me!

Show Me!

v1.6

Bernini's Apollo & Daphne

Just Telling You:

This is the most amazing thing I have ever seen.

I offer no proof; you have to believe me at my word.

v1.6

Bernini's Apollo & Daphne

I offer a little proof; perhaps you might me believe me.

This is the most amazing thing I have ever seen.

v1.6

The most amazing thing I have ever seen.

v1.6

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

Anatomy of a Github Portfolio

Project Detail Includes:

  • What it does
  • Technology Used
  • Stuff You Learned

Projects by technology used - by tag

v1.6

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

The C9 Workspace

Terminal or CommandLine

Project Navigator

Editor

Preview

v1.6

Github is:

an open source

coding collaboration website

based on the git version control system

that turned into a social network

v1.6

But what is Git?

Git is a version control system written by Linus Torvalds

  • Get Open Source Software
  • Save Yourself when you screw up
  • Save your code offsite and Share it!
  • Experiment safely
  • Host Your Website!

Git lets you:

v1.6

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

Prepare to Get the Goods

Click on Create a new workspace

Workspace Name: simple_project

Clone from Git or Mercurial URL:

git@github.com:ricmclaughlin/simple-project.git

v1.6

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

Did our clone work?

# us ls to list files and subdirectories

ls

What files and directories are there?

v1.6

Git English Why?
Clone copy from github to your machine Try it out local

Git to English Translation

v1.6

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

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

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

Make a New Project

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

Click on Create a new workspace

Workspace Name: first_one

Clone from Git or Mercurial URL:

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

Click on "+" in right hand corner and create a new repo called "first_one"

Copy the URL to your new repo from the "Quick setup — if you’ve done this kind of thing before" edit control

v1.6

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

You just learned git!

Now Let's Make a Project!

v1.6

Live Projects? We can do that.

We can do that... right?

v1.6

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

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

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

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

working

(gh-pages)

v1.6

Mission Accomplished!

You have a project website!

With a first small project that is live!

Bam!

In your browser take a look at your portfolio!

http://username.github.com/first_one

v1.6

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

v1.6

Portfolio Development with Github, Jekyll, & Yeoman/Gulpjs - Session 1 - V1.6

By Ric McLaughlin

Portfolio Development with Github, Jekyll, & Yeoman/Gulpjs - Session 1 - V1.6

From nothing to a gh-pages static site

  • 1,770