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.

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.

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.

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

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/).

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.