WDD 230: Web Frontend Development I

GitHub Pages Repository Setup

Overview

The GitHub cloud service platform is much more than what we will be using it for in this class as a host to published web content. It is required that you have a GitHub account and create a GitHub Pages enabled repository named "wdd230".

"GitHub is an Internet hosting service for software development and version control using Git. It provides the distributed version control of Git plus access control, bug tracking, software feature requests, task management, continuous integration, and wikis for every project." - Wikipedia

Prepare

You do NOT need to create a new GitHub account if you already have one established from previous projects or courses. All you will be doing in this activity is to create a new repository named wdd230 and enable it to serve up web pages using GitHub Pages. This repository will need to be cloned locally on your computer from which folder you will develop your wdd230 work and publish throughout the course.

Activity Instructions

  1. On your computer, check that you have a current version of git installed. In the command line interface, type
    git --version
  2. If you do not have git installed, go to Git-Installing Git and follow the directions for your operating system.
  3. Set your git global username and email in the command line if needed. You may be prompted for this later on when you attempt to complete your first pull or push to GitHub. You can check the status of your configuration at any time.
    git config --global user.name "[enter a username between the quotes - your GitHub username works but is not required]"
    git config --global user.email "[your email address should match one in your GitHub settings]"
    Check your git configuration by entering:
    git config --list
  4. Set the configuration file to NOT ignore case changes in file and folder names.
    git config --global core.ignorecase false
    Nothing will happen if you did it right. If you get an error, you need to fix it.
  5. Enable GitHub Pages on the wdd230 repository that you have added for this class.
    Go to Settings in the wdd230 repository and click on the Pages vertical menu item. On the Pages page, find the Build and deployment section and make sure the Source is set to Deploy from a branch and that the Branch source is selected (main or master) and then click the Save button.
    Note that will not be able to select a branch until you have published at least one file into that repository.
    The document should then reload and provide an affirmation that GitHub Pages was enabled branch. The web address is https://yourgithubusername.github.io/wdd230 where the site will be live.

    🎦 Demonstration of GitHub Pages Setup - WDD 130 Example

  6. Now, you can clone this wdd230 repo in VS Code directly and manage your deployment from the Source Control or build a local folder, initialize it as a git repository, and set its origin to point to your GitHub Pages repository named wdd230. Here are some examples:

    🎦 Demonstration using the Command Line Interface (CLI) - Setting up local repository and GitHub Pages enabled repository.

    🎦 Demonstration using VS Code - To manage the cloning of the GitHub Pages repo to a local repository.

  7. Create a new HTML document in you wdd230 GitHub Pages enabled repository.
  8. Commit and push changes to GitHub Pages.
  9. Test the page by navigating to that document address using your GitHub Pages URL, for example, https://yourgithubusername.github.io/wdd230/filename.html to ensure it is served to a browser.