span "If you haven't yet deployed to Github, start at "
a 'First-time setup', :href => '#first-time'
span ". Otherwise, start at "
a 'Every time', :href => '#every-time'
important "If you have _any_ problems with these steps, grab a TA and have them help you out."
important "If you don't know if you have Git installed or have a GitHub account, it's probably better to develop locally (and not do these steps for now) and install Git later."
a :name => 'first-time'
situation "First-time setup" do
goal "Create a new git repository locally"
goal "Create a new git repository on Github"
goal "Push your local repository to Github"
tip "If you have a 'railsbridge' folder on your computer or some other place you like to keep project files, `cd` to that directory and then follow the steps below."
step "Make a special new directory" do
message "To get started on the project, you'll need to open up your command line. If you have a Mac, open up the Terminal app. If you're on a PC, look for a program called Command Prompt. You'll also need to know your Github user name and password, so go ahead and double-check it if you don't remember. Wherever you see `[your-github-user-name]`, you'll replace that with your user name (and delete the braces)."
console "mkdir [your-github-user-name].github.io"
message "`mkdir` stands for 'make directory.' You just made a new directory that you'll put your project files in."
step "Initialize a new local git repository" do
console "cd [your-github-user-name].github.io"
message "You just changed directories and moved into the folder you just created."
console "git init"
message "You just initialized an empty repository, i.e. told git, 'I want to start a new project here.'"
step "Make a commit" do
console "touch index.html\ngit add index.html"
message "This creates a blank, new file called 'index.html'. The next line tells git you want to stage the file."
console "git commit -m 'first commit'"
message "You just made an initial commit. (Think of it as a snapshot of your project that you can come back to later.)"
step "Add Github as a remote" do
message "You really do have to type your user name three times in the next command. Get ready for it."
console "git remote add origin https://[your-github-user-name]@github.com/[your-github-user-name]/[your-github-user-name].github.io.git"
message "You just set up a 'remote' — a git repository somewhere else (in this case, on Github) that also holds your project files."
step "Create a new repo via the Github UI" do
tip "You can skip this step if you've created a ***[your-github-user-name].github.io*** page previously."
message "Navigate to https://github.com/[your-github-user-name]/"
message "Click 'Create a new repo' in the upper right"
img :src => "img/github_create_repo.png"
message "Type **[your-github-user-name].github.io** into the 'Repository name' box"
img :src => "img/github_name_your_repo.png"
important "DO NOT choose 'Initialize this repository with a README' when creating the repo."
step "Push your code to Github" do
message "Now, push the new file you just committed to Github."
console 'git push -u origin master'
message "You'll probably be prompted to type your Github password at this point. After you do, you'll have just pushed your project to Github's servers!"
important "If you have existing content in your Github pages repo, this command will fail, and you will have to do a `git push -uf origin master` instead. Verify with a TA first that you're doing the right thing."
message "Woohoo!!! Take a breath and wait 15 minutes."
message "Because you gave your Github repository a special name (in the format [your-github-user-name].github.io), Github will automatically take the contents of this one repository and make them your personal web page on Github. But there's a small lag between the first push and being able to see your content on the web."
message "In 15 minutes, when you visit [your-github-user-name].github.io in a browser, you should see a blank white page. This is great! You're looking at the index.html file you just created, now live on the web!"
a :name => 'every-time'
situation "Every time" do
goal "Commit your changes to locally"
goal "Push your changes to Github"
step "Commit any pending changes to git" do
message "Github will only receive the files we've committed into our local git repository. So we need to make sure all changed files have been committed."
console "git status"
message "`git status` shows you any pending changes you've created. If it has no output, you're already ready to deploy! Otherwise..."
git add .
git commit -m "Some helpful message for your future self"
message "Your commit message should reference whatever your outstanding changes are: something like 'added new cat picture'."
step "Push changes to Github" do
console "git push origin master"
message "This takes all changes you've committed locally and pushes them to Github."
step "Visit your site" do
message "Go to your browser and navigate to **[your-github-user-name].github.io**"
message "You should see the changes you made, but ON THE INTERNET!"
## What is Git?
Git is an open-source tool for tracking and managing changes to source code. If you've
used tools like SVN or CVS, you can use Git to do the same things.
Git is not required for front end development at all — some people use other source
control tools like SVN, and there are wild and crazy coders who don't use source control
### But here are some good reasons to use a source control system:
* You can commit different/earlier versions of a project, and get them back
later if you change your mind.
* It's easy to also copy these versions to another server or computer, so you
have a backup if your laptop is stolen or your hard drive gets damaged.
* Other coders can more easily work on a project with you. Source control
systems have an automated way to 'merge' or combine changed files together.
### And there are some neat things about Git specifically:
* Git is distributed. Each person or computer working on the project has a full
copy of it. There isn't a remote server you have to connect to that has the
'official' copy somewhere.
* Git makes it easy to 'branch' or work separately for a while on an alternate
version of the project, and then 'merge' those changes back in if you want to.
* Git is ultra-powerful, and even many experienced developers are mystified
by its wily ways.
## What is Github?
Github is a web application that will store copies of your git repositories for you.
It's a convenient place to keep a backup of your projects, and it has a nice-looking
web interface that makes it easy to see your files and changes.
Projects that you make public (i.e. open source) can be stored on Github for free.