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

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

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

HTML Website

Address: user.github.io

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

*.md

*.html

*.yml

Only your personal github website works like this

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

# 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

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

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. 

We need node.js!

And we are gonna need a JavaScript tool chain!

How do I run JavaScript tasks?

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!

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)

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!

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

Sweet! I'm loving c9!

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

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

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:

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!

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!

The project uses gulp and many gulp plug ins to:

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

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!

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

How can we best fix this problem?

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

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

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!

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

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

Browser

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

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

in package.json search for gulp-gh-pages

ctrl-c             # kill gulp

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;

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

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!

Setup Project

Package Project

Then tweet @ric_mclaughlin a URL to your completed project for an endorsement