Skip to content
Critical Web Design Wiki

1.3 Using Github

Overview
Setup a new repo and enable Github Pages to publish your site on the web.

Using Github Codespaces

Section titled “Using Github Codespaces”

Videos from this chapter.

How to set up a new repo on Github.

Enable Github Pages so you can see your work live in the web browser. Remember to view your work at the URL including github.io and view your code in your repo at the URL including github.com.

Edit HTML in GitHub’s Codespaces and preview your work with the live server extension.

After editing your files, you will need to stage and commit them so your changes are saved on your GitHub repository. This video shows you how to use the Source Control tool to stage and commit your edits.

Use Live Server in Codespaces

Section titled “Use Live Server in Codespaces”
Excerpt Exercise 1.3.1
Install a Live Server extension in Codespaces to preview and refresh your changes in the browser automatically.

Github Codespaces, like github.dev or vscode.dev lets you edit your project in a web browser. But Codespaces lets you see changes immediately thanks to a virtual host it runs in the background. Create a new Codespace and install Live Server…

  1. Go to https://github.com/codespaces
  2. Click New codespace
  3. On the page that opens, Select a Repository from the dropdown.
  4. Leave Branch, Region, and Machine type and click Create codespace
  5. A new window will open with a VS Code-like editor. It looks like github.dev but thanks to a virtual machine running in the background you can install extensions and preview your work.
  6. Select the Extension button (on the left) and search for Live Server. We installed this one with 60 million installs
  7. Click Install and Trust Publisher
  8. Back on the Explorer tab, right click on a file you want to preview and choose Open with Live Server to open a preview page in a new tab.

Use Live Server with VS Code

Section titled “Use Live Server with VS Code”
New Material
Install a Live Server extension in VS Code to preview and refresh your changes in the browser automatically.

When you view code stored on your computer with a browser it accesses your page using a file:/// url. This is fine for basic websites, but presents issues when you want to do local accessibility testing with a browser extension or use data in your project (see CORS in Chapter 9). Alternately, it is time consuming to push each potential fix to Github Pages and wait to retest.

  1. In VS Code, go to View > Extensions
  2. Search for “Live Server” (we like one by Ritwick Dey, but they all generally offer the same functionality) and then click Install.
  3. Right click on any HTML page and choose Open with Live Server. This will open your file using a temporary local server using a localhost address (127.0.0.1 is the address that a computer uses to communicate with itself).
  4. As you edit and save your file the server will detect changes and automatically refresh your page!

Github Pages Domain Names

Section titled “Github Pages Domain Names”

You have three options to customize your Github Pages domain name:

  1. When you publish a GH Pages site from a regular repository, the domain name looks like the below. Change your repository name to update the URL.
https://USERNAME.github.io/REPOSITORYNAME
  1. You can make what is referred to as a “Github username site” by naming your repository USERNAME.github.io. Here is an example, https://omundy.github.io - This will make your site accessible at:
https://USERNAME.github.io
  1. Finally, you can purchase a custom domain name (from a service like Dreamhost†) and point it at GH Pages. This allows you to choose any available web domain. For example https://getbootstrap.com is a custom domain, but the site is hosted on Github Pages:
https://getbootstrap.com

†Referral links let us know what services readers are selecting.