Lessons > Tutorial 2. Getting Started with GitHub

Due on Fri, 04/08 @ 11:59PM. 2.5 Points.

Tutorial Overview.

In this week’s tutorial, you will be publishing the web page you made in tutorial01 to GitHub. To do this, please complete the following:

1. Complete the Background Readings
2. Install git
3. Register for GitHub
4. Configure the Git / Visual Studio Code Plugin
5. Configure Git Pages

1. Background Readings

Please complete the LinkedIn Learning GitHub tutorial before the tutorial. In order to access the LinkedIn content, please sign in with your NU account.

2. Install Git

In order to interact with GitHub, you need to install git. Before you install it, check and make sure it’s not already installed by:

1. Opening your Terminal (Mac) or Command Prompt (Windows) and typing the word git at the command prompt.
2. If you get a message that says “not recognized” or something along those lines, then you need to install it: https://git-scm.com/book/en/v2/Getting-Started-Installing-Git

3. Register for an account on GitHub

If you don’t already have a GitHub account, register for one: https://github.com/join.

You may also need to create a “Personal Access Token”. The process is described here.

4. Configure the Git / Visual Studio Code Plugin

Please ensure that your cs130 folder looks like this:

cs130
├── lectures
│   └── lecture02
│       ├── images
│       ├── index.html
│       └── styles.css
└── tutorials
    └── tutorial01
        ├── images
        ├── index.html
        ├── music.html
        ├── style.css
        └── videos.html

It’s OK if your lectures folder isn’t set up yet, but make sure your tutorials folder looks like the one shown above. This is very important. As your peer mentor to verify that your folder nesting is correct (tutorial01 should be contained within tutorials which should contained within cs130).

Next, open your entire cs130 folder in VS Code. Your file list should look like this (click on the icon that looks like two pieces of paper in the upper left-hand corner of your screen):

Next, click on the icon that looks like a tree branch, and click the blue button that says “Initialize Repository”:

You have now created a git repository on your computer in the same folder as your cs130 folder. Now, you will want to “stage” all of your changes. Click the button with the three dots, then select “Changes”, and then “Stage All changes”:

After you “stage” your changes, you will note that the left-hand panel has changed. Specifically:

• The panel lists all of the files that are “staged” to be committed, with an “A” next to each file (indicating that you are adding the files for the first time).
• To commit these changes, type a message in the text box that says “My First Commit” and then click the check button to actually issue the commit:

Afterwards, a button will appear that says “Publish Branch.” Click this button. It may prompt you to install a GitHub plugin. Please agree that you are OK to install the GitHub plugin.

You will now create a new GitHub repository called cs130-coursework. Please ensure that you create a PUBLIC repository:

After VS code issues the “create repository” request to GitHub, it will give you a message indicating that your files are being sent up to GitHub. When the file transfer is complete, you will see a blue button that says “Open On GitHub”. Click that button.

Clicking the button will open your newly created cs130-coursework repository and show you all of your files (which are now in the cloud):

5. Finally, Configure GitHub Pages

GitHub also allows you to host pages. To enable GitHub pages:

1. Go to your repository and click on the settings tab.
2. Click the “GitHub Pages” link in the left-hand menu
3. Click the dropdown menu that asks you to select a branch.
4. Select the “master” branch
5. Click “Save”

This will generate a link to your GitHub site.

Note:

• It make take a few minutes for your webpage to display
• In order to preview the webpage you made in tutorial01, you have to append the /tutorials/tutorial01/index.html file path to the end of your github pages to indicate which file to display.

What to turn in

Just paste in your links to Canvas:

1. A link to your GitHub repository
   • Sarah’s link is here: https://github.com/vanwars/cs130-coursework. You will replace “vanwars” with your GitHub username.
2. A link to your GitHub Pages that displays your tutorial01 page.
   • Sarah’s link is here: https://vanwars.github.io/cs130-coursework/tutorials/tutorial01/index.html. You will replace “vanwars” with your GitHub username.