PUBLISHING A WEBSITE WITH GITHUB PAGES & GITHUB DESKTOP

COMP 126: Practical Web Design & Development for Everyone

Already familiar with git/bash/the terminal/the command line?

Do your own thing. Or use these instructions or these instructions and/or watch this video or this one or find another good video or tutorial.

Otherwise, follow along.

(Note: there are lots of ways to do all this. This is just one option that might be easier for beginners to git/GitHub to pick up.)

1. Set up a GitHub account and log in

  1. Create a GitHub account at https://github.com/ (if you don't have one).
  2. Verify your email address.
  3. Return to https://github.com/ and log in.

2. Download, install, and log in to GitHub Desktop

  1. https://desktop.github.com/: download and install.
  2. Move GitHub Desktop to your Applications (Mac) or Programs (Windows) folder.
  3. Launch GitHub Desktop.
  4. GitHub Desktop app -> Preferences -> Accounts -> log in with your GitHub account information.

3. create a "repository" (a space that will house your website files on the github.com cloud)

  1. On GitHub Desktop, click File > New Repository.
  2. Fill in the details:
    • Repository name: For your first website project, use the name <yourgithubusername>.github.io. After this first one, any name is fine, but avoid spaces and numbers.
    • Description: Add a brief description (optional).
    • Local Path: Choose a folder on your computer where the repository will live.
    • Check the box for Initialize repository with a README.
  3. Click Create Repository.

4. Add your website files to the repository

  1. Open the repository folder on your computer (accessible from GitHub Desktop by clicking Repository > Show in Explorer/Finder).
  2. Add your website files (e.g., index.html, style.css, etc.) to the folder. Make sure index.html is at the top level, not inside a subfolder! Depending on your project, you may have to revise some of your paths.
  3. Return to GitHub Desktop:
    • GitHub Desktop will show the newly added files under Changes.
  4. Stage and commit the changes:
    • Write a descriptive commit message like “First commit of website files".
    • Click Commit to Main.

5. publish the repository to github

  1. In GitHub Desktop, click Publish repository (top-right corner).
  2. Ensure the repository is public (required for GitHub Pages).
  3. Click Publish Repository.

6. enable github pages on github.com

  1. Go find the repository you've just created on github.com (upper right-hand corner icon > Your repositories).
  2. Click Settings > Pages (in the left sidebar).
  3. Under Source, select a branch (usually main) and click Save.
  4. Wait. It'll take a minute. Refresh a few times. Eventually...
  5. GitHub will provide a URL for your website (e.g., https://<username>.github.io/).

7. make updates to your website

  1. Make your edits on the copy of the files stored locally on your computer.
  2. Open GitHub Desktop:
    • The updated files will appear under Changes.
  3. Stage and commit the changes:
    • Write a clear commit message (e.g., “Update homepage text”).
    • Click Commit to Main.
  4. Push changes to GitHub:
    • Click Push origin in GitHub Desktop.

  5. GitHub Pages will automatically rebuild the site after changes are pushed. Again, this might take a minute. Just keep refreshing.