GitHub Instructions

Table of Contents
Create an Account ........................................................................................................................... 2
Create a Repository (Repo) ............................................................................................................. 4
Adding a Collaborator ..................................................................................................................... 6
Clone a Repo ................................................................................................................................. 10
Commit Files to a Repo ................................................................................................................. 14
Create an Account
If you have not done so already, go to GitHub and set up an account. You will be asked to create
a Username, add your email address, and create a password. When finished, click Verify.

When you click Verify, a puzzle will appear and you will be asked to solve it. It will likely be
different from the puzzle in this example. After you answer the question correctly, you will be
able to click on the Create account button.
You will be taken to a page to enter a launch code that was sent to the email address you
provided. Enter the code on this screen.

After correctly entering the code, you will be taken to your GitHub main account page.
Create a Repository (Repo)
A repository (or “repo”) is where code related to an application is stored. To create a new repo,
look for the small + button in the top-right corner of the screen and click on it. Select New
repository from the drop-down list.

The Create a new repository screen will display. You will be prompted to enter a repository
name. You may choose to create a single repository for the course and separate applications in
folders within the repo; however, the typical use is to have a repo per application, so that’s the
recommended approach. In this example, the repository name is “Create Repo Example”.
Following are the recommended settings for each application in this course (again, the
recommendation is a repo per web application):
 • Select the Private option.
• Check the README option to initialize the repo with a README file.
• Under add .gitignore, select “Node” – this will set up the default for node applications
to ignore files/folders that you don’t want to commit (like node_modules).
When you are finished, click the button labeled Create repository.

Next, you will see the screen for your newly created repository. From here you can add a
collaborator, upload project files, and update your README. Each of these options is laid out in
its own section.
Adding a Collaborator
For your instructor to view and grade your assignments, you will need to add them as a
collaborator to your repository.
From the home page of your repository, navigate to the Settings tab:

From the sidebar menu, click the Collaborators link to open the Collaborators page:
For security, you will be prompted to confirm your password.
Once you have confirmed your password, you will be taken to the Collaborators page.
Select “Add people” which will open a dialog to search by username, full name or email address.
Enter your instructor’s GitHub username in the box. Once you have typed their name in the box,
you should see their username pop up below the search. Click on the username, then click to
add the individual as a collaborator. Note: Your instructor should have provided their username
in an announcement. If you are unsure of their username, please contact your instructor.
Once you have completed this step, you should see your instructor’s username listed in the
Manage Access section. It will say, “Pending Invite” next to their name until they accept the
invitation.

Clone a Repo
Cloning a repository is the process that connects the repository to your local storage (hard
drive). There are many ways to clone a repo. These instructions explain how to clone a repo
from within VS Code. It is recommended that you create a folder on your local system (or on
OneDrive if using VCastle) to house you cloned repos (for example, 360_Source, which will be
used in this example).
To begin, login to your GitHub account and navigate to the repo you want to clone. Click on the
green “Code” button, then copy the link to the clipboard:
Open VS code (no folder selection is necessary) and click on the “Source Control” icon in the left
navigation ribbon:

Click on the Clone Repository button, paste the copied repo clone URL into the space provided,
and click on the Clone from URL item.
In the Choose a folder to clone into dialog, select the folder that you want to store your repos
in, then click the Select as Repository Destination button:

A message will display indicating the repo is cloning and a dialog should appear asking you to
login to GitHub:
If you click “Sign in with your browser” it will open a browser window to Authorize the Git
Credential Manager:

Select “Authorize git-ecosystem” (since you’re already logged in you shouldn’t need to re-enter
your credentials). This will bring up a dialog in VS Code asking if you want to open the cloned
repo. Open the repo to create or work with existing code.
Your repo is now cloned and ready to work with – congratulations…you’re connected to GitHub
source control!

Commit Files to a Repo

Committing files to a repo is the process of pushing changes (files that have been added,
deleted, or modified) from your local system to source control (e.g. GitHub). Some people wait
until all their changes are complete to make a commit. Some commit daily, some commit after
they make a significant change that works. How often you commit is up to you, but some things
to remember:

• Commits are free.

• Committing code is like taking a backup – you’ll have your code locally and in GitHub just
in case something bad happens.
If there are changes, the Source Control icon will indicate the number of changes locally that
have not been committed to source control. To commit your changes, click the Source Control
icon:

In the example image above, there are 3 changes:

• README.md – this file was modified (changed), indicated by the “M”.

• a_code_file.js – this file was created, indicated by the “U” (which stands for “Untracked”,
indicating the file does not currently exist in GitHub).
 • another_code_file.html – this file was also created.
To commit the changes, click the down arrow next to Commit and click Commit & Push.

This may bring up a dialog stating there are no staged changes to commit. Select Yes or Always
(if you want changes staged automatically):

If it is your first commit, you may get a dialog stating that you need to configure your user.name
and user.email in git. Click Open Git Log. Note that the changes have also been moved from
“Changes” to “Staged Changes”.
This will open a Git terminal in VS Code in the output tab. There are instructions in the output
that indicate how to configure your name and email:
Click on TERMINAL and configure your name and email using the instructions above:

Click Commit & Push. This will open a COMMIT_EDITMSG editor window. Enter a commit
message and click the check mark on the right end of the editor window tabs.

When complete, the Source Control pane will show there are no changes.
You can confirm the changes have been committed to GitHub by looking at your repo in GitHub: