Beginner's Guide to GitHub Pages Pt. 2
What You'll Learn
What GitHub Pages is
How to publish a website online
How to generate a shareable website link
How to update a website after publishing
Overview
Have you ever wanted to share your coding projects with friends, teachers, or family?
GitHub Pages allows you to turn your HTML, CSS, and JavaScript projects into real websites that anyone can visit.
By the end of this guide, you'll have a live website with its own URL that you can share with others.
What Is GitHub Pages?
GitHub Pages is a free service provided by GitHub that hosts websites directly from your repositories.
Instead of keeping your project only on your computer, GitHub Pages makes it available on the internet.
Why Use GitHub Pages?
🌎 Turn your project into a real website
🔗 Get a shareable URL
📱 Works on phones, tablets, and computers
💻 Completely free
🔄 Updates automatically when you make changes
Before You Start
Make sure you have:
✅ A GitHub account
✅ A repository containing your project
✅ An index.html file in your repository
If you haven't created a GitHub account yet, complete Guide 1: What Is GitHub and How to Set It Up?
Step 1: Open Your Repository
Log in to GitHub.
Click your profile picture.
Select Your Repositories.
Open the project you would like to publish.
Example:
my-first-website
Step 2: Open Repository Settings
At the top of your repository page, locate the navigation menu.
Click:
Settings ⚙️
Can't Find Settings?
Make sure:
You are logged into your account.
You own the repository.
You are not viewing someone else's project.
Step 3: Find GitHub Pages
Inside the Settings menu:
Locate the left sidebar.
Scroll until you see Pages.
Click Pages.
You are now in the GitHub Pages settings.
Step 4: Publish Your Website
Choose a Source
Under Build and Deployment:
Find the Source dropdown menu.
Select:
main
(Some repositories may use "master" instead.)
Choose a Folder
Select:
/ (root)
This tells GitHub to use the files located in your repository.
Save
Click Save.
GitHub will begin building your website.
Step 5: Wait for Deployment
Publishing usually takes 1–2 minutes.
After a short wait, refresh the page.
You should see a message similar to:
"Your site is live at"
followed by your website URL.
Step 6: Visit Your Website
Click the provided link to view your live website.
Example URLs:
Congratulations! Your project is now available online.
Updating Your Website
Any time you update the files in your repository:
Upload the new version to GitHub.
Wait a few minutes.
Refresh your website.
GitHub Pages will automatically publish the updated version.
What You Learned
By completing this guide, you have:
✅ Published a website online
✅ Created a public project portfolio
✅ Generated a shareable website link
✅ Learned the basics of web hosting
Troubleshooting
My Website Shows a 404 Error
Check that:
Your repository contains an index.html file.
GitHub Pages is enabled.
You selected the correct branch (main or master).
My Changes Aren't Appearing
Try:
Waiting a few minutes
Refreshing your browser
Confirming your files were uploaded correctly
I Can't Find the Pages Menu
Ensure you are:
Logged in
Viewing your own repository
Looking inside Repository Settings
Next Challenges
Beginner
Add more pages to your website.
Add images and links.
Customize colors and fonts.
Intermediate
Create a personal portfolio website.
Add a navigation menu.
Create a contact page.
Advanced
Connect your own custom domain.
Build a multi-page website.
Create a project portfolio showcasing all your coding work.
Real-World STEM Connection
Software engineers, web developers, designers, and entrepreneurs regularly use web hosting platforms to publish websites and applications. Learning GitHub Pages introduces one of the most common ways developers share their work and build professional portfolios online.
Extension Activity
Now that your website is live, share it with a friend, teacher, or family member and ask for feedback. Real developers constantly improve their projects based on user feedback.
