WDD 130: Web Fundamentals

Setup: 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.

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 visible.

   

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.

   

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. Visual Studio Code will choose the folder you have open, the wdd130 folder, as 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.

   Private repositories are not allowed for course work.

   

9. It will show a list of the files in the wdd130 folder. They will be selected by default so click OK to include the files in the new repository.
10. You may get a prompt to "Authorize Git Credential Manager". Click Authorize.
11. If you get a message asking if you'd like to periodically run fetch you can say "Yes".

    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. This local folder is now connected to the remote repository on GitHub and is a repository itself.

Enable GitHub Pages

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, 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.
6. In the top section, a message should display something like "Your site is live at https://yourgithubusername.github.io/wdd130". This is your course home page URL and this URL domain will be part of every submission you make in the course.

   Any time you publish to your GitHub Pages enabled wdd130 repository, the updates will take a few minutes before the pages are available for viewing.

7. Note and bookmark the URL link above for quick access in your browser.
8. That is all that needs to be done to enable GitHub Pages site publishing. After a few minutes, test the URL. Your course home page should open, rendered in the browser.

   

9. Test the content of your page using the ✔ Page Evaluation tool.
10. Share your GitHub Pages wdd130 URL with a family member or friend.
11. Remember to Bookmark or Favorite your GitHub Pages enabled wdd130 URL.

Submission

1. After you have completed the work, return to I-Learn to submit your GitHub Pages URL which will have the following format:

   https://yourgithubusername.github.io/wdd130/