An Introduction to GitHub

First, we're going to go through a tutorial using GitHub online.

Here's the tutorial, but we're going to go through this together in class.

Next we're going to mess around with git on our computer.

You're going to need to make sure git is installed on your computer. For Windows, download and install this file here. For Mac, download and install this file here.

  1. Open up Finder (Mac) or Explorer (PC) and go to your Documents folder. Inside of this folder create a new folder called "git" - all lowercase. Inside of that folder create a new folder called "project-1".
  2. Then open up Terminal (Mac) or Command Prompt (PC).
  3. Type in "cd Documents" and hit enter. Then type in "ls" and hit enter. You'll see a list of all the folders and files on your desktop.
  4. Then type in "cd git/project-1". You're now "inside of" the project-1 folder you just created.
  5. Now type in "git init". This will create a git repository in this folder. This means that all of the files inside of this folder and outside of this folder are now tracked by git.
  6. Open up Sublime and create a new HTML file and save it inside of your project-1 folder.
  7. Git will have noticed that the contents of this folder are changed. Back in Terminal/Command Prompt, type in "git status" and you'll see that it's noticed a change.

Before we go any further, we're going to explain an overview of how the next stage is going to work. Let's say that you've made some major changes to your HTML file - you're done coding for the day - and you want to mark your progress.

  1. First, we're going to tell git which files we want to add to our staging environment. These are files that we want git to document our changes for. In most cases we're just going to tell git "hey, notice all the files I've changed? I want to document all of those changes."
  2. Second, we're going to commit these files. Commits are records of the files you've changed since the last time you made a commit. Commits should always be stored with a little message about what you changed. Like "Made the navigation bar responsive" or "Edited the text in my about me section". Commits are helpful because they help you jump back to any point in the past, too.
  3. Third, if we want to keep track of our code online we'll want to push everything up to GitHub.com.

Okay. So let's go through these 3 steps one by one, following the high-level overview above. These are the steps you'll do over and over again whenever you're making anything.

  1. First, we're going to add our index.html file to our staging environment. You do this by saying "git add *". This will start tracking all files.
  2. Second, we're going to commit this file. Type in
    git commit -m "My first commit"
  3. Third, we're going to push these changes up to GitHub. We have to make a repo for it on GitHub first, though.
    1. Go to your GitHub account and click add repository.
    2. Give it a simple name. You don't need to change any other settings.
    3. GitHub will ask if you want to create a new repo from scratch or if you want to add a repo you have created locally. In this case, since we've already created a new repo locally, we want to push that onto GitHub so follow the '....or push an existing repository from the command line' section.
    4. Run the code in Terminal/Command Prompt that they give you. This you only have to do the first time you set up a repo - you're linking the repo on your computer to the repo on GitHub.
    5. Finally, you're going to complete the only step you'll do regularly - you're going to push the changes you've made on your computer up to GitHub. Type in "git push origin master" and hit enter. Then check your GitHub repo online and see the changes!