Share Your Projects with GitHub Pages

What is GitHub Pages? 

GitHub Pages takes your HTML/CSS/JavaScript files and turns them into a live website on the internet! 

Why use GitHub Pages?

• Your project becomes a real website.

• 🔗 You get a URL you can share (like yourname.github.io/project)

• Works on phones, tablets, and computers

• Completely FREE!

• Updates automatically when you change your code

Before You Start - Checklist

You need:

• ✅ A GitHub account (don't have one? Go to GUIDE 1 and follow steps!)

• ✅ A repository with your project

• ✅ A file called index.html in your repository (this is your homepage)

Step 1: Go to Your Repository

1. Log in to github.com

2. Click on your profile picture (top right)

3. Select "Your repositories"

4. Click on the project you want to publish

Example: Click on my-first-website

Step 2: Open Settings

1. Look at the top of your repository page:

2. You'll see tabs: Code, Issues, Pull requests, Actions, Projects, Wiki, Security, Insights, Settings

3. Click on Settings (it's the last tab with a gear icon ⚙️)

   • ⚠️ Don't see Settings?

     1. Make sure you're logged in

     2. Make sure you're the owner of this repository

     3. You might be looking at someone else's project!

Step 3: Find GitHub Pages Section

1. In Settings, look at the left sidebar

2. Scroll down until you see: "Pages"

3. Click on "Pages"

4. You're now on the GitHub Pages settings.

Step 4: Activate GitHub Pages

Choose Your Source

1. You'll see a section called "Source" or "Build and deployment"

2. Click the dropdown that says "None"

3. Select: "main" (or "master" if that's what you see)

What is "main"?

• It's the name of your code branch

• Think of it as the "main version" of your project

• Don't worry too much about this - just select it!

Choose the Folder

1. Next dropdown: "/ (root)"

2. Keep it as "/ (root)" - this means use all files in the repository

Save!

1. Click the "Save" button

 GitHub is now building your website! 🎉 

Step 5: Wait for Your Website (Just 1-2 Minutes!)

1. You'll see a message:

2. "Your site is ready to be published at https://yourusername.github.io/repository-name/"

3. Refresh the page after 1-2 minutes

4. The message changes to:

   1. "Your site is live at https://yourusername.github.io/repository-name/"

🎊 YOUR WEBSITE IS LIVE!

Step 6: Visit Your Website!

1. Click on the URL (the https://... link)

2. A new tab opens with YOUR WEBSITE.

Example URLs:

• https://sarah-codes.github.io/my-first-website/

• https://alex-developer.github.io/calculator-app/

• https://maya-projects.github.io/tic-tac-toe-game/

3. Share this link with anyone you want to!