PUBLISHING A WEBSITE WITH GITHUB PAGES & GITHUB DESKTOP

COMP 126: Practical Web Design & Development for Everyone

link to video walkthrough: https://share.vidyard.com/watch/87AosNsmhCUAD7faErPVwV?

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

Move on to follow these instructions or these instructions.

Otherwise, follow along with the instructions on the upcoming slides.

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. Back to github.com: create a "repository" (the online space that will house your website files on github.com)

  1. Click Create Repository, or navigate to Your Repositories in upper right-hand menu and click New.
  2. Enter a name for your new repository in the following format: yourgithubusername.github.io. You must name your first gh-pages site this way to make it work as a website! (After this, you can name additional sites anything you like, but no numbers and no spaces!)
  3. Click "Create".

4. Link your new repository to the Github Desktop app

  1. In your new repo page, click Set Up in Desktop.
  2. Desktop app will launch and prompt you to clone the repo into the app; click Clone.
  3. A folder called Github will appear somewhere on your computer, with a folder with your repository name inside it.
  4. Locate that folder and move on to the next slide.

5a. publish your website

  1. Review your project's directory/file structure.
    1. Make sure your home page is called index.html (all lower case) and is on the top level of the directory (not nested within a subfolder).
    2. Make sure there are no spaces in any file or folder names. This actually matters a lot.
  2. Open the Github folder that was auto-created on your computer. You should find a directory with the name of the repository you just created.
  3. Go back to and open your project's directory. Move the files inside it (or copies of the files inside it) into the directory with the name of the repo you just created. DO NOT include the top-level directory/folder.
  4. Check for the files to appear under Changes on GitHub Desktop.

5b. Publish your website

  1. Enter a note ("first commit" is good), then click Commit to Master.
  2. Click Publish (upper right-hand side of Desktop app).
  3. Check your repo on github.com for the changes.
  4. Back to your repo on github.com. Click Settings.
  5. In the left-hand Settings menu, click Pages.
  6. In the dropdown menu under the heading Source, select
    "main" and click Save.
  7. You should see a message that says "Your site is ready to be published at yourusername.github.io" or "Your site is published at yourusername.github.io". If the former, wait till it changes to the latter (be patient, this may take a minute). If the latter, that is your URL, and your site is live there.
  8. To edit the site, simply open your project from your Github folder, make your changes, return to Github Desktop, and commit and publish your changes as described above. (Note that changes may take some time to update to the live site.)