WDD 130: Web Fundamentals

Enabling GitHub Pages

Overview

In this course, you will be publishing your work to your own website which is freely served through 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 GitHub repository. We will be doing that inside of VS Code.

"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

Publish the wdd130 folder to GitHub

  1. In VS Code, open your wdd130 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 to visible.
    Source Control Icon in VS Code
    Source Control Icon in VS Code's Activity Bar
  3. Click the blue button that says Publish to GitHub.
    Source Control Icon in VS Code
    Publish to GitHub Button in the Source Control panel
    • Click Allow if you get a message saying something about allowing the system to use GitHub.
    • Click Continue if you are prompted for an authorization for Visual Studio Code to Access GitHub.
    • Click Allow if you are asked to allow the page to open Visual Studio Code.
    • Click Open if you are asked to allow an extension to open this URL.
  4. A popup dialog box will appear at the top of VS Code.
    Select "Publish to GitHub public repository".
    Make sure to choose the public option.
    Publish to GitHub public repository
    Publish to GitHub PUBLIC repository
  5. A new popup dialog box will appear at the top of VS Code showing a list of the current folders and files in the wdd130 folder. These folders and files will be selected by default so click OK to include the files.
    Select the existing folders and files
    Click OK to include all the existing folders and files
  6. A new repository named wdd130 will be added to your GitHub account.

    Private repositories are not allowed for course work.
    If you make a mistake and forget to select public, do not worry, you can change the repository's visibility later in Github by going to the repository's Settings and using Change visibility.

  7. You may get a prompt to "Authorize Git Credential Manager". Click Authorize.
  8. If you get a message asking if you'd like to periodically run fetch you can say "Yes".
  9. If you look at your GitHub account on github.com, a new repository named wdd130 will be there along with any files or folders that were in your local wdd130 folder.

    🎉Your local wdd130 folder is now connected to a remote wdd130 repository on your GitHub account.

Video Demonstration: ▶️ Publish the wdd130 repository folder to GitHub

If you have any issues with the publication process, please reach out to your instructor for help immediately. Publishing your wdd130 folder to GitHub is a critical step in the course as your wdd130 repository is used for tracking your progress and for grading each week.

IF you need to, it is OK to delete a repository on GitHub and start over.
The Delete Repository option is found in the GitHub repository's Settings menu.

Video Demonstration: ▶️ Delete a GitHub Repository

Enable GitHub Pages

The free GitHub Pages service allows your web to be rendered in a browser as shown in the image below.

  1. Login to your GitHub account if needed.
  2. Open your wdd130 repository.
  3. Click ⚙️ Settings in the repository menu.
  4. Click Pages in the submenu that appears on the right of the settings panel.
  5. Under the Build and deployment section of GitHub Pages, in the Branch section,
    1. select the main branch under the dropdown menu that says None.
    2. do not change the next dropdown menu with the default value of 📁 / root
    3. click Save
    GitHub Pages select main branch
    Select the main branch in GitHub Pages setup

    If your branch is named master instead of main, that is OK.

  6. 🎉 Your wdd130 repository is now published and enabled with GitHub Pages.
    The URL for your course home page is https://yourgithubusername.github.io/wdd130 where yourgithubusername is your own GitHub account name.

    The URL above, using your GitHub account name, is your course home page and is the URL that you will submit for this Week 01 assignment.

  7. In your browser, navigate to your home page (https://yourgithubaccountname.github.io/wdd130) and bookmark/favorite it in your browser for easy access.

    Any time you publish to GitHub, the updates will take a few minutes to render before the pages are available for viewing.

    Example Student Course Home Page
    Example Student Course Home Page Rendered in the Browser
  8. Self audit your page using this Week 01 Assignment: Student Home Page ✔ Page Evaluation tool.
  9. Share your GitHub Pages wdd130 URL with a family member, friend, or on Microsoft Teams with the class.

Video Demonstration: ▶️ Enable GitHub Pages [ 2:01 minutes ]

Submission

  1. After you have completed the work, return to Canvas to submit your GitHub Pages URL which will have the following format: 
    https://yourgithubusername.github.io/wdd130/
  2. If you need to make a change to your page, you will have to commit and sync the changes to your wdd130 GitHub Pages enabled repository. What you are doing is uploading your work to your remote GitHub repository server.

    Video Demonstration: ▶️ Commit and Sync Changes to GitHub [ 2:01 minutes ]

Optional Resources