← Back to Map

GitHub Pages Deployment

Turn your repository into a live website!

🌐
GitHub Pages is a free hosting service that takes HTML, CSS, and JavaScript files directly from your repository and publishes them as a website. Your site will be live at username.github.io/repo-name!
🤖
Feeling overwhelmed? Ask Copilot in VS Code to help you with this if it seems intimidating! It can guide you through the process step by step.

⚙️ Choose Your Deployment Method

✨
This method is more robust and allows you to customize how your site is built. It's the modern, recommended approach.
1

Navigate to Your Repository

Go to your repository on GitHub.

2

Open Settings

Click Settings (Gear icon in the top toolbar).

3

Find Pages Settings

In the left sidebar, click Pages.

4

Select GitHub Actions

Under Build and deployment → Source, select GitHub Actions from the dropdown menu.

5

Choose a Workflow

GitHub will analyze your repo and suggest a workflow. You can also ask Copilot in VS Code for help configuring your files.

  • For the class template (HTML/CSS), look for the Static HTML card and click Configure.
  • For custom React apps, you may need a specific Node.js workflow.
6

Review the YAML

An editor will open showing a .yml file. You generally do not need to edit this for simple sites.

💡
YAML files define the "recipe" for building and deploying your site. The default settings work great for most projects!
7

Commit the Workflow

Click Commit changes... (green button, top right).

8

Monitor the Build

Click the Actions tab in your repository.

  • 🟡 Yellow circle = Build in progress
  • 🟢 Green check = Success! Your site is live!
  • 🔴 Red X = Something went wrong (click to see details)
📁
Best for very simple, static HTML files without any build steps. Quick and easy!
1

Go to Settings → Pages

Navigate to your repository's Settings, then click Pages in the sidebar.

2

Select Source

Under Source, select Deploy from a branch.

3

Choose Branch and Folder

Under Branch, select main (or master) and ensure the folder is / (root).

4

Save

Click Save. Your site will be live in a few minutes!

🔗 Finding Your Live Site

After deployment, your site URL will be:

https://YOUR-USERNAME.github.io/REPO-NAME/

You can also find the URL in Settings → Pages at the top of the page.

🔧 Troubleshooting

❓ My site shows a 404 error

▼
  • Make sure you have an index.html file in your repository root
  • Wait a few minutes - deployment can take time
  • Check the Actions tab for any build errors

❓ My CSS/images aren't loading

▼
  • Check your file paths - they should be relative (e.g., ./styles.css not /styles.css)
  • Make sure filenames match exactly (case-sensitive!)
  • Commit and push all your files

❓ Changes aren't showing up

▼
  • Hard refresh your browser (Ctrl/Cmd + Shift + R)
  • Wait for the GitHub Action to complete (check the Actions tab)
  • Make sure you pushed your changes to GitHub

🎉 Congratulations!

You've completed the GitHub Setup Roadmap! You now have all the skills to create, manage, and deploy projects using GitHub. Keep building amazing things!

← Back to Map