Learn, Vibe, Build
Menu

Lessons / Week 6 / Handout

Week 6 handout

Get your project online

Everything for Week 6

Learn, Vibe, Build · Week 6 handout · copy this into your AI and ask it to walk you through it

Goal: a link that anyone can open on their phone, like https://yourname.github.io/my-project/.

First: is your link actually online?

If your link starts with… It is…
file:///… or C:\Users\… or /Users/… A file on your laptop. Nobody else can open it.
localhost:… or 127.0.0.1:… Running only on your laptop. Nobody else can open it.
https://…github.io/… or https://…vercel.app or https://…netlify.app Online. 🎉
https://github.com/you/project Your code, not your site. Fine to share as code, but it isn't the working app.

The test: open the link on your phone with wifi off. If it works, it's online.

Three words that cause most of the confusion

  • Git: save points ("commits") for your project folder. It lives on your laptop.
  • GitHub: a website that stores a copy of your project and its save points (a "repository" or "repo").
  • GitHub Pages / Vercel: free services that turn a GitHub repo into a live website.

Commit = make a save point. Push = send your save points to GitHub. Deploy = publish it as a site.

Path A: GitHub Desktop + GitHub Pages (recommended for HTML/CSS/JS sites)

Use this if your project is a folder with an index.html in it.

  1. Make a GitHub account at github.com if you don't have one. Pick a short username; it becomes part of your link.
  2. Install GitHub Desktop from desktop.github.com and sign in with your GitHub account.
  3. Check your folder. The main page must be called exactly index.html and sit in the top level of the folder (not inside a subfolder).
  4. In GitHub Desktop: File → Add local repository… → choose your project folder. - If it says "This directory does not appear to be a Git repository", click create a repository → Create repository.
  5. Bottom left: type a summary like first version → Commit to main.
  6. Top bar: Publish repository. Untick "Keep this code private" (free Pages sites need a public repo) → Publish.
  7. Click View on GitHub (or open github.com/YOU/REPO).
  8. On the repo page: Settings (top tab) → Pages (left sidebar).
  9. Under Build and deployment: Source Deploy from a branch → Branch main → folder / (root) → Save.
  10. Wait about one minute, then refresh the Pages settings page. It shows "Your site is live at https://YOU.github.io/REPO/". Click Visit site.
  11. Test it on your phone, wifi off. Submit that link.

Updating your site later

Change your files → GitHub Desktop shows the changes → write a summary → Commit to main → Push origin → wait a minute → refresh your site (on a phone, pull down to refresh).

Path B: no installs (upload in the browser)

Good for a quick first try or a borrowed computer.

  1. github.com → + (top right) → New repository → name it → Public → Create repository.
  2. Click uploading an existing file → drag in the contents of your project folder (so index.html sits at the top) → Commit changes.
  3. Settings → Pages → Deploy from a branch → main / (root) → Save. Wait a minute → Visit site.
  4. To update: open the file on github.com → pencil icon to edit, or Add file → Upload files again.

Path C: VS Code's built-in Git

If you already work in VS Code: open your folder → Source Control icon (left bar) → Publish to GitHub → choose public → it creates the repo and pushes for you. Then do steps 8–11 of Path A. To update later: Source Control → type a message → Commit → Sync Changes.

Path D: React, Next.js, Vite, Svelte… (there's a package.json)

These need a build step, so use Vercel:

  1. Get the code onto GitHub with Path A or C (skip the Pages settings).
  2. Go to vercel.com/new, sign in with GitHub, and Import your repo.
  3. Leave the settings it detects → Deploy. Wait a minute or two.
  4. You get a link like https://my-project.vercel.app. Every push to GitHub redeploys it.

Built in a tool that hosts for you (Lovable, Bolt, Replit, v0)? Use its Publish/Deploy/Share button, and check that the link opens on your phone while you're logged out.

When it doesn't work

Problem Fix
404 at your github.io link Wait 2 minutes. Check that the file is named exactly index.html (lowercase) and is at the top of the repo, not in a subfolder. Check Settings → Pages says it's live.
Page loads but no styling or images Paths are wrong. Use relative paths like style.css or images/cat.png, not /Users/you/... or C:\.... File names are case-sensitive online: Cat.PNG ≠ cat.png.
Pages option missing or asks for an upgrade The repo is private. Settings → General → bottom → Change visibility → Public.
"Push rejected" or "fetch first" Someone (or you, on github.com) changed it online. In GitHub Desktop: Fetch origin → Pull origin, then push again.
Vercel build failed Open the build log, copy the red error, and paste it to your AI with: "My Vercel deploy failed with this error. Explain it and give me the smallest fix."
It works for you but not for others You're logged into something, or it's a localhost link. Test on your phone with wifi off.

Never commit secrets. API keys and passwords don't go in your repo: anything in a public repo is public. Ask your AI how to use environment variables if your project needs a key.

Ask your AI to walk you through it

I'm on [Mac/Windows]. My project is [a folder of HTML files / a React app / built in Lovable / something else]. Walk me through getting it online with a link anyone can open, using the handout above. One step at a time; wait for me to say "done" before the next step. If I get an error I'll paste it.

Official docs: GitHub Pages quickstart https://docs.github.com/en/pages/quickstart · GitHub Desktop https://docs.github.com/en/desktop · Vercel https://vercel.com/docs/getting-started-with-vercel