Due to recent changes in Netlify's terms of service, we're switching to GitHub Pages for hosting your projects. GitHub Pages is free, reliable, and perfect for our HTML/CSS/(future javascript) work.

1. Go to your repository → Settings → Pages
2. Under "Source," select branch: main
3. Click Save

Your site will be live at: https://YOUR-USERNAME.github.io/YOUR-REPO-NAME/

*Note: The github.io is the part that makes it a page and not the repo.

Detailed instructions are provided below.

The Quick Version (30 seconds)

If you already have a repository with HTML/CSS files:

1. Go to your repository on GitHub
2. Click Settings (top menu)
3. Click Pages (left sidebar)
4. Under Source, select branch: main (or master)
5. Click Save
6. Done! Your site will be live at https://YOUR-USERNAME.github.io/YOUR-REPO-NAME/

That's literally it. No files to change, no special setup required.

Detailed Step-by-Step

1. Make Sure Your Repository is Ready

Your repository needs:

• ✅ An index.html file at the root (this becomes your homepage)
• ✅ To be set to Public (Settings → General → Change visibility if needed)

2. Enable GitHub Pages

1. Navigate to your repository on GitHub
2. Click Settings in the top menu bar
3. Scroll down or click Pages in the left sidebar
4. Under Build and deployment:
   • Source: Select "Deploy from a branch"
   • Branch: Select main (or master if you have an older repo)
   • Folder: Leave as / (root)
5. Click Save

3. Find Your URL

After saving, GitHub will show you a message:

Wait 1-2 minutes, then click that URL to see your live site!

Important Notes

If your files are in a subdirectory

Some projects have this structure:

repo-name/
├── README.md
└── site/
    ├── index.html
    └── css/

If your index.html is NOT at the root level:

Option 1: Move files to root (recommended)

# Move all files from site/ to root
git mv site/* .
git commit -m "Move files to root for GitHub Pages"
git push

Option 2: Change GitHub Pages folder setting

• In Settings → Pages
• Change Folder from / (root) to /docs
• Rename your subdirectory to docs

Checking if it worked

Visit your site URL. If you see:

• ✅ Your website → Success!
• ❌ 404 Page → Check that index.html is at the root level
• ❌ Repository file list → GitHub Pages isn't enabled yet

File path issues after conversion

If CSS/images break after deploying:

Check your links in HTML files:

<!-- ❌ Won't work on GitHub Pages -->
<link rel="stylesheet" href="/css/style.css">
<img src="/images/photo.jpg">

<!-- ✅ Use relative paths instead -->
<link rel="stylesheet" href="css/style.css">
<img src="images/photo.jpg">

<!-- ✅ Or explicitly relative -->
<link rel="stylesheet" href="./css/style.css">
<img src="./images/photo.jpg">

Multiple Pages/Sites Per Account

You can have unlimited GitHub Pages sites! Each repository can become a separate site:

• username.github.io/project1
• username.github.io/project2
• username.github.io/portfolio
• etc.

Special case: A repository named exactly USERNAME.github.io (matching your GitHub username) will be published at https://USERNAME.github.io/ without the repository name in the URL.

Class Exercise: Convert Your Current Project

1. ✅ Go to your existing repository
2. ✅ Click Settings → Pages
3. ✅ Select branch: main
4. ✅ Click Save
5. ✅ Copy your new URL: https://USERNAME.github.io/REPO-NAME/
6. ✅ Submit your live URL on Canvas

That's it! Your existing work is now live on GitHub Pages instead of Netlify.

Benefits of This Switch

• ✅ No bandwidth limits (unlimited traffic)
• ✅ No build minute limits
• ✅ More reliable for simple HTML/CSS sites
• ✅ Already integrated with Git workflow
• ✅ Free SSL/HTTPS automatically enabled
• ✅ No separate account/service to manage

Need help? Include your GitHub repository URL when asking questions!