Other Pages

deploying_to_github.step

h2 do
  span "If you have already deployed your app to GitHub, go on to "
  a 'Deploying to GitHub again', href: "deploying_to_github_again"
  span "."
end

important "If you have any problems with these steps, ask a volunteer for help. If you don't know if you have Git installed or have a GitHub account, it's okay to do these steps later instead."

goals do
  goal "Create a new git repository locally"
  goal "Create a new git repository on GitHub"
  goal "Push your local repository to GitHub"
end

steps do
  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. Wherever you see `[your-github-user-name]`, you'll replace that with your user name (and delete the braces: the `[` and `]`)."
    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."
  end

  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.'"
  end

  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.)"
  end

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

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

  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 volunteer first that you're doing the right thing."
  end

  step do
    message "Woohoo!!! Take a breath and wait a few minutes."
    message "Since 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. However, there's a small lag between the first push and being able to see your content on the web."
    message "In a few minutes time, 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!"
  end
end

explanation do
  message <<-MARKDOWN

## 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 &mdash; some people use other source
control tools like SVN, and there are wild and crazy coders who don't use source control
at all.

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

  MARKDOWN
end