Git Hub Portfolio Development with Github, Jekyll, & Yeoman/Gulpjs

Session 3

Getting Projects on Github using Node, Yeoman & Gulp.js

Browser

Command Line

Editor

copy this.json that.json
//this is a comment

function (param) {
    return foo;
}

Browser

Remember me? I'm Anne.

And I am loving my new github Jekyll website!!

 

 

He's gonna hire me for sure!

I'm gonna send it to that dev manager Morris!!

Hi! I'm Morris

And I am loving Anne's new portfolio... She is showing me she can

 

And she has a project in her portfolio... but that is kinda weak - she needs more projects to really SHOW me she can code

She can collaborate with others because

she's on github

communicate ideas because

her blog Rocks!

And man, that is one ugly website...

Yo Anne!

Put your project source on github

And show me the source running someplace

And pretty that thing up a bit

oh. I've got more work to do...

I need a coffee. And I need to think on this a bit...

It takes a lot of steps to make a project and I don't get live reload like jekyll, and I wanna use sass!

and get it up on github and make a live version....

Why does my portfolio repo not have a gh-pages branch but my first_one repo does??

Your Portfolio Website Build Process

HTML Website

Address: user.github.io

LOCATION: not on gh-pages branch! -> unknown!

*.md

*.html

*.yml

Only your personal github website works like this

Review: Projects Get Websites too

Browser

https://github.com/ricmclaughlin/first_one

Browser

If the project is here:

https://github.com/ricmclaughlin/first_one/tree/gh-pages

The project's website is on the gh-pages branch:

I totally remember that Github stores your project website in the gh-pages branch!

The process of putting your "built" website on the gh-pages branch is manual

For review:

# go to your first_one project directory
cd first_one

# 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                

This process is error prone and annoying and I keep having to do it.

Making gh-pages branch & push to publish

I want a...

a website template I can:

compiles sass automatically

will deploy to gh-pages on github

has live reload so I can see my changes

make over and over again

compiles sass javascript

runs tests

But back the real world... I wish there was a way...

I know a way!

I'm Yeoman and I help you create project scaffolding and my friend gulp helps you automate tasks in JavaScript!

Tasks like copying files, deploying code to github & tons of other stuff. 

JavaScript?

We need node.js!

And we are gonna need a JavaScript tool chain!

How do I run JavaScript tasks?

First: What is node.js?

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. Node.js' package ecosystem, npm, is the largest ecosystem of open source libraries in the world.

Node.js is what makes the deal enables JavaScript on the server! It makes Universal JavaScript possible!

The node.js Tool Chain

and what do we do with the tools?

Control Source Code

We need to:

Tool Type:

Version Control

JS Tool (ruby tool):

git

Run Code

Language Runtime

node (ruby)

Manage Code Runner

Version Manager

nvm (rvm)

Manage Dependencies

Package Manager

npm (gem)

Run Tasks

Task Runner

gulp (rake)

That was totally familiar!

Now that I want to install the JavaScript toolchain, I'm glad that grumpy rvm guy won't show up.

What? Someone call? I'm the nvm guy too! Let's get going installing nvm to manage all our versions of node!

ok, ok - how do you install nvm?

You don't have to install it - nvm is included on c9!

Sweet! I'm loving c9!

Don't I need a new c9 workspace? and a new github repo??

That would be advisable, yes.

Create a new repository called gulpapp

(on setup page copy repo URL)

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

Create a new workspace called gulpapp and clone your repo

cool. So I'm thinking nvm doesn't come with node does it but c9 has node installed?

nvm ls         # lists the node.js versions installed on c9 already

Yes, like rvm for ruby, nvm simply manages different versions of node.js and does NOT include node. 

Checkout all the versions you *could* install: 

nvm ls-remote              # lists the node.js versions you could install

Yes, c9 has installed nodejs already; see versions installed

So which version should I choose?

nvm install v4.2.6       # tells nvm to install node.js version 4.2.6

nvm alias default v4.2.6 # tell nvm to default to 4.2.6

nvm list                 # confirm we are defaulting to v4.2.6

The latest v4.2.6 version is a great choice. Here is the install command:

 

What about gemsets and all that jazz??

Nope, no gemsets concept in nodejs. Each version of node has it's modules called global modules - and the package manager for nodesjs is called npm.

 

Manage Dependencies

Package Manager

npm (gem)

Group Global Dependencies

We need to:

Tool Type:

Version Manager

JS Tool (ruby tool):

none (gemset)

Alright, let's install some packages!

npm install yo --global # tells npm to install yeoman to work anywhere (global)

## see the error? we need to update npm! let's do that:
npm update npm -g        # tell npm to install update npm

npm install yo --global # install yo again to confirm we fixed npm!

npm install bower -g # tells npm to install bower to work anywhere (global)

npm install gulp -g # tells npm to install gulp to work anywhere (global)

Ok, let's install yeomen, bower and gulp!

 

Great! I'm installed perfectly... lets install a generator so we can scaffold a solution...

npm install generator-webapp         # tells npm to install webapp generator
yo                                   # this starts yeoman
                                     # select Gulp Webapp from the list
                                     # press enter to include Sass, Bootstrap & Modernizer
                                     # overwrite package.json
                                     # watch the magic happen!

But what is a scaffold?

 

A scaffold is a starting spot for a project - it includes html, css & all the other goodies!

 

Using the webapp generator I setup a project for you!

 

The project uses gulp and many gulp plug ins to:

 

  • minify CSS & HTML
  • convert ES2015 to JavaScript
  • Combine all CSS into a single file
  • Combine all the JS into a single file
  • Minify the images
  • Assemble a built version
  • Run tests
  • Host a preview, live reload version of the site for development
gulp serve                       # tells gulp to build and serve your new website!

Super Cool!

Are there lots of different generators? They would save lots of time and effort!

Yes, almost all front end and backend projects use yo, gulp, bower/npm to scaffold their projects!!

Let's preview the website!

ctrl-c                    # stop gulp!

Where is the toast??? I can't find my toast. I can't find my website!

Stop gulp first.

The port: is set to 9000 - it must be 8082 to work with c9!

Let's look at the gulpfile.babel.js

Yeah, we got a problem...

The port is defined incorrectly 3 places in the gulpfile!

How can we best fix this problem?

Option #1 - 3 Changes

Change 9000 => 8082 in 3 different places: line 100, line 125 & line 135?

Problem? Hard coded value port => I am repeating myself!

Option #2 - 1 variable

Change 9000 => PORT in 3 different places: line 100, line 125 & line 135?

Problem? None=> I am not repeating myself - Don't Repeat Yourself! Be DRY!

Now let's preview the site we just built:

gulp serve                       # tells gulp to build and serve your new website!

http://gulpapp-ricmclaughlin.c9users.io:8082

Browser

Now add this new project to your github account! 

 

  • Stage your changes 
  • Commit your changes
  • Add a remote origin????
  • Push your changes

You learned something!!

Now on to get the site up and running on a gh-pages branch!

Yes, let's install a gulp plugin specifically for this task called gulp-gh-pages.

npm install gulp-gh-pages --save-dev    # tells npm to install the gulp-gh-pages plugin
                                        # into our package.json file

How do we do that? Could we use gulp to deploy our new website?

 

open the package.json and search for gulp-gh-pages

in package.json search for gulp-gh-pages

ctrl-c             # kill gulp

Now use your editor to add a deploy task to your gulpfile.babel.js

Editor

##### After ########
import gulp from 'gulp';
import gulpLoadPlugins from 'gulp-load-plugins';
import browserSync from 'browser-sync';
import del from 'del';
import {stream as wiredep} from 'wiredep';
import ghPages from 'gulp-gh-pages';

const $ = gulpLoadPlugins();
const reload = browserSync.reload;
var PORT = 8082;

gulp.task('deploy', function() {
  return gulp.src('./dist/**/*')
    .pipe(ghPages());
});
##### before ########
import gulp from 'gulp';
import gulpLoadPlugins from 'gulp-load-plugins';
import browserSync from 'browser-sync';
import del from 'del';
import {stream as wiredep} from 'wiredep';


const $ = gulpLoadPlugins();
const reload = browserSync.reload;
var PORT = 8082;

Now let's run our deploy task and get our new website hosted live on github!

gulp build          # tells gulp to build our website,
gulp deploy         # then run our deploy task to
                    # copy our app to the gh-pages branch on origin

Now, how do I access the new website?

Browser

https://[your github url]/gulpapp

Now add this new project to a new Jekyll project post! 

  • Use rake to make a new post
  • Edit the post and make it a project post
  • Add a link to your project source on github
  • Add a link to your gh-pages website
  • Live preview your new project post
  • Stage, commit and push your new project post!

Basic Skills = Running, Blocking & Tackling 

Groups of Skills & Movement = Plays

Football & Web Dev = Similar!

All the plays = Playbook

Realize Offense, Defense, Special Teams have Different Playbooks

Dev Runnin, Blockin & Tacklin'

  • conduct retrospective to improve
  • cycle time - find instead of scroll
  • Automation - three times rule
  • Tool Chain Pattern - node = ruby = next thing
  • Explict Names - posts != blog 
  • badness = restart
  • Badness on c9
        recreate workspace 
        clone repo

Portfolio Runnin, Blockin & Tacklin'

  • readme.md = project post
  • project post
    • tools
    • learned
    • live link, repo link
  • tweet upon completion
  • big projects => linkedin

Development w/Git Play

  • branch every time you start working on a feature
  • {Create something magical}
  • preview
  • stage then commit
  • merge branch
  • push
  • delete branch

master is for production only

Blog Runnin, Blockin & Tacklin'

Create new post

  • branch
  • preview
  • rake post
  • write post
  • set category
  • set tags
  • merge branch
  • push

Notice how similar these are!

Create new page

  • branch
  • preview
  • rake page
  • write page
  • set navigation
  • merge branch
  • push

update page/post? git development play

Portfolio Project Play

  • Create project post & readme.md
  • yeoman scaffold
  • add gh-pages
  • gulp build
  • github repo
  • git remote
  • push
  • gulp deploy
  • create website project post - link rep & live project, readme.md

Improve Portfolio Playlist

  • update bootstrap
  • create theme
    • find model
    • copy model
  • rename posts -> blog
  • make blog list page
  • make about page
  • make home page
  • make list of tags

master is for production only

Mission Accomplished!

You:

Can use git & github

Can manage the ruby and node.js tool chain

Can scaffold and host projects

Have a blog and project portfolio on github!

Bam!

Portfolio development with Github, Jekyll & yeoman/gulpjs -Session 3

By Ric McLaughlin

Portfolio development with Github, Jekyll & yeoman/gulpjs -Session 3

Getting Projects on Github using Node & Gulp

  • 1,713