View of the Day

Admin and Q&A
Command Line Review
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)

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

Clone Practice Code

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

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

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

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 then !)
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!

Open the index.html file (in VS Code)
Create and checkout a new branch called experiment
Add a caption for the image (another paragraph below it)
Add and commit your change
checkout the main branch
Add another introductory paragraph of content (before the image)
Commit your change
Switch between the experiment and main branches (clicking on VS Code in between). See the file contents changing?

Branches

main

experiment

HEAD

git branch experiment

git checkout experiment

git commit

git commit

git checkout main

git commit

git checkout experiment

HEAD

experiment

HEAD

Merging

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

main

experiment

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

Make sure you are on the main branch
(use git branch to check; the current branch has a *)
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.
Check in VS Code that the file now contains both sets of changes!

Merging Practice II

You should be on the main branch.
Create and checkout a new branch called danger
On the danger branch, change the <h1> heading to say "Warning". Remember to commit your change.
checkout the main branch again.
Change the <h1> heading to ve something about the dog. commit your change.
Use git merge to merge the danger branch into main branch
(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'"

Use git status to see which files have merge conflicts. Note that files may have more than one!
Fix the code so that it reflects the "final" version you want.
Remember to delete the <<<<<<< and ======= and >>>>>>> !!
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

GitHub and Branches

Because GitHub just hosts normal repositories, GitHub has branches as well! These can (but need not) correspond with the branches on your local machine.

GitHub Pages

A GitHub service that provide (free) web hosting for repository content.

The content of the gh-pages branch will be available at https://username.github.io/reponame.

To "publish" your webpage, just push your content to that branch.

https://help.github.com/articles/user-organization-and-project-pages/

Development vs Production

# do all your coding on `main`!

# switch to gh-pages ("production" branch)
git checkout gh-pages

# merge the changes from main
git merge main

# push to GitHub to publish
git push origin gh-pages

# switch back to main branch for more coding
# DON'T FORGET THIS STEP!!
git checkout main

# remember to push your souce code
git push origin main

IMPORTANT: The gh-pages branch is your "production" branch. Never make changes on production. All changes should be made on the main branch, and then merged into production gh-pages branch.

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

Partner up with a partner ("Howdy pardn'r")
One person should add the other as a collaborator
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

Partner: edit the README.md file so it includes a message to your partner (be nice)
- add and commit your change as usual.
Me: create a new partner.html file that includes a message to your partner (be nice)
- add and commit as usual.
Partner: push their changes to Github
Then Me: push their changes to Github
- What happened?!

Collaboration Demo

Me: pull to merge in Person 1's message
- Both people should confirm the changes are local!
Partner: push your changes to Github
Me: pull in Person 2's message and merger
- You both should now have up-to-date code!

Collaboration Demo II

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.
Partner: edit the partner.html file so that it has a different message. Change the existing line of code.
- add and commit as usual.
Partner: push their changes to Github
- What happened?
Then Me: push their changes to Github.
But they need to pull first...

git add .
git commit -m "Merge branch 'other'"

Use git status to see which files have merge conflicts. Note that files may have more than one!
Fix the code so that it reflects the "final" version you want.
Remember to delete the <<<<<<< and ======= and >>>>>>> !!
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
(so far)?

Action Items!

Complete task list for Week 1 (all items)
Problem Set 01 due Friday (for reals!)
- Practicing with git and simple html/css
Read ahead for next week: Chapter 5
Begin thinking about idea for your project

Next: CSS and Semantic HTML

Git and GitHub

Joel Ross Spring 2025

info340sp25-git

More from Joel Ross

Joel Ross
Spring 2025