Loading
Ric McLaughlin
This is a live streamed presentation. You will automatically follow the presenter and see the slide they're currently on.
Session 1
From Nothing to a Static Website
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
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.
And I worked really hard to become a developer!
Grampa says, "Send out resumes!!"
Now how do I find my first gig?
The most amazing thing I have ever seen.
The most amazing thing I have ever seen.
The most amazing thing I have ever seen.
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
an open source
coding collaboration website
based on the git version control system
that turned into a social network
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
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
# <- 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
# 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) |
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 |
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!
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
# 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
# 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 |
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
# 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?
# 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
# 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 |
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
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!
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
# 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?
Take a look at your new portfolio:
Browser
[github username].github.io
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
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!
# 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
# 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
You have a portfolio website!
With a first small project that is live!
With a link to the first project from your portfolio!
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 need: