Creating a CS180/280A Portfolio with GitHub Pages

TL;DR: If you make a repo called <your_github_username>.github.io, GitHub will host your site for free! Then it's as simple as adding an index.html file to the repo and building on top of it.

Step 1: Create a GitHub Repository

Log in to GitHub:
Create a New Repository:
- Go here, or to your GitHub dashboard and click the green "New" button to create a new repository.
- Name your repository <your_github_username>.github.io (replace <your_github_username> with your actual GitHub username).
- Set the repository to be public -- course staff will need access when grading.
- Start with a README file so the repo isn't empty.
- Click the "Create repository" button.

Step 2: Add an `index.html` File

Navigate to Your New Repository: After creating the repository, you'll be redirected to the repository page.

Create an index.html File:

Click the "Add file" button, then select "Create new file."
Name the file index.html.

In the file editor, you can start with something simple like:

<!DOCTYPE html>
<html>
<head>
    <title>My Portfolio</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
    </style>
</head>
<body>
    <h1>Welcome to My CS180 Portfolio!</h1>
    <a href="./1/index.html">Project 1</a>
</body>
</html>

Scroll down and commit your new file by clicking "Commit new file."

Step 3: Access Your Website

Wait a Few Minutes: GitHub will automatically deploy your site. They say this may take up to 10 minutes. This is your time to brew some tea.
Visit Your New Site:
- Go to https://<your_github_username>.github.io in your web browser.
- You should see the content of your index.html file displayed as your website.

Step 4: Project Pages

Right now, if you copied the example HTML above, you'll notice the 'Project 1' URL returns 404 as it links to a page that doesn't (yet) exist.
For each project, you should create a separate directory/subpage that you'll link to from the main page. An example directory structure is below:


    <your_github_username>.github.io/

    ├─index.html    (main page)

    ├─1/

    │ ├─index.html

    │ └─media/

    │   ├─img1.jpg

    │   ├─ ⋮ 

    │   └─imgN.jpg

    └─2/

        ├─⋮

Each time you commit changes, GitHub Pages will update your site in up to 10 minutes. For this reason, we recommend cloning and editing locally so you can witness your modifications real-time and then push once satisfied.

Step 5: Customization

You can customize the look of your site by modifying the CSS <style> tag in the <head> of your index.html file.
Alternatively, you could create a separate style.css file; if you wanted to re-use this styling across projects pages, you'd place it in the root directory and import it absolutely with <link rel="stylesheet" href="style.css"> in the <head> tag.
Otherwise, you could place the style file in the project directory and reference the relative path as <link rel="stylesheet" href="./style.css">.

This is similar to images: <img src="./media/img1.jpg">

We aren't going to be sticklers about the design of your site, but it should be easy to navigate and understand. You shouldn't bog the site with deliverable images that take up the whole page, for example.

Extras -- These are in no way required!

If you have a domain, you could use it for GitHub pages (tutorial)
If you already have a personal <your_github_username>.github.io page/repo, you could set up a new repository named "cs180" and configure it to publish to <your_github_username>.github.io/cs180 (tutorial, starting step 4)

Step 1: Create a GitHub Repository

Step 2: Add an index.html File

Step 3: Access Your Website

Step 4: Project Pages

Step 5: Customization

Step 2: Add an `index.html` File