Git and GitHub

Joel Ross
Autumn 2024

View of the Day

  • Admin and Q&A

  • Command Line Review (if needed)

  • Git and GitHub Practice

  • Git Branches and Merging

Reviewing

Q&A / Review Poll

https://pollev.com/joelross

Installing Git

Step 1. Install Git (see textbook)

# configure git to know who you are

git config --global user.email "your_email_address"

git config --global user.name "Your Full Name"
# check on command line that git is installed
git --version

Step 2. Sign up for GitHub

https://github.com/signup

 

Step 3. Configure Git (command line)

Cloning

You clone (download) a repository to your local machine. This creates a copy of that repo on your computer.

git clone

repo on your
machine

repo on GitHub

Clone Practice Code

For today's practice, accept the GitHub Classroom assignment and then clone your personal repository

https://classroom.github.com/a/q4keY4kJ

Personal Access Tokens

In order to clone repos from Github, you will need to set up an access token (like a password) for authentification. Do this under Github's Settings > Developer Settings

DO NOT PUT ONE REPO INSIDE OF ANOTHER!

Git Commands

 git clone url

Download repo to local machine. Creates a local copy.

 git status

Check status of repo

Make some changes!

Add another paragraph <p> (lorem ipsum text is fine) to the index.html file.

Can you include a hyperlink as well?

The Staging Area

Put changes in temporary storage before committing.

 git add .

Add everything in directory

Add file to staging area

 git add FILENAME

use this

Committing Changes

Store current snapshot of files in repository!

 git commit -m "message"

Commit changes

If you forget the -m option,
use :q (colon then q) to quit vi

(it happens to everyone)

Commit Message Etiquette

xkcd.com/1296/

Use informative commit messages; they document changes for others. Messages should complete the sentence:

     If applied, this commit will ________________.

Local Process

files

staging area

git add .
git commit -m "message"

repo

Push to GitHub

Upload commits to the GitHub cloud repo.

 git push

Push to the remote

Using GitHub (Assignments)

edit files

staging area

git add
git commit
git clone

your machine

git push

your copy

follow assignment
link

More changes!

Add a <footer> that contains your name (as the author) for the page.

 

Commit and push your change to GitHub.

Branches

Branches allow for non-linear development and for naming different versions of code in the same repo. More on this later!

main

Branch Commands

 git branch

List available branches

 git branch [my_branch]

Create a new branch called "my_branch"

 git checkout [my_branch]

Switch to branch "my_branch"

 git checkout -b [my_branch]

Create and switch to branch "my_branch"

 git branch -d [my_branch]

Delete branch "my_branch"

Branch Practice!

  1. Open the index.html file (in VS Code)

  2. Create and checkout a new branch called experiment

  3. Add a caption for the image (another paragraph below it)

  4. Add and commit your change

  5. checkout the main branch

  6. Add another introductory paragraph of content (before the image)

  7. Commit your change

  8. Switch between the experiment and main branches (clicking on VS Code in between). See the file contents changing?

Branches

main

main

experiment

experiment

HEAD

HEAD

HEAD

HEAD 

git branch experiment

git checkout experiment

git commit

git commit

git checkout main

git commit

git checkout experiment

HEAD

HEAD

experiment

HEAD

Merging

We can merge two branches back together, producing a commit that contains the combined changes from both branches

main

main

experiment

HEAD

HEAD

Merging

 git merge [other_branch] --no-edit

Merges changes from other_branch into the current branch.

A new commit is created on the current branch containing the merged content.

Merging Practice

  1. Make sure you are on the main branch
    (use git branch to check; the current branch has a *)

  2. Use git merge to merge the experiment branch into main branch.

    • If you get dropped into vi, hit :wq (colon then w then q) to accept the message.

  3. Check in VS Code that the file now contains both sets of changes!

Merging Practice II

  1. You should be on the main branch.

  2. Create and checkout a new branch called danger

  3. On the danger branch, change the <h1> heading to say "Warning". Remember to commit your change.

  4. checkout the main branch again.

  5. Change the <h1> heading to ve something about the dog. commit your change.

  6. Use git merge to merge the danger branch into main branch
     

  7. (Don't panic)

Merge Conflicts

A merge conflict occures when two commits from different branches include different changes to the same code. Git does not know which version to keep, so makes you choose. 

Merge conflicts must be resolved manually

Merge conflicts are a common and normal part of merging. They are the "typos" and "bugs" of using git.

Resolving Merge Conflicts

In order to resolve a conflict, you need to edit the file (code) so that you pick which version to keep. git will add marker content where you need to make a decision:

<<<<<<< HEAD

// This is the code from the "local" version (the branch you merged INTO)
// a.k.a the version from the HEAD commit

const message = "I am an original";
const lyric = "I've got no strings to hold me down";

// There can be multiple lines that conflict, including lines being deleted

=======

// This is the code from the "remote" version (the branch you merged FROM)

const message = "I think I'm a clone now...";

// The lines need not be related in content, they've just changed in a way
// that git can't figure out which to keep!

>>>>>>> f292a3332aedc8df3e8e8cf22ca3debc214c6460

the two versions to pick from

a divider between the versions

end conflict area

git add .
git commit -m "Merge branch 'other'"
  1. Use git status to see which files have merge conflicts. Note that files may have more than one!
     
  2. Fix the code so that it reflects the "final" version you want.
     
  3. Remember to delete the <<<<<<< and ======= and >>>>>>> !!
     
  4. Once you're satisfied that the conflicts are all resolved, add and commit your changes (the code you "modified" to resolve the conflict):

Resolving Merge Conflicts

Merge conflicts are normal and expected

Multiplayer Git

Collaboration

Multiple people's local repositories can be linked to the same remote repository, allowing them to push and pull to the same central location.

Collaboration Demo

  1. Partner up with a partner ("Howdy pardn'r")

  2. One person should add the other as a collaborator





     

  3. The added person will then need to clone their partner's repo on their machine

    • Remember to do this in a different folder!

Collaboration Demo

  1. Partner: edit the README.md file so it includes a message to your partner (be nice)

    • add and commit your change as usual.
       

  2. Me: create a new partner.html file that includes a message to your partner (be nice)

    • add and commit as usual.
       

  3. Partner: push their changes to Github
     

  4. Then Me: push their changes to Github

    • What happened?!

Collaboration Demo

  1. Me: pull to merge in Person 1's message

    • Both people should confirm the changes are local!
       

  2. Partner: push your changes to Github
     

  3. Me: pull in Person 2's message and merger

    • You both should now have up-to-date code!

Collaboration Demo II

  1. Me: edit the partner.html file so that it has a different message. Change the existing line of code.

    • add and  commit your change as usual.
       

  2. Partner: edit the partner.html file so that it has a different message. Change the existing line of code.

    • add and commit as usual.
       

  3. Partner: push their changes to Github

    • What happened?

  4. Then Me: push their changes to Github.
    But they need to pull first...

git add .
git commit -m "Merge branch 'other'"
  1. Use git status to see which files have merge conflicts. Note that files may have more than one!
     
  2. Fix the code so that it reflects the "final" version you want.
     
  3. Remember to delete the <<<<<<< and ======= and >>>>>>> !!
     
  4. Once you're satisfied that the conflicts are all resolved, add and commit your changes (the code you "modified" to resolve the conflict):

Resolving Merge Conflicts

Any git questions?

Action Items!

  • Complete task list for Week 2 (items 1-9)

    • Read: Chapter 1-5 (especially 5)

  • Problem Set 01 due Wednesday (for reals!)

  • Problem Set 02 due Friday (for reals!)

  • Begin thinking about idea for your project

 

Next: CSS and Semantic HTML