In-class lab · 80 minutes · you drive, the agent builds

Build a website that is actually yours. Then put it on the internet.

Last time you told an agent to save a study guide and the instructor pushed it. Today the repository is yours, the page is yours, and the address is yours.

What you leave with: a live page at https://YOUR-USERNAME.github.io, two deploys, and a written record of what changed between them.

  1. 1. Decide what goes on it10 minutes · before any code
  2. 2. Make the repo and build the page35 minutes · you brief, the agent writes
  3. 3. Publish, check, change, republish35 minutes · twice through the cycle

No account, or you would rather not publish? Build the same page and open it from your own computer instead. Write the same record, and describe what publishing would change. Same credit. Tell the instructor which route you are on so nobody waits on a step they cannot take.

Three words that are not the same thing

You already know the first two from last class. The third is new, and it is the one that puts a page on the internet.

  1. 1. CommitOn your computerRecord a checkpoint in local history.
  2. 2. PushTo your GitHub repositorySend those commits to the online copy.
  3. 3. PublishGitHub Pages builds the siteGitHub turns the files in that repository into a public web address.

A push puts your files on GitHub. Publishing is a separate switch you turn on once. After that, every push updates the live page — usually within a minute, sometimes longer.

The repository has to be public for a free account to publish it. That is different from last class, where the practice repository was private. Public means anyone: classmates, family, a future employer, a search engine. You choose what goes on the page, and you can take it down again — the last step of this lab shows you how.

1. Decide what goes on it 10 minutes

First 5 minutes · on paper, before you open anything

Write down what a stranger may read

This is a personal site, so it should say something true about you. It is also a public page with your name on it. Those two things are not in conflict — they just mean you decide the contents on purpose instead of by accident.

Write three lines:

  1. Who this page is for. A classmate? Someone hiring? Someone who found it by searching your name?
  2. Three things you want it to say about you. What you are studying, something you made, something you are interested in.
  3. What you are not putting on it. Decide now, not while the agent is writing. Most people leave out a home address, a phone number, a class schedule, anything about somebody else, and anything they would not want a stranger to read back to them.

Check: you can say out loud who the page is for and one thing you deliberately left off it.

Next 5 minutes · with a partner

Trade lists and look for the thing they missed

Read your partner’s three lines. Ask one question: “Who else could find this, and would you mind?” You are not trying to talk each other out of anything. You are checking that the decision was made, rather than defaulted into.

Working alone? Read your own list as though you were someone who does not know you, and answer the same question in writing.

2. Make the repo and build the page 35 minutes

Minutes 0–12 · the repository

The name is not decoration

Create a new repository on GitHub named exactly:

YOUR-USERNAME.github.io

Use your real GitHub username, all lowercase, with nothing extra. A repository with that name is treated as your personal site and is served at https://YOUR-USERNAME.github.io. Any other name still works as a project site, but the address is longer and the settings differ — use this name today so everyone is looking at the same thing.

  1. Set it to Public. A free account cannot publish a private repository.
  2. Tick Add a README so the repository is not empty.
  3. Create it, then read the address bar. That is your repository, not your website. There is no website yet.
Create the repositoryGitHub’s own Pages guide

Check: the repository is public, the name ends in .github.io, and the username in it is spelled exactly like yours.

Minutes 12–18 · get it onto your machine

Ask the agent for a working copy

Same move as last class, with one difference: this time the repository is yours.

Show me the folder you propose for a copy of my repository at <paste your repository address>. Check that the folder does not already exist, and wait for me to confirm. Then make the copy there and list what is in it.

Confirm the folder before you approve it. Copying into a folder that is already in use can overwrite work.

Check: you can see the folder on your own computer and the README that came with it.

Minutes 18–35 · the creative part

Brief the agent. Do not just say “make me a website.”

You wrote a brief in Topic 2 and you saw what a vague one produces. Same skill, higher stakes — this one is going on the internet. Tell it what the page must contain, what it must not, and what you want it to look like.

In this folder only, create index.html: a single-page personal site for me. Include <your three things>. Do not include <what you decided to leave off>. Make it <your look: plain and readable / bold colour / one long scroll>. Write plain HTML and CSS in that one file, with no external services, no tracking, and no fonts or scripts loaded from other sites. Show me the file when it is done. Do not commit or push yet.

Then open the file yourself in a browser before anything else happens. You are the one publishing it, so you are the one who reads it first.

  1. Is everything on it true?
  2. Did it add anything you did not ask for — a fake email, an invented job, a placeholder that still says “Lorem ipsum” or “Your Name Here”?
  3. Is anything on it from your “not putting this on it” list?

Ask for specific changes until it is right. “Make it better” is not a change; “remove the phone number and make the heading my name” is.

Check: you opened the page yourself and can name one thing you asked it to change.

3. Publish, check, change, republish 35 minutes

Minutes 0–10 · the cycle you already know

Commit and push it — your repository this time

Show me the changes you will include. After I approve them, commit index.html with a message describing what this checkpoint contains. Then show me the exact GitHub destination and wait for my approval before pushing.

Approve the destination, let it push, then open your repository in the browser and find index.html and your commit message.

Check: the file is visible on GitHub. Your website still does not exist. Files are not a site until you turn publishing on.

Minutes 10–18 · the new switch

Turn on Pages, then wait and look

In your repository on GitHub, open Settings, then Pages in the sidebar. Choose to deploy from your default branch, root folder, and save. GitHub’s interface changes from time to time — if the wording does not match, follow their guide linked above and tell the class what you actually saw.

Then wait. Building the site takes about a minute, occasionally several. Refresh the Pages settings until it shows your address, then open it.

https://YOUR-USERNAME.github.io

If it 404s, that is normal at first. Wait a minute and refresh. Then check, in this order: is the repository public, is the file named exactly index.html, is it at the top level of the repository rather than inside a folder, and did the push actually land? Fix one thing at a time and say which one it was.

Check: the page loads at that address, and you can say what it took to get there.

Minutes 18–22 · proof, not a success message

Open it somewhere that is not your computer

Your browser may be showing you a cached copy, and the agent saying “published successfully” is a claim, not evidence. Check it the way a stranger would:

  1. Open the address in a private or incognito window, or on your phone with wi-fi off.
  2. Ask a classmate to open it and read you the first line they see.

Check: somebody who is not signed in as you has seen your page.

Minutes 22–32 · do it again, on purpose

Change one thing. Watch the live page follow.

Pick one real improvement — a sentence that reads badly, a heading, a colour you do not like. Ask the agent for that one change, look at the difference before approving it, then commit and push again.

Before you refresh the live page, say out loud what you expect to see. Then refresh.

That gap between pushing and the page updating is the whole point: your live site is a snapshot of your last push, not of the file open on your screen.

Check: two commits in your repository, and a live page showing the second one.

Minutes 32–35 · the record

Write down three lines, and how to undo it

Ungraded, nothing to submit. In your own notes:

  1. My address: the URL, written out.
  2. What changed between my two deploys, in one sentence.
  3. The next thing I would add, in one sentence.

And know how to take it down. You can turn Pages off in the same Settings page, make the repository private, or delete it. Do that whenever you want — it is your repository. Search engines may keep a copy for a while after, which is a reason the first decision on this page was what to put on it.

What this connects to

You just did the Topic 2 cycle on a repository you own, and added one new step. Later in the course you come back to this with harder questions: Topic 8 asks what makes an interface worth building, and Topic 10 asks what a public link actually proves and what you do when a release breaks ten minutes before class.

GitHub Pages: create a siteMDN: getting started with the webPrevious lab

Course-owned lab. Publishing is your choice; the local-only route earns the same credit. Do not put another person’s information, restricted course material, or credentials on a public page.