Publishing with GitHub Pages

GitHub Pages is a free static site hosting service built into GitHub. For a repository with HTML, CSS, and JavaScript files, enabling Pages takes about two minutes — and the site is live at a real URL on the internet.

What GitHub Pages does

GitHub Pages serves the contents of a branch (usually main) as a static website. Every time you push to that branch, the site updates automatically. No server to configure, no deployment pipeline, no cost.

The URL for a user repository is:

https://yourusername.github.io/summit-trail-outfitters/

This is a real public URL — you can share it in job applications, link to it from your portfolio, and give it to anyone.

Enabling GitHub Pages

1. In your summit-trail-outfitters repository on GitHub, click Settings (the gear icon in the top navigation)

2. In the left sidebar, click Pages

3. Under Source, select:

   • Deploy from a branch
   • Branch: main
   • Folder: / (root)

4. Click Save

GitHub queues a build. After a minute or two, a green banner appears at the top of the Pages settings showing your site URL:

Your site is live at https://yourusername.github.io/summit-trail-outfitters/

Verifying the live site

Click the URL. Your STO home page should load. Navigate through the pages — About, Trails, Gear, Contact, and the custom 404 page (try adding /nonexistent to the URL).

Check that:

• Images load correctly
• CSS is applied (the site looks as it does locally)
• JavaScript works (the contact form validates)
• Navigation links between pages work

If something looks wrong, the most common cause is a path issue — links that work locally with the file system may need to be relative rather than absolute paths.

Common path issue: absolute vs relative

If your HTML links use paths starting with /:

<link rel="stylesheet" href="/css/style.css">

These work when served from a domain root (yourusername.github.io) but not from a sub-path (yourusername.github.io/summit-trail-outfitters/). Change them to relative:

<link rel="stylesheet" href="css/style.css">

Or use the full repository sub-path:

<link rel="stylesheet" href="/summit-trail-outfitters/css/style.css">

After fixing any path issues, commit and push — GitHub Pages rebuilds within a minute.

Updating the live site

Because Pages deploys from main, the workflow is your normal Git workflow:

1. Make changes locally
2. Commit: git commit -m "Update trail descriptions"
3. Push: git push

The site updates automatically within about 60 seconds of the push. No other action needed.

Adding the Pages URL to the README

Update your README to link to the live site:

## Live Site

[View live site](https://yourusername.github.io/summit-trail-outfitters/)

git add README.md
git commit -m "Add live site link to README"
git push

Exercise

1. In your GitHub repository, go to Settings → Pages.

2. Set source to: Branch main, folder / (root). Save.

3. Wait 1–2 minutes, then visit the URL GitHub shows you.

4. Navigate through all six pages and verify they load correctly.

5. Test the contact form validation in the live site.

6. If you find any path issues, fix them locally, commit, and push.

7. Update README.md with the live site URL. Commit and push.

8. Share the live site URL — this is your first deployed portfolio piece.

Recap

• GitHub Pages hosts static HTML/CSS/JS files directly from a repository branch.
• Enable it in Settings → Pages. Select branch main, folder /root. No other configuration needed.
• The live URL is https://yourusername.github.io/repository-name/.
• Pages rebuilds automatically on every push to main.
• Watch for absolute path issues (/css/style.css) — use relative paths (css/style.css) for GitHub Pages sub-path URLs.
• Add the live URL to your README for immediate portfolio value.

Next: the course recap — a summary of the entire Git Foundations course and where your Git skills take you next.