GRC 338: Resources

GitHub Pages tutorial (part 1)

Creating an account on GitHub

If you already have an account on GitHub, you skip to setting up GitHub Pages. Otherwise, you must sign up for a GitHub account. It’s free.

  1. Go to github.com

    Github home page.

  2. Choose a username and submit your email. (You don’t need to sign up with your Cal Poly email, and you don’t need to use your Cal Poly’s username either.)

  3. Choose a strong password that you have not used anywhere else.

  4. Click on the big, green button that reads Sign up for GitHub.

    Github home page with a username, a email, and masked password.

Setting up GitHub Pages

If you have used GitHub Pages with this account, you need to use the same repository with the name [yourusername].github.io. In this case, skip to Publishing the first assignment on GitHub Pages

  1. Next to Repositories. click on the green button that reads New to create a new repository.

    A green button that reads “New” next to “Repositories”.

  2. Your new repository will be named: [yourusername].github.io, where you replace [yourusername] with your actual username. (Again, your GitHub username, not your Cal Poly’s username.)

    Owner is grc-ribeiro and a new repository is named “grc-ribeiro.hithub.com”.

  3. Now that you have a repository, you get started by creating a new file.

    Dimmed screen with only the “creating a new file” words being highlighted.

Publishing the first assignment on GitHub Pages

  1. All our assignments will be inside the folder grc338 in your repository. The way you create the new grc338 folder is by typing grc338 in the field that reads Name your file…. But you want to add a forward slash (/) right after that, so GitHub understands it’s a folder.

    “grc338” in the box for the new file name.

  2. Then, you do it again with the last part of the URL in the assignment instruction. For the first assignment, it’s helloworld. Once again, you add a forward slash (/) right after that, so GitHub understands it’s a folder.

    “grc338/” is now a folder, and “helloworld” is in the box for the new file name.

  3. Finally you name your actual file index.html (without the forward slash, because it’s not a folder, it’s a file).

    “grc338/” “helloworld/” are bothfolders now, and “index.html” is in the box for the new file name.

  4. Then, you copy this text and paste into the file:

    <!doctype html>  
    <html lang="en">  
        <head>  
                <meta charset="UTF-8" />  
                <meta name="viewport" content="width=device-width, initial-scale=1" />  
                <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />  
                <meta http-equiv="Pragma" content="no-cache" />  
                <meta http-equiv="Expires" content="0" />  
                <title>GRC 338: Hello world assignment</title>  
        </head>  
        <body>  
            <h1>Hello world</h1>  
        </body>  
    </html>

    The code above shows on the “Edit new file” tab.

  5. Scroll down and click on the green button that reads Commit new file. You gotta commit!

    A green button reads “Commit new file”

  6. Navigate back to the folder you were working now and copy the URL to test on a new tab or window of your browser.

    The URL “grc-ribeiro.github.io/grc338/helloworld/” is selected.

    A webpage with the words “Hello world” shows up at grc-ribeiro.github.io/grc338/helloworld/

  7. Don’t forget to submit it your URL to Canvas.

For the next assignments, you need to follow the instructions on part 2 of this tutorial.