GitHub

Back

GitHub is a cloud-based Git repository where developers can store and manage their code. Up until this point, we’ve been tracking changes on our local machines using Git. This is a great start, but what if you accidentally spill water all over your machine? All of that progress would be lost… unless you stored a copy of it somewhere else. That’s where GitHub can support our work!

Learning Goals

  • Identify the key information on a GitHub repository
  • Create repositories in GitHub
  • Connect a local repository to a remote repository
  • Push work from a local repository to a remote repository
  • Fork and clone GitHub repositories
  • Describe the difference between forking and cloning a repository

Vocabulary

  • repository
  • local
  • remote
  • push
  • fork
  • clone

Warm-Up

Before we dive into creating GitHub repositories, let’s take a moment to get comfortable looking at the key information provided to us on a GitHub repository. Open up this GitHub repository to identify some key pieces of information.

Screen shot of Leta's GitHub repo

Key Information on a GitHub Repository

Visit this repository and answer the following:

  • What is the name of this project/repository?
  • Who is the user that created and owns this repository?
  • How many commits are on this repo?
  • When was the last commit made?
  • Find 2 commit messages that do not follow conventions - write them down, and write down a better commit message to replace each.
  • How many times has this repository been forked?


Connecting a Local and Remote Repository

There are many ways to create and connect local (on your machine) and remote (in the cloud) repositories. We can’t go through every combination of ways to do that, so we will focus on one. Once you are comfortable with this way, if you find another way to achieve the same outcome, you can absolutely use that.

  1. Create a directory called github_practice and add a file in that directory with the title of your program: ruby.md or javascript.md.
  2. Initialize a Git repository in your github_practice repository.
  3. Add your file and commit your work.
  4. Create a GitHub repository (do NOT check the box to create a README).
  5. Before completing the next steps, make sure that you have the SSH button selected at the top. Then, follow the directions under ...or push an existing repository from the command line, by running the following commands:
    • git remote add origin git@github.com:USERNAME/REPO_NAME.git This command tells the local repository to set the remote repository to this address. We refer to it as the origin.
    • git branch -M main You do not need to do this if you have already configured Git to name the default branch main.
    • git push -u origin main This sends the current version of the project up to the remote repository, and sets the main branch as the default branch to send work up to.
  6. Refresh your GitHub browser tab. You should now see your repository!


What follows is a diagram that breaks down the anatomy of the git push -u origin main command: Anatomy of git push -u origin main command

Practice

Follow the steps listed above to connect a local Git repository with a GitHub repository.


Git & GitHub Workflow

Now that we have our local repository connected to a remote repository, we can see our files along with any commits that we’ve made on GitHub. This means we can continue to work on our local machine, adding and committing our work as necessary. Then, when we push to GitHub, a record of those new changes will also be added to our remote repository! After making 1 or more commits on a local repository, we can push our work up using the following command:

git push origin main

Since we used the -u in our original push to connect the two repos, we already established main as the upstream branch. This means we can use the following command to get the exact same outcome:

git push

After running this command, Git will send your work up to GitHub (you must be connected to the internet), and you’ll get many lines of output, finally telling you the work was successfully sent up. Refresh your GitHub browser tab, and the changes will be available there. Pushing work up to a repository is the act of using Git commands to send the current version of a local repository up to the remote repository.

For the extent of our work with Git and GitHub workflows during Mod 0, you will primarily be pushing work up. It is definitely possible to also pull down changes from a remote repository to your local repository, but you will only need to do this if you make changes in the remote repository by mistake. Please remember to always make edits to files on your local machine and then push them up! This will avoid any merge conflicts.

Altogether, the process of connecting a local repository to our remote repository and then using GitHub to store those changes looks something like this:

  1. Create a local directory with files.
  2. Initialize a Git repository. Then, add and commit your work.
  3. Connect your local repository to a remote repository on GitHub.
  4. Make changes to your files. Add and commit your work.
  5. Push those changes to GitHub. Refresh the browser to see those changes appear.
  6. Make some more changes to your local files. Add and commit your work.
  7. Push the new changes to GitHub.


Breakout Practice

In your previous repository, make two rounds of changes in the file you created, adding and committing those changes each time. When you're finished, push those changes to GitHub.

Note: All of these changes should be made in VS Code, not directly in GitHub!


Common Issues

Occasionally, the command to push work up will not be successful. When this happens, don’t panic. Carefully read the message and see if you can figure out what the problem might be. Take a look at this message below and make a guess about what the problem might be.

Permission denied error message

The error message describes the issue clearly. This user does not have access to this GitHub repository. This can happen if you forget to fork a repository before cloning it to your local machine. The good news is that you can remove a connection and reconnect to another remote repository on your account!

  1. Check your current git remote origin connection using git remote -v.
  2. If you are connected to a remote origin that you do not have access to, remove your connection using git remote remove origin.
  3. Check that the git remote origin was removed using git remote -v. If you don’t get anything in response, you know you aren’t connected to a remote repository!
  4. Then you can create a new empty repository on your GitHub and connect it to that remote repository. Use the command git remote add origin [insert SSH key here] to establish that connection.
  5. Check your remote origin is correct now using git remote -v.
  6. Now that you’re connected to the correct remote repository, you can run those two commands to establish the main branch and push your work: git branch -M main and git push -u origin main.

You can see an example of what that process might look like below.

Using git commands to remove a remote origin and add a new one

Other common issues we’ve seen with students include:

  • Trying to push before adding and committing changes
  • Creating a git repo inside of another git repo
  • Initializing git in your home directory instead of the specific directory where you want to track changes
  • Using HTTPS instead of SSH

All of these issues can be corrected. The important thing is to reach out for help sooner rather than later.

Practice

Complete the following exercise to get practice and demonstrate your ability to use Git and GitHub.

Git & GitHub Workflow

Follow the steps below to practice connecting a local repository to a remote repository.

  • Create a local repository.
  • Create a GitHub repository.
  • Connect the two repositories.
  • Make a few changes and commits.
  • Push up your changes.
  • Make a few more changes and commits.
  • Push up your new changes.
  • View the commit history in the GitHub interface.

When this work time is over, be prepared to screenshare to show your Terminal and/or GitHub and talk through your process, challenges, and questions you have.


Forking and Cloning Repositories

Often, you won’t be creating a project from scratch. What if you want to create a copy of an already-existing GitHub repository and work from that repository? We can fork a GitHub repository to make a copy of it on our own GitHub account. Or what if the company you’re working for already has an application and you need to make changes to it? We can clone a GitHub repository to our local machine, so that we can continue making changes from that already existing repository.

The diagram below visually shows the difference between forking and cloning a repository. In some cases, you may want to both fork and clone a repository. Forking allows you to create your own copy of a remote repository on your GitHub account and then cloning lets you edit and push changes up to your copy of the original repository.

Diagram showing the difference between forking and cloning a repository

Note that a few steps are a little different when you are cloning down a repository. You don’t need to create an empty directory on your local machine when you clone down a repository. You also don’t need to initialize git with git init if you cloned down the repository.

More Practice

Challenge 1: Forking & Cloning

Follow the directions below to fork and clone this pre-existing GitHub repository.

  1. Fork the repository.
  2. Navigate to where you want to clone down the repo on your local machine.
  3. Clone your copy of the repository to your local machine using the command git clone [insert SSH key here].
  4. Open the repo in VS Code.
  5. Answer the questions in the github_notes.md file.
  6. Add and commit your changes.
  7. Push your changes to GitHub and refresh your browser to see those changes reflected in the remote repository.


Challenge 2: Forking & Cloning

Work through this prompt independently.

  • Fork this repository.
  • Navigate to where you want to clone down the repo.
  • Clone your copy to your local machine.
  • Make a few changes and commits.
  • Push up your changes.
  • Make a few more changes and commits.
  • Push up your new changes.
  • View the commit history in the GitHub interface.


Check For Understanding

Follow the steps below to demonstrate your understanding of the Git & GitHub workflow. Record your screen and talk through the steps as you go. Submit your video using your submission form.

  1. Use keyboard shortcuts to move this browser window to the left side of your screen and your terminal in the top right corner.
  2. Fork this repository.
  3. Clone your copy of the repository to your local machine.
  4. Open the repository in VS Code. Use a keyboard shortcut to move VS Code to the bottom right corner of your screen.
  5. Create a new file in that directory called github_cfu.md. Add some notes about all of the git commands you know in that file.
  6. Add and commit your work, then push those changes to GitHub.
  7. Now, show how you would remove the remote origin.
  8. Create a new remote repository in GitHub and connect your local repository to that one.

If you have any questions about GitHub as you’re working through this challenge, drop them in Slack along with any relevant screenshots.







Back