Editing A File On The GitHub server

Goal: In this exercise you will familiarize yourself with the features of the GitHub web application (web site), so that you can do some simple things entirely online (without having to make a copy on your local machine).

WARNING: You must do this exericse BEFORE doing the exercise about working with a git repo locally.
In this exercise you make a change to your copy of a project online.  In the next exercises you will download your copy and continue to modify it.

You must do this exercise first so that the changes you make (after doing the exercise for this topic) will be downloaded in the next exercise.


In this tutorial you will log into GitHub, make a copy of the starter project, make sure that you can find your project again, and edit a file within your copy of the starter project. All of this will be done online.

WARNING: The images in this tutorial may not exactly match what you see
The images used in this tutorial may (or may not) look exactly like what you're seeing on our 'live' server.  The version of GitHub may change causing the appearance of the web page to change, the name of the project your'e working with may be different than one pictured below, etc, etc. 
You're expected to try and make progress even if the pictures aren't identical (just like you'll be expected to first try and fix your own problem when working in industry).  As always, if you get stuck please seek help from the instructor.

(If the images below are wildly different from what you're seeing please contact the instructor - it may be that something big has changed since this tutorial was created)
 Your project on the GitLab server
Roadmap for these tutorials

Logging in, first impressions

The instructor will create an account for you on the GitHub server.  When the instructor creates the account GitHub itself will send you an email with a link to the server (at which point you should see the below page).  Please make sure to check your Junk Mail folder (and any other folders designed to filter away mass emails).  The instructor used the same email address that you gave to Cascadia (the one that you can change in the Student Toolbox on Cascadia's site)

If you can't find the email: visit the GitHub server's web page, and click on the link that says "Didn't receive a confirmation email? Request a new one. ".  In the picture below there's a large number 3 next to an arrow that's pointing to this link.  The URL for the server is listed on the main lesson page (so that the instructor can easily update a single, easy-to-notice location)

WARNING: Use our private GitHub server, NOT GitHub.com!
The instructor has set up a private GitHub server for use by this class. This server is completely separate from the GitHub.com web.  GitHub.com is the website for the people that make the open-source GitHub software.  Our private GitHub server uses that software to privately allow y'all to download and upload your homeworks for just this course.

Once you've reached the login page you need to type your username into the top textbox (the one with the large '1' pointing to it - in the image below it contains the word Testy_McTest), and then type your password into the second textbox (the one with the large '2' pointing to it - in the image below it contains a bunch of dots).   Lastly, click the 'Sign In' button.

If this is your first time logging in then you can click on the link labeled "Forgot your password?" - it will send an email to you, and from there you can pick a password.  (You can also use this link if you forget your password).  If you never got the confirmation email at all you can click on the link labeled "Request A New One" under the '3'

Login page

Once you've logged in you should see something like the following:

GitLab main page

You should see your username listed next to the '1' (in the above picture this is 'Testy_McTest').

In the area pointed to by the '2' you should see one or more projects listed.  Each project has a name similar to: Administrator / bit142_assign_1 .   These are all 'starter projects' for your homework assignments.  In order to do your homework you will download a project, modify it, and then upload your work back to GitHub.

The word 'Adminstrator' in  Administrator / bit142_assign_1 refers to the account that created this project.  Since the instructor created this project it lists the name 'Administrator' first.

The word 'bit142_assign_1' in  Administrator / bit142_assign_1 refers to the homework project itself.  The instructor chose the name 'assign_1' for the assignment, and then put the class name ('bit142') in front to help make it easier to track which assignment was being used by which course.

If this is your first time visiting the web site then it would be a good idea to explore on your own for a bit.  Try following the links in the left-hand column and see what each one leads to, etc.


 Your project on the GitLab server
Roadmap for these tutorials

Fork a repo on GitHub

Once you've logged into our private GitHub server and looked around, the next step will be to make a copy (a 'fork') of the starter project for yourself on the GitHub server. 

Vocabulary: repo
When working with git (not just GitHub, but the more general git tool), 'repo' is short for 'repository'.  In this course the words 'repository', 'repo', and 'project' all mean more-or-less the same thing.

Let's start this by clicking on the name of the project that we want to copy.  In the above picture this is Administrator / bit142_assign_1  (pointed at by the '2').  After you've done that you should see something like the following:


starter project page

If you want to get back to the previous page click on the word 'GitHub' in the top-left corner (next to '1' in the above picture).

Notice that the left-hand column (the box pointed to by arrow '2' in the above picture) has changed.  It now shows you links that relate to this specific project.  If you wanted to see all the files in this project you could click on the 'Files' link and it'll bring you to another page listing the files.  It's a good idea to explore these links, just to get a feel for what's in there.  Don't worry if the stuff you find doesn't make sense - just look around and see what does make sense, and remember anything that looks useful to you.

In order to make your own copy of this starter project you need to click on the button labeled 'Fork' (next to the '3').

The next page you'll see is:

page to fork the project

Click on your name (in the above image, the user's name is "Testy McTest", right underneath the green circle icon).  After a moment or two you will be brought to a page like this one:

newly forked project page

The first thing to notice is that the full name of the next project is your name followed by the project's name.  In the above picture, in the box next to the '1' you can see that the full name is "Testy McTest / bit142_assign_1".

WARNING: 'Forking' the project creates a copy on the server, NOT your local computer
It's important to understand that 'forking' the original starter project will create a copy on the server, and ONLY on the GitHub server.  Later on we'll look at how to create another copy on your local computer.
This means that in order for you to work on the starter project on your own computer you will need to go to the original copy that the instructor uploaded to the Administrator account, make a copy of that (by forking it), and then clone it to your local machine.  This means that each student will see 3 copies of the project: the original, their forked copy on GitHub, and their local copy on their own computer.

Give this some thought now so that it's easier to remember which copy you're working on later.
 Your project on the GitLab server
Roadmap for these tutorials

Finding this project again in the future

Before we go on to the next task let's make sure that you can find the correct project again the next time you log in.  This is important because you now have access to two projects: the original one that the instructor made, and your own personal project that you just forked.

Let's see the list of these projects by clicking on either 'Go to dashboard' or the word 'GitHub' in the above picture (next to the '3').  Either one will take you back to the dashboard, which shows you the list of projects that you have access to.  Your list should look similar to the following:

dashboard after forking

The most important thing to notice is that you now have access to two, similarly named projects:

Go back to your personal project by clicking on the link labeled Testy McTest / bit142_assign_1.

 Your project on the GitLab server
Roadmap for these tutorials

Edit A File

The final step is to edit a file on the server.  In the left hand column (in the above picture) you should click on the link labeled 'Files' (in the picture, '2' points to this link).

You'll then see something that looks like the following:

'Files' list

If you want to view (or edit) a particular file you click on it's name.  In the above picture, if you wanted to edit "File.txt" you can click on it's name (the '1' points at File.txt).

As an aside: if you wanted to create a new file in your project you can click on the plus sign that the '2' points to.  You should then see a page that looks something like this:

Viewing a single file

In order to edit the file you need to click on the button labeled 'Edit', pointed to by the '1' in the above picture. 

Other useful links:

After you click on the 'Edit' button you should see the following:

Edit a file

You can make changes by clicking in the large textarea box pointed to by the '1' arrow.

NOTE: For this exercise please add your changes at the END of the file so it's super-clear what your changes are.

You won't be allowed to store your changes (to 'commit' your changes) until you enter a short message that describes what your change was.  You can do this by typing something into the 'Commit Message' box (pointed to by '2')

Lastly, you can store your changes by clicking on the labeled 'Commit Changes' (pointed to by '3').  In the above picture that button is dimmed because there's no Commit Message (i.e., the box pointed to by the '2' is still empty), but it will become active once you add a commit message. 

After successfully committing (storing) your change you should be brought back to the page which shows you the contents of your file.  You should see the changes that you made in the file.