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.
"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
- 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.
- 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.
- 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.
- Click Allow if you get a message saying "The extension 'GitHub' wants to sign in using GitHub."
- If you are prompted for an authorization for Visual Studio Code to Access GitHub, click Continue.
- If you are asked to allow the page to open "Visual Studio Code", click Allow.
- You may also be asked to allow an extension to open this URI, click Open.
- VSCode will choose the folder you have open, the wdd130 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.
⚠️ Private repositories are not allowed for course work.
- It will show a list of the files in the wdd130 folder. They will be selected by default so just click OK to include the files in the new repository.
- You may get a prompt to "Authorize Git Credential Manager" here. Click Authorize.
- 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 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.
⚠️ If you have any issues with the publication process, please reach out to your instructor for help
immediately. This is a critical step in the course as your wdd130
repository is
used for assessment.
Demonstration: 🎦 Setting up VSCode to push to a GitHub repository
Enable GitHub Pages
- Login to your GitHub account if needed.
- Open your wdd130 repository.
- Click ⚙️ Settings in the repository menu.
- Click Pages in the submenu that appears on the right of the settings panel.
- 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 namedmaster
instead ofmain
, that is OK. - 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.
This publication process and any time you publish to your GitHub Pages enabled repository, the updates will take a few minutes to be rendered and live for viewing so be patient.
- Note and bookmark the URL link above for quick access in your browser.
- 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.
- Test the content of your page using this Page Evaluation tool.
- Share your GitHub Pages wdd130 URL with a family member or friend.
- Remember to Bookmark or Favorite your GitHub Pages enabled wdd130 URL.
Submission
- 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/
Optional Resources
- Getting Started with GitHub Pages - GitHub Documentation