GitHub Portfolio Setup

In this assignment, you will create a GitHub repository to host your personal portfolio website. This repository will serve as the foundation for your work throughout the course, and you will continue to build upon it as you learn new skills and techniques.

GitHub Pages provides free hosting for static websites directly from your GitHub repository. By the end of this assignment, you will have a live portfolio website accessible via a public URL.

Understanding the Repository Structure

Your portfolio repository needs to follow a specific naming convention to maintain consistency and professionalism. The repository should be named using the format [lastname]-wdd331-portfolio, where you replace [lastname] with your actual last name. For example, if your last name is Smith, your repository would be named smith-wdd331-portfolio.

GitHub Pages works by serving HTML files directly from your repository. When you enable GitHub Pages for a repository, GitHub looks for an index.html file in the root directory and serves it as your website's home page. This means your repository structure should be simple and organized, with your main HTML file at the root level.

Assignment Instructions

1. Create Your Repository

Navigate to GitHub and create a new repository. Use the naming convention described above: [lastname]-wdd331-portfolio. Make sure to set the repository visibility to public, as GitHub Pages requires public repositories for free hosting. Initialize the repository with a README file to make the initial setup easier.

Repository Naming

Use lowercase letters for your repository name. If your last name contains spaces or special characters, replace them with hyphens. For example, "Van Buren" becomes "van-buren-wdd331-portfolio".

2. Clone the Repository

Once your repository is created, clone it to your local machine. You can do this by copying the repository URL from GitHub and using the following command in your terminal or command prompt:


        git clone https://github.com/yourusername/lastname-wdd331-portfolio.git

Replace yourusername with your GitHub username and lastname with your actual last name. Navigate into the newly created directory after cloning.

3. Create Your Index Page

Create a basic index.html file in the root directory of your repository. This file will serve as your portfolio's home page. Your page should include at minimum:

A proper HTML5 document structure with doctype, html, head, and body tags
A page title in the head section
Your name prominently displayed
A brief introduction or welcome message

Keep the content simple for now. You will enhance this page with better typography, modern CSS, and additional content as you progress through the course.

4. Commit and Push Your Changes

After creating your index.html file, you need to commit your changes and push them to GitHub. Use the following commands in your terminal:


        git add index.html
        git commit -m "Add initial portfolio page"
        git push origin main

The first command stages your file for commit, the second creates a commit with a descriptive message, and the third pushes your changes to the remote repository on GitHub.

If you are new to Git or need a refresher on the workflow, remember that Git tracks changes in three stages: working directory, staging area, and repository. The add command moves changes to the staging area, commit saves them to your local repository, and push sends them to GitHub.

5. Enable GitHub Pages

Publish your site from the repository Settings so GitHub can build and host it.

Open your repository on GitHub and go to Settings.
In the left sidebar, click Pages (under "Code and automation").
Under Build and deployment → Branch, choose the branch to deploy (typically main) and set the folder to / (root).
Click Save to enable Pages and start the build.

What to expect

GitHub will build your site (this can take a few minutes). When the build succeeds, the Pages settings will display your site URL in the format: https://yourusername.github.io/lastname-wdd331-portfolio/

After enabling GitHub Pages, it may take several minutes for your site to become available. If you see a 404 error immediately after setup, wait a few minutes and try again. Subsequent updates to your repository will typically deploy faster.

6. Verify Your Deployment

Once GitHub Pages indicates your site is published, visit the URL provided to verify that your portfolio is live and displaying correctly. You should see the content from your index.html file. If you encounter any issues, check that your file is named exactly index.html (lowercase) and is located in the root directory of your repository.

Test your site in multiple browsers if possible to ensure compatibility. Make note of both your repository URL and your live site URL, as you will need to submit both in Canvas.

Submitting Your Work

You will submit two URLs for this assignment through a Canvas quiz:

Your GitHub repository URL (e.g., https://github.com/yourusername/lastname-wdd331-portfolio)
Your live GitHub Pages URL (e.g., https://yourusername.github.io/lastname-wdd331-portfolio/)

Make sure both URLs are accessible before submitting. Your instructor will verify that your repository is properly set up and that your portfolio is successfully deployed.

Key Concepts Summary

In this assignment, you established the foundation for your portfolio by creating a GitHub repository and deploying it with GitHub Pages. You practiced the essential Git workflow of cloning, adding, committing, and pushing changes. You also learned how GitHub Pages serves static content directly from your repository, making it simple to host and update your website.

As you progress through this course, you will return to this portfolio repeatedly, adding new pages, implementing modern CSS techniques, and refining your design. Each assignment will build upon this foundation, transforming your basic page into a polished, professional portfolio.

Troubleshooting Common Issues

If you encounter problems during setup, here are solutions to common issues:

404 Error on GitHub Pages URL: Verify that your index.html file is in the root directory and named exactly as shown (lowercase). Also confirm that GitHub Pages is enabled and set to deploy from the main branch and root folder.
Changes Not Appearing on Live Site: GitHub Pages can take a few minutes to rebuild after you push changes. Clear your browser cache or try viewing the site in an incognito window. If changes still do not appear after 10 minutes, check the Pages settings to ensure deployment is successful.
Git Push Rejected: This typically happens when the remote repository has changes you do not have locally. Run git pull origin main before pushing to sync your local repository with the remote.
Repository Naming Issues: If you named your repository incorrectly, you can rename it in the repository Settings on GitHub. However, this will change your GitHub Pages URL, so update your Canvas submission accordingly.

Looking Ahead

Your portfolio repository is now ready for development. In upcoming assignments, you will implement advanced typography, refactor your CSS using modern selectors, and add sophisticated styling techniques. Each enhancement will make your portfolio more professional and demonstrate your growing skills in web development.

Consider this portfolio a living document that will evolve alongside your learning. By the end of the course, you will have a fully functional, well-designed portfolio that showcases your abilities and can serve as a valuable professional asset.