Git Tutorial

Enrique Manjavacas

14/10/2016

1 Getting started

1.1 Get git

Follow the instructions for your OS here.

1.1.1 Optionally install a Git client

See Materials for the course for links to different possibilities.

2 About Git

2.1 What is git?

“Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency” (Wikipedia)

A Version Control System (VCS) is a methodology or tool that…

  • helps you keep track of changes you make to the files in your project
  • and allows you to communicate and synchronize your changes with other people.

2.1.1 History

2.1.2 Why you need it?

  • Because it is used by instructors in the study programme.
  • Because the need for collaborative tools is increasing and VCS are most powerful.

2.1.3 VCS vs. Collaborative Text Editors (GoogleDocs, etc.)

Source: Dropbox Help

Synchronized vs Asynchronized Solution to the problem of collaborative editing.

“A practice by which dispersed users are able to concurrently modify shared artifacts with the guarantee that changes by different users will not automatically overwrite each other” (Altmanninger et al. 2009)

Collaborative Text Editors

  • Pros
    • Fast, real-time incorporation of changes.
  • Cons
    • Impossible to work offline
    • No guarantees that change history reflects the real sequence of changes

VCS

  • Pros
    • Documented change history
    • Unlimited in terms of participants
  • Cons
    • Steep learning curve

2.1.4 Take-away message

  • Trade-off between rigor (data side) and easiness (UX side).
  • Why be limited to one very end?

2.2 What is not git?

2.2.1 git vs GitHub

“GitHub is a web-based Git repository hosting service, which offers all of the distributed revision control and source code management (SCM) functionality of Git as well as adding its own features.” (Wikipedia)

but there are others, see BitBucket

2.2.2 A backup system

  • While you could use git/GitHub for backing up, it cannot handle large/binary files very well.

3 Basic Git Concepts

Let’s introduce a bit of vocabulary (Last bit of me talking alone!)

See the repository README for a glossary of terms

3.0.1 Repository

All tracked files in your project plus the full history of changes (commits and branches).

  1. Types of Repository
    • Local Repository hosted in your current machine, to which you can make changes.
    • Remote Repository hosted in a different machine, to which you have access from your current machine.

3.0.2 Working Tree (or directory)

  • Current local view of the project (folder).
  • It can be:
    • “clean” (Up to date with the tracked version)
    • “dirty” (Local changes haven’t been registered yet)

Ways to change the working tree:

  • Switch back to a previous state of the project (revert)
  • Add a change to the current state (commit)
  • Moving to another (possibly new) branch (A.K.A. checkout)
  • Move to a “future” state of the project (e.g. fetching remote changes)

3.0.3 Commit

A snapshot including changes to a previous state of the repository.

3.0.4 Branch

Any of the parallel states in the repository (a particular commit history).

4 Hands-on Tutorial

4.1 Create your own repository

For this tutorial, we are going to create a (very basic) resume homepage.

Create the remote

Sync locally (set a local to track the remote)

4.1.1 Using the Command Line

Initialize the repository 

$ git init

Initialized empty Git repository in /home/enrique/Documents/courses/resume

Add files to the repository 

$ git add --all

Track the remote 

$ git remote add origin https://github.com/emanjavacas/resume.git

Commit changes to the remote 

$ git push -u origin master

4.1.2 Using GitHub Desktop

Clone the remote

Alternatively, click on Set up in Desktop (same effect)

4.1.3 Your turn

  • First we need to download a template
    • Google for “free html resume template”
    • Pick one from here
    • Download the one I picked from here
  • Create a remote repository (github.com)
  • Create a local and set it to track the remote (i.e. clone the remote)
  • Populate the local repository with the template files

4.2 Commiting a single change

The git workflow

Make edit

commit_edit.png

Checking the status of the Working Tree 

$ git status

On branch master
Your branch is up-to-date with 'origin/master'.
Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git checkout -- <file>..." to discard changes in working directory)

        modified:   index.html

no changes added to commit (use "git add" and/or "git commit -a")

Diffing

commit_edit_diff_gh.png

4.2.1 From the command line

Add (stage) 

$ git add index.html

Commit 

$ git commit -m "Changed name"

[master 9a23987] Changed name
  1 file changed, 2 insertions(+), 2 deletions(-)

Push 

$ git push

Counting objects: 3, done.
Delta compression using up to 2 threads.
Compressing objects: 100% (3/3), done.
Writing objects: 100% (3/3), 395 bytes | 0 bytes/s, done.
Total 3 (delta 2), reused 0 (delta 0)
remote: Resolving deltas: 100% (2/2), completed with 2 local objects.
To https://github.com/emanjavacas/resume.git
  eb6121f..9a23987  master -> master

4.2.2 From GitHub Desktop

Add (stage) & commit

add_commit_gh.png

Push (sync)

sync_commit_gh.png

4.2.3 Your turn

  • Change your info in index.html
  • Add & Commit
  • Push

4.3 Commiting multiple changes

Make changes to multiple files

commits_edit.png

Check the changes 

$ git status

On branch master
Your branch is up-to-date with 'origin/master'.
Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git checkout -- <file>..." to discard changes in working directory)

        modified:   index.html
        modified:   css/main.css
        modified:   images/spectrum.jpg

4.3.1 From the command line

Git flow (add, commit)

  • Add email update 

    $ git add index.html

$ git commit -m "Changed mailto"

  • Add background update (both files at once) 

    $ git add css/main.css images/spectrum.jpg

$ git commit -m "Changed background"

Push 

$ git push

Pushing to https://github.com/emanjavacas/resume.git
Counting objects: 16, done.
Delta compression using up to 2 threads.
Writing objects: 100% (16/16), 252.52 KiB | 0 bytes/s, done.
Total 16 (delta 7), reused 0 (delta 0)
POST git-receive-pack (258725 bytes)
remote: Resolving deltas: 100% (7/7), completed with 3 local objects.        
To https://github.com/emanjavacas/resume.git
   9a23987..b45d6be  master -> master

4.3.2 From GitHub Desktop

Add (stage) & commit add_mail_commit.png

Add (stage) & commit multiple changes add_multiple_commit.png

Push both commits

multiple_commited_gh.png

4.3.3 Your turn

  • Search for a background image
    • Google for images (labeled for reuse; matching color; appropriate size)
    • Or download the one I used from here.
  • Put the file in the corresponding folder
  • Change main.css
  • Add & Commit (make sure you commit both files)
  • Do some other changes & commit them separatedly
  • Push everything

4.4 Branching

We are going to edit the content in the “resume” tab

4.4.1 From the command line

Create a new branch

  • Long version

    • Create branch 

      $ git branch resume

    • Move to it (checkout) 

      $ git checkout resume

Switched to branch 'resume'

  • Short version 

    $ git checkout -b resume

See which branches are there 

$ git branch -v

master 0a7be54 Changed background
* resume 299b6f9 Changed background

Switch to a particular branch (magic!) 

$ git checkout master

Switched to branch 'master'

4.4.2 From GitHub Desktop

Create a branch

new_branch_gh.png

See all branches

branches_gh.png

Select a branch

switch_to_branch_gh.png

4.4.3 Your turn

  • Create a branch (give it the name you prefer)
  • Switch to it (if you are not there yet)
  • Make local changes (as shown previously) & commit

Example of changes

  • Push (and see the results in your remote)
  • Switch branches and see how the Working Tree changes accordingly

4.5 Merging from local branch

4.5.1 From the command line

Compare branches 

$ git diff resume master

diff_branches.png

Merge source branch (resume) into target branch (master)

  • Switch to target branch (master) 

    git checkout master

  • Do the merge (’resume’ gets merged into ’master’) 

    $ git merge resume

Updating 299b6f9..5032375
Fast-forward
 index.html | 24 ++++--------------------
 1 file changed, 4 insertions(+), 20 deletions(-)

  • Push 

    $ git push

4.5.2 From GitHub Desktop

Switch to target branch (in our case, master)

switch_to_master_gh.png

Select “merge from resume”

merge_from_resume_gh.png

A Merge is just a commit

merge_commit_gh.png

Push (Sync)

4.5.3 Your turn

  • Switch to receiving branch
  • Merge from branch “resume”
  • Push

4.6 Merging a pull request

Merges are not restricted to local branches. You can also merge:

  • A branch in your remote (an “origin” branch)
  • A branch in someone else’s remote - fork source project (an “upstream” branch).
  • A branch of someone’s fork of your project. Pull Request.

Now you are going to merge a pull request that your colleague is going to submit.

4.6.1 Your turn

Introduce (evident) typos in your local index.html file (push them too)

Fork (i.e. “copy”) your colleague’s project on their GitHub repository page

Clone the fork locally (to be able to modify the project)

Modify the typos and commit

Issue a pull request to your colleague’s repository

Merge your colleague’s pull request into your master branch

  1. Go to your github project
  1. Check pull request
  1. Accept incoming pull request

4.7 Merging a conflicting pull request

That was easy, but sometimes merging doesn’t work automatically.

Explanation of git automerge algorithm here.

We are going to do the following

  • Introduce changes in our own repository
  • Let our colleague introduce conflicting changes into their fork
  • Attempt to merge their fork with conflicting changes (fail)
  • Solve the conflict & merge

Modify your local repository (change the Twitter handle)

Also modify your local copy of the repo you forked from your colleague (introduce a conflict)

Issue pull request to your colleagues with your conflicting changes

Check your colleague’s incoming pull request

Resolving merge conflicts (two solutions)

  • Ask the pull-request issuer to solve the conflicts
  • Solve the conflicts yourself and merge

Solve the conflicts yourself and merge

To proceed you need a command line (use GitHub Desktop built-in)
  • Clone your colleague’s fork branch into your project

    • Create a local branch to pull your colleague’s fork branch to 

      $ git checkout -b yourcolleagueusername-branch starting-branch

    • Pull from the remote branch into your local branch 

      $ git pull https://github.com/yourcolleageusername/resume.git branch
  • Attempt to merge into your local branch

    • Switch to the target branch 

      $ git checkout starting-branch

    • Attempt merge 

      $ git merge yourcolleaguesusername-branch

Conflict syntax

Solve the conflict

  • Edit the conflicted file
  • Commit and push the changed file

4.8 Revert

Revert is an operation that is less common than what you might think.

The “git philosophy” encourage you to try things in a new branch and only merge if everything worked.

4.8.1 From GitHub Desktop

  • Use the revert functionality

5 Goodie

  • If you change the name of your repository to username.github.io, you can get your own personal page served by GitHub
  • More info about GitHub Pages here.