Put your tracker online

Newbie to Tech · Step 5 of 8 · about 5 minutes to read, 20 minutes to do Practice project: https://github.com/jazken/mood-habit-tracker · you publish your fork's main · instructions: branch step-4 README. The branch is called step-4 but this is lesson 5. The names don't line up, and that's fine. GitHub steps were checked against the step-4 README and GitHub Docs on 24 Oct 2026 (SGT). GitHub's screens can change.

Do this now (you can read the rest after)

Today your tracker gets a real web address that anyone can open. You'll use GitHub Pages. It's free for public repos.

Part A: get your saving feature onto main (10 minutes)

1. Open your tool in the mood-habit-tracker folder. Ask:

Switch to my branch my-save. Push it to my GitHub fork.
Explain each command before you run it, and ask me before you push.

Approve the push just this once. Expect something like git push -u origin my-save. 2. On GitHub, open your fork. Click Compare & pull request (or Pull requests → New pull request). 3. ⚠️ Check the top of the page. The base repository must be YOUR-NAME/mood-habit-tracker, not jazken/mood-habit-tracker. Base branch: main. Compare branch: my-save. 4. Read the diff. Click Create pull request, then Merge pull request, then Confirm merge.

Part B: turn on GitHub Pages (5 minutes)

1. On your fork, click Settings. (On a small screen, open the menu first.)
2. In the left sidebar, under "Code, planning, and automation", click Pages.
3. Under "Build and deployment", next to "Source", choose Deploy from a branch. Don't choose GitHub Actions.
4. Choose branch main and folder / (root). Click Save.
5. Wait a minute. Refresh. GitHub shows your link.

Your link looks like: https://YOUR-NAME.github.io/mood-habit-tracker/

Check you did it: open your link on your phone. Tap a mood. Refresh. Your tap is still there.

---

Why this matters

Until now, your page only lived on your computer. Now it's a real website. A website is just files on a computer that's always online. GitHub Pages is that computer. You didn't need a server, a "build" or a monthly bill.

How it works

• GitHub Pages shows whatever is on your main branch. Change main, and your site changes a minute later.
• That's why you merged my-save first. Without it, your site would show the starter page that saves nothing.
• Your saved days are still kept only in each visitor's own browser. Nobody sees anyone else's moods. Nothing is sent to GitHub.

The rule from now on: every change reaches your live site through a pull request you read. Branch, commit, push, PR, merge. You'll do this again in Steps 6 and 7.

If something goes wrong

• "404" on your link. Wait 2 minutes and refresh. Check Pages says branch main and folder / (root).
• There's a "Configure" button that opens a workflow file. Close that file. Go back and choose Deploy from a branch. This project has no workflow, on purpose.
• No Settings tab. You can only turn on Pages for a repo you own. On your own fork, you do.
• Your PR went to jazken/mood-habit-tracker by mistake. Close it without merging, and open a new one with your fork as the base. No harm done.
• You were Partner A in Step 4. Your main already has the partner changes. Your my-save PR may show a conflict in index.html. Resolve it like in Step 4, or ask your tool: "Explain this conflict. Don't fix it yet."
• The push failed. Don't type a step name after push. In this project, step names are both branches and tags. Use git push, or git push origin HEAD.

In your tool: pushing safely

• Kiro: when it asks to run git push, choose Allow this once, not Always allow.
• Codex: network access is off by default, so we expect it to ask before a push. We haven't tested this. Approve it once.
• Claude Code: approve the push once. Skip "Yes, and don't ask again" for push.
• Antigravity: keep command(git push) in your Ask list (Step 4).

Words from this step

Word	What it means
GitHub Pages	A free GitHub service that turns a repo into a website
Publish / deploy	Put your site online
URL	A web address, like https://…github.io/…
Base / compare	In a PR: where changes go (base) and where they come from (compare)

Answer key

The step-4 branch README has these steps under "Put your page on the internet": https://github.com/jazken/mood-habit-tracker/tree/step-4

The class repo's own link is https://jazken.github.io/mood-habit-tracker/.

Go deeper

• GitHub Pages: https://pages.github.com/
• Choose a publishing source: https://docs.github.com/en/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site
• PRs from a fork: https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/creating-a-pull-request-from-a-fork
• MDN, how the web works (free): https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started

Next: Step 6, Your first real code: a week chart.