CSE 121B: JavaScript Language

Setup: GitHub Pages

Overview

In this course, you will be publishing to GitHub for assessment. Your public GitHub space is rendered through a free service named GitHub Pages. Your peers, graders, and the instructor will then be able to access your site for collaboration and feedback. You have already established a GitHub account and installed git technology so that you can commit and push/upload your work to your cse121b GitHub repository.

"GitHub Pages is a static site hosting service designed to host your personal, organization, or project pages directly from a GitHub repository" - docs.github.com

Instructions

Create a Local Repository Folder and Add a Basic HTML Home Page

  1. Add a new folder on your computer in your desired location named "cse121b" (lower case, no spaces).
  2. In Visual Studio Code, open that new cse121b folder using File -> Open Folder.
  3. Create a new file in that cse121b folder named test.html.
  4. With the test.html file open in VS Code, type the snippet html:5 into the editor and click enter or tab to automatically generate a basic HTML5 document structure. 
    5. html:5
    The automatically generated HTML markup should look something like this: 
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>Document</title>
</head>
<body>

</body>
</html>
  5. Change the <title> element text content from "Document" to "Your Full Name | CSE 121B | BYU-Idaho"
  6. Add that same text content in the title element to a first level heading element <h1> within the body opening and closing tags.
    Note that you can just type h1 and then click tab.
    The opening and closing element will be created automatically.
  7. Next, add your general location, e.g., Bahia Blanca, Argentina, as a second level heading element <h2>.
  8. Now, add a horizontal rule void (no closing tag necessary) element <hr>.
  9. Save the file.
  10. Right mouse click on the file name in the Explorer panel within VS Code. Select Open with Live Server. This will automatically open your default browser with a localhost rendering of the page.
    If you do not see this option in the context-specific menu that appears, then you need to revisit the setup instructions for adding the Live Server extension in VS Code.
Check Your Work 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>Antiona Francesca | CSE 121B | BYU-Idaho</title>
</head>
<body>
  <h1>Antiona Francesca | CSE 121B | BYU-Idaho</h1>
  <h2>Bahia Blanca, Argentina</h2>
  <hr>
</body>
</html>
Example screenshot of basic page rendering.
Example screenshot of basic page rendering in the browser.

Publish the cse121b folder to GitHub

  1. In VS Code, open your cse121b folder if it is not already open.
    The system may prompt you to trust the file source. Click Trust to continue.
  2. Select the Source Control icon in VS Code's Activity Bar.
    By default, the Activity Bar is found on the left-hand side of the screen and will have up to five icons. If the Activity Bar is not visible, click View -> Appearance -> Activity Bar to turn it visible.
    Source Control Icon in VS Code
    Figure 1: Source Control Icon in VS Code's Activity Bar
  3. Click the blue button that says Publish to GitHub. If you don't see this button, make sure you have all other git repo folders closed.
    Source Control Icon in VS Code
    Figure 2: Publish to GitHub Button in the Source Control panel
  4. Click Allow if you get a message saying "The extension 'GitHub' wants to sign in using GitHub."
  5. If you are prompted for an authorization for Visual Studio Code to Access GitHub, click Continue.
  6. If you are asked to allow the page to open "Visual Studio Code", click Allow.
  7. You may also be asked to allow an extension to open this URI, click Open.
  8. VSCode will choose the folder you have open, the cse121b folder as the the repository and give you the option to "Publish to GitHub public repository". Choose the one that says "public", not private. This will make a new public repository in our GitHub account.
    Publish to GitHub public repository
    Figure 3: Publish to GitHub public repository
  9. It will show a list of the files in the cse121b folder. They will be selected by default so just click OK to include the files in the new repository.
  10. You may get a prompt to "Authorize Git Credential Manager" here. Click Authorize.
  11. If you get a message asking if you'd like to periodically run fetch you can say "Yes", but it is not necessary.
    If you look at your GitHub account on github.com, a new repository named cse121b will be there along with any files or folders that were in your local cse121b folder. This local folder is now a repository and is connected to the remote repository on GitHub. This means that it will be tracked for additions, deletions, and changes.
Demonstration: 🎦 Setting up VSCode to push to a GitHub repository.
This example shows WDD 130 as the repository name, however, that does not matter as the principles and procedures are the same.

Enable GitHub Pages

  1. Login to your GitHub account if needed.
  2. Open your cse121b repository.
  3. Click ⚙️ Settings in the repository menu.
  4. Click Pages in the submenu that appears on the left of the settings panel.
  5. Under the Build and deployment section of GitHub Pages, select the main branch. Leave the next pull down menu with the default value of 📁 / root.
    IF your branch is named master instead of main, that is OK. Select that branch named master.
  6. In the top section, a message should display something like "Your site is live at https://your-github-usernameyour-.githu-b.io/cse121b".

Submission

  1. After you have completed the work, return to Canvas to submit your GitHub Pages URL which will have the following format: 
    https://your-github-username.github.io/cse121b/test.html
  2. Test your submission by running the Audit tool.
  3. If there are issues, fix the issues and republish (upload) your page.
    You do NOT need to resubmit the assignment in Canvas unless you need to correct the URL to match the given structure.