Pippin's Introduction to Git and GitHub Desktop - pippinbarr/dart450-2018 GitHub Wiki

Getting Set Up

We'll be using GitHub in the class to manage our project work. This will enable you to easily keep track of your work and will give you nice extras like free hosting of your sites, backing up to the cloud, and learning an industry standard version control system.

Getting a GitHub account

You need an account on the GitHub website so you can store your work there.

  1. Go to github.com
  2. Click on 'Sign up' at the top right
  3. Go through the signing up process
  4. Log in if you aren't already

Getting the GitHub Education pack (optional but nice)

GitHub provides a bunch of free stuff for students, worth having.

  1. Go to education.github.com
  2. Click on 'Get the pack'
  3. Go through the process (requires a GitHub account)

Getting GitHub Desktop (if you're using your own computer, CDA computers already have it)

We will use a Graphical User Interface (GUI) called GitHub Desktop when we use Git in our work to make it simpler and to avoid the command line. (If you already use the command line or another GUI like SourceTree you are welcome to.) Note that GitHub Desktop is already installed on CDA computers in the labs.

  1. Go to desktop.github.com
  2. Download the appropriate version
  3. Install the downloaded version

Setting up GitHub Desktop

  1. Open the downloaded version (or the version already on your CDA computer) and follow the instructions to authenticate with your github.com login
  2. Ignore the Tutorial messages for now (you can always do the tutorial later)

Note: Because CDA deletes local files, you will likely have to set up and authenticate GitHub Desktop each day you use it because it will forget your settings.

Creating your dart450 repository

When we use Git we create repositories for our projects. They are basically just a folder full of our work, but Git keeps track of all the changes we make to it so that we can undo mistakes, look at the history of our work, develop a structured approach to our work, and collaborate more easily.

In this course we will work out of a single repository (folder) called dart450 in which you will store all the exercises and assignments you do in separate folders. That folder will exist on your local computer and also in the cloud. Let's create it.

  1. Go to github.com
  2. Log in if you need to
  3. Click on Start a project at the top to go to the Create a new repository page
  4. Call it dart450. Note that Git repositories usually have names in lowercase.
  5. Add a description to the repository (something like "Pippin Barr's repository for DART 450 in Winter 2018" would do, except using your own name.)
  6. Make sure your repository is set to be Public as we will make our work openly in this class
  7. Tick the "Initialize this repository with a README" box, we'll write in the README soon
  8. Click Create repository
  9. You just made a Git repository on GitHub!

Note that this repository currently lives in the "cloud" on github.com. It isn't on your computer yet. That's our next step.

Cloning your dart450 repository to your computer

In Git, when you make a local (on your own computer) version of a remote (online) repository we call it cloning. We are going to clone our dart450 repository from github.com to your computer so you can actually add files and do work on the computer.

  1. Make sure you are logged in to github.com
  2. Go to your repository on github.com. It will be at the address "http://www.github.com/yourusername/dart450". Or you can just got to github.com and go to "Your repositories" at the lower right and click on the dart450 repository.
  3. Click on the green Clone or download button and select Open in desktop. This will:
  4. Download all the files in the repository to your computer
  5. Open GitHub Desktop if it isn't already Open
  6. Ask you where you want to save the repository on your computer
  7. Save the repository anywhere on the computer that suits you. The Desktop is a pretty reasonable place. This will:
  • Create a folder called dart450 in the location you specified
  • Add this repository/folder to your GitHub Desktop setup - you'll probably see an empty "History" tab to start with

Now you have your dart450 repository on your computer (as well as in the cloud at github.com)! You're ready to actually do work!

Important note for CDA computers

Because the CDA computers erase all local files every night, your local repository will most likely be deleted wherever your saved it on the computer. This is fine, but requires you to remember two things:

  • Make absolutely sure you commit and push your changes to the remote repository before you finish work for the day (see below)
  • When you start work on a CDA computer next time, you will need to follow the steps for authenticating GitHub Desktop and cloning the repository again. Now that you've created a repository, this will mean: logging into GitHub Desktop again, choosing File > Clone Repository choosing your dart450 repository from the list in the GitHub tab, and choosing where you want to save it (such as the Desktop).

One way around having to clone your repository every time you start work would be to save it onto the network drive, such as into public_html, but this is currently not supported explicitly by CDA and could have its own problems. In the end, it's probably safer to clone each day.

The Basic Workflow

The basic idea behind using Git (via GitHub and GitHub Desktop) is to keep track of your work as you do it. The simplest workflow involved is something like this:

  1. You make some changes to your project in your local copy. Something like an hour's work, say, reaching some sort of defined goal perhaps. For example, perhaps you finish a new version of the CSS for a website.
  2. You commit these changes to the local repository on your computer using GitHub Desktop, adding a message like "Finished new CSS" that explains what you did. This stores this newest version of the project in the repository.
  3. At some point (either right away or after more commits) you push these changes to the remote repository on github.com using GitHub Desktop. This makes sure your newest version is also safe in the "cloud" (and can be seen by your collaborators if you have them).

So basically you develop a rhythm of doing a chunk of work, committing and pushing it, doing another chunk of work, etc. If nothing else, this encourages you to think about your work more in terms of well-defined units.

Let's try out the work flow...

Edit a file...

When you made your repository on github.com a file called README.md was created. The README.md file is there to explain what your repository is for. As an added bonus, any folder in your project that has a README.md in it will automatically display that file in the browser when you navigate to the folder on github.com.

Let's edit that file...

  1. Find the folder on your computer where the dart450 repository is. This will be wherever you saved it when you cloned it from github.com.
  2. Open the text editor Atom
  3. In Atom, open the dart450 repository folder. This will let you work with all the files in the folder by using the file listing on the left side of the Atom window. (Either drag the folder into the Atom window or choose File > Open Project Folder.
  4. Select the README.md file in Atom. This is probably the only file in the folder, though you can probably also see a "secret" directory called .git/ as well. (Ignore that, but don't delete it!)
  5. Edit the README.md file by adding some text that describes what your DART450 repository is for - which is to store your class work for this course. Include your name in the description.
  • Note that you can use "Markdown" when you write in these files (extension .md) which enables you to use plain text to generate rich, formatted text. See the Markdown Cheatsheet for a quick set of examples.
  1. Save the file (File > Save or the keyboard shortcut).
  2. Now the file is changed and saved on the computer (it is not yet updated in the repository, and it is not yet in the cloud on github.com)

Commit a file

Now that we've made a change to a file (the only file!) in our project, GitHub Desktop will have noticed the change for us and we can commit (essentially "save") the changed version to our repository.

  1. Open GitHub Desktop and view your dart450 repository in it (it will probably already be open, but otherwise select it in the left-hand pane of the interface)
  2. Notice that at the top middle there is now a tab that says "1 Uncommitted Change". This is because Git noticed you changed a file in your project. Click into this tab.
  3. Now you can see a list of all the files that have been changed (just README.md in this case) and green (added) and red (removed) highlighted text showing you what changes were made.
  4. We want to commit this change to our repository, so at the bottom left we add a summary of our changes (perhaps "Added description of repository") and then click Commit to master. This stores the changes in our local repository.
  5. Now the file is stored on your computer and in your local copy of the repository (but it is not yet in the cloud on github.com)

Sync the repository

In order to keep our remote repository (on github.com) up to date with our local repository (on our computer) we need to push our local changes. Doing this is fortunately very simple.

  1. Click Push origin at the top right of the GitHub Desktop interface. You should briefly see a little loading bar as it uploads your files.

That's it. If you want to prove to yourself it worked:

  1. Go to your repository on github.com (remember you can navigate there via the interface or go straight to github.com/yourusername/dart450/). Or just reload the page if you're already there.
  2. Check that the README.md displayed on the page reflects the changes you just synced.
  3. Now the file is store on the computer, in the local repository, and on the remote repository.

Remember: It is especially important on CDA computers to commit and push your work before leaving so you don't lose it when it is deleted from the computer.

Note: If you can't commit and/or push your work for some reason, make sure to copy the folder of the repository you're working with and save it somewhere like a USB drive, DropBox, Google Drive, your network home, etc. You might want to .zip it first depending on where you're storing it. You can resume work on it next time by starting GitHub Desktop and dragging the folder into it.

Summary

That's the basic working method with github.com and GitHub Desktop.

  1. Make changes to your project.
  2. Commit the changes to your local repository using GitHub Desktop.
  3. Push the changes to your remote repository on github.com using GitHub Desktop.