Using Git and GitHub

note

This lab is compiled from multiple GitHub guides and tutorials to suit the needs of our class.

Introduction

GitHub is a code hosting platform for version control and collaboration. It lets you and others work together on projects from anywhere.

This tutorial teaches you GitHub essentials like repositories, branches, commits, and pull requests. You'll create your own Hello World repository and learn GitHub's pull request workflow, a popular way to create and review code.

In this tutorial, you will:

• Create and use a repository
  • Note: For most assignment, we'll be using GitHub classroom which will create the repository for you.
• Start and manage a new branch
• Make changes to a file and push them to GitHub as commits
• Open and merge a pull request

In this tutorial we will be editing text/markdown files. You may use GitHub Desktop, Command Line Interface (CLI), or Visual Studio Code.

Important note on Git vs GitHub

Many people struggle to understand the difference between Git and GitHub. It's important to know these are two separate, but closely related tools.

Git is a command line tool for tracking changes made to files incrementally.

GitHub is a cloud tool for storing Git repositories and sharing them with others. GitHub provides many collaboration tools such as Pull Requests, Wikis, Issues, Projects, and more.

GitHub is just one tool for remote git repositories. Other tools like GitLab and BitBucket are also available and serve the same purpose.

Creating a repository

A repository is usually used to organize a single project. Repositories can contain folders and files, images, videos, spreadsheets, and data sets -- anything your project needs. Often, repositories include a README file, a file with information about your project. GitHub makes it easy to add one at the same time you create your new repository. It also offers other common options such as a license file (we don't need to worry about those for now).

Your hello-world repository can be a place where you store ideas, resources, or even share and discuss things with others.

1. In the upper-right corner of any page, use the add drop-down menu, and select New repository.

   

2. In the Repository name box, enter hello-world.

3. In the Description box, write a short description.

4. Select Add a README file.

5. Click Create repository.

   

Clone down the repository

Now that you have a remote repository, we need to clone the repository to create a local repository/instance on your computer. You can either use GitHub Desktop, Command Line, or Visual Studio Code directly.

GitHub Desktop

1. In the File menu, click Clone Repository.
   
2. Click the tab that corresponds to the location of the repository you want to clone. You can also click URL to manually enter the repository location.
   
3. Choose the repository you want to clone from the list.
   
4. Click Choose... and navigate to a local path where you want to clone the repository.
   
5. Click Clone.

Command Line

This is covered in this video - until I type up the instructions. (The video will start at the correct time.)

VS Code

This is covered in this video - until I type up the instructions. (The video will start at the correct time.)

Branching

Branching lets you have different versions of a repository at one time.

By default, your repository has one branch named main that is considered to be the definitive branch. You can use branches to experiment and make edits before committing them to main.

When you create a branch off the main branch, you're making a copy, or snapshot, of main as it was at that point in time. If someone else made changes to the main branch while you were working on your branch, you could pull in those updates.

This diagram shows:

• The main branch
• A new branch called feature
• The journey that feature takes before it's merged into main

Have you ever saved different versions of a file? Something like:

• story.txt
• story-joe-edit.txt
• story-joe-edit-reviewed.txt

Branches accomplish similar goals in GitHub repositories.

Developers use branches for keeping bug fixes and feature work separate from our main (production) branch. When a change is ready, they merge their branch into main.

Create a branch

GitHub Desktop

1. At the top of the app, click Current Branch and then in the list of branches, click the branch that you want to base your new branch on.
   
2. Click New Branch.
   
3. Under Name, type the name of the new branch. Name the branch readme-edits
   
4. Use the drop-down to choose a base branch for your new branch.
   
5. Click Create Branch.
   

Command Line

1. in the command line terminal, navigate to the repository directory. For example, if the my directory is /Users/joe/hello-world, then type to cd /Users/joe/hello-world.
2. type git branch to see a list of branches.
3. type git branch readme-edits to create a new branch called readme-edits.
4. type git checkout readme-edits to switch to the new branch.
   • You could combine the last 2 commands into a single one by typing git checkout -b readme-edits.
5. type git checkout main to switch back to the main branch.

Visual Studio Code

You can create and checkout branches directly within VS code through the Git: Create Branch command in the Command Palette (⇧⌘P).

The Git: Create Branch command lets you quickly create a new branch. Just provide the name of your new branch and VS Code will create the branch and switch to it.

GitHub on Browser

1. Click the code tab of your hello-world repository.
2. Click the drop down at the top of the file list that says **main**.
   
3. Type a branch name, readme-edits, into the text box.
4. Click Create branch: readme-edits from main.
   

Now you have two branches, main and readme-edits. Right now, they look exactly the same. Next you'll add changes to the new branch.

note

Optional additional resource on branching: https://learngitbranching.js.org/

Making and committing changes

• Make sure you've navigated to the correct branch (readme edits).

• You can make and save changes to the files in your repository. In Git, saved changes are called commits. Each commit has an associated commit message, which is a description explaining why a particular change was made. Commit messages capture the history of your changes so that other contributors can understand what you've done and why.

GitHub Desktop

1. After you make your edits to the readme.md file locally in your favorite text editor, go to your command line terminal
2. At the bottom of the list of changes, in the Summary field, type a short, meaningful commit message. Optionally, you can add more information about the change in the Description field.
   
3. Under the Description field, click Commit to readme-edits.
   
4. Click Push origin to push your local changes to the remote repository.
   

Command Line

1. type git add . to add all of the files in your repository to the commit.
2. type git commit -m "edited readme file" to save your changes.
3. type git push origin main to push your changes to the remote main branch.

Visual Studio Code

Find Instructions on VSCode Documentation page

GitHub on Browser

1. Click the `README.md` file.
2. Click edit to edit the file.
3. In the editor, write a bit about yourself.
4. Copy and Paste the assignment checklist
5. In the Commit changes box, write a commit message that describes your changes.
6. Click Commit changes.

These changes will be made only to the README file on your readme-edits branch, so now this branch contains content that's different from main.

tip

Git Markdown Cheatsheet: https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet

Opening a pull request

Now that you have changes in a branch off of main, you can open a pull request.

Pull requests are the heart of collaboration on GitHub. When you open a pull request, you're proposing your changes and requesting that someone review and pull in your contribution and merge them into their branch. Pull requests show diffs, or differences, of the content from both branches. The changes, additions, and subtractions are shown in different colors.

As soon as you make a commit, you can open a pull request and start a discussion, even before the code is finished.

By using GitHub's @mention feature in your pull request message, you can ask for feedback from specific people or teams, whether they're down the hall or 10 time zones away.

You can even open pull requests in your own repository and merge them yourself. It's a great way to learn the GitHub flow before working on larger projects.

1. Click the Pull requests tab of your hello-world repository.

2. Click New pull request

3. In the Example Comparisons box, select the branch you made, readme-edits, to compare with main (the original).

4. Look over your changes in the diffs on the Compare page, make sure they're what you want to submit.

   

5. Click Create pull request.

6. Give your pull request a title and write a brief description of your changes. You can include emojis and drag and drop images and gifs.

7. Click Create pull request.

Your collaborators can now review your edits and make suggestions.

Merging your pull request

In this final step, you will merge your readme-edits branch into the main branch.

1. Click Merge pull request to merge the changes into main.
2. Click Confirm merge.
3. Go ahead and delete the branch, since its changes have been incorporated, by clicking Delete branch.

Wrap up

By completing this tutorial, you've learned to create a project and make a pull request on GitHub.

• You can start adding collaborators to your project. who would follow a similar approach, of creating branches, making changes, and merging them into the main branch.

Take a look at your GitHub profile and you'll see your work reflected on your contribution graph.

Checklist

Make sure you completed the following items before you submit the assignment on Canvas:

• Create a repository on GitHub
• Create a branch on GitHub
• Make changes to the branch
• Open a pull request on GitHub
• Merge your pull request

What to submit on Canvas

A link to your Public remote repository (if I can't access it I can't grade it)