IAT-339web design & development

Introduction

Below are instructions on setting up SFU GitHub to make submissions for IAT-339.

Instead of using SFU Filespace, this term we will use GitHub pages to upload and submit all exercises and projects for our class.

GitHub Pages is a web hosting service that lets you turn your code repository into a live website. This tutorial will walk you through the entire process, from creating your first repository to seeing your site live on the web.

What You'll Need

Before starting, you need to log in to SFU GitHub to enable your account. Please head to SFU GitHub and log in using your SFU computing ID and password.

You will only be able to use SFU GitHub if you have SFU multi-factor authentication set up.

Create a New Repository

A repository (or "repo") is like a folder that stores all your website files. Here's how to create one:

1. Log into your GitHub account
2. Click the green "New" button or the "+" icon in the top right corner

3. Select "New repository"
4. Select "iat339" in the "Owner" dropdown. If you don't see this option and this is the first time you logged in to SFU GitHub, please allow 24 hours for this option to appear. If you still don't see this option after 24 hours, please email Alfredo.

5. Name your repository. Use the following naming convention: yourSFUid_exercise_01 (replace "yourSFUid" with your actual SFU ID, then use a consistent naming convention for projects and exercises).
6. Add a meaningful and concise description.
7. Make sure the repository is set to "Public".
8. Check the box "Add a README file"
9. Click "Create repository"

Add Your Website Files

Now you need to upload your HTML, CSS, fonts, and image files to your repository. You can do this directly through GitHub's web interface:

1. In your new repository, click "Add file" then "Upload files"

2. Drag and drop your website files into the upload area, or click "choose your files" to browse and select them

3. Make sure your main page is named "index.html" - this will be your homepage
4. Write a brief title and description of what you're uploading in the "Commit changes" section at the bottom

5. Now the files structure of your repository should look something like this:

Enable GitHub Pages

This is where the magic happens - turning your repository into a live website:

1. In your repository, click on the "Settings" tab (it's in the horizontal menu near the top)
2. Scroll down to the "Pages" section in the left sidebar
3. Under "Source," select "Deploy from a branch"
4. Choose "main" as your branch (this should be selected by default)
5. Leave the folder setting as "/ (root)"

6. Click "Save"

GitHub will now build your website. This process takes a few minutes.

Find Your Live Website

After GitHub finishes building your site and you reload the current page, you'll see a modal with a message that says "Your site is published at [URL]."

This is the link that you will submit on SFU Canvas for all exercises and projects in IAT-339. Plese note that some submissions will require you to submit this link AND your repository (both URLs will be different!).

Making Updates

Whenever you want to update your website, simply upload new files or edit existing ones directly in GitHub:

1. Navigate to the file you want to edit in your repository
2. Click the pencil icon to edit, or use "Add file" to upload new content
3. Make your changes
4. Scroll down and commit your changes with a descriptive message
5. Your website will automatically update within a few minutes

Troubleshooting Common Issues

My site isn't loading: Wait 1-5 minutes after enabling Pages or making changes. GitHub needs time to build and deploy your site.

I see a 404 error: Make sure your main page is named "index.html" exactly (all lowercase). Also verify that GitHub Pages is enabled in your repository settings.

My CSS/images aren't loading: Check that your file paths are correct. If your CSS file is in the same folder as your HTML, use 'href="style.css"' without any forward slashes at the beginning.

Tips for Success

Keep your file names simple and avoid spaces or special characters. Use hyphens instead of spaces, like my-project.html rather than my project.html.

Test your website locally first by opening your index.html file in a web browser before uploading to GitHub.

Use descriptive commit messages when uploading changes, like "Added contact form" or "Fixed navigation menu" instead of just "update."

Remember that it can take up to 5 minutes for changes to appear on your live site, so be patient after making updates.