Your first agent, your first repo, your first website

Three ideas before you start

1 · A chat model gives you text. A coding agent does work in a folder.

In a regular chat (claude.ai, ChatGPT), you ask a question, get an answer, and copy what you need. A coding agent works inside a folder on your computer. It can read your files, create and edit them, and run commands. It shows you what it changed, and it asks before doing anything risky. You describe the goal, and you stay the reviewer.

Try it: for each task, which tool would you reach for?

2 · Two agents, one workflow. Pick one.

Pick the one you already pay for. If you pay for neither, use Codex on the free plan. The rest of the workflow is the same either way: describe, review, revise, commit.

3 · Why Git and GitHub?

Without version control you end up with files like index_final_v2_REAL.html. And when an agent rewrites your page and breaks it, there's no way back. Git solves both problems.

• Undo anything. Every saved version is kept. If the agent makes a mess, you go back to the last good one.
• See exactly what changed. Git shows the lines that were added or removed (a diff). That's how you review an agent's work.
• Backup and share. Your work lives online, not just on your laptop. One link shares it, and you can work from any computer.
• Free publishing. GitHub Pages turns the folder into a public website. No server needed.

Commit and push, concretely

There are two actions to remember. A commit takes a labelled snapshot of your folder and saves it on your laptop. A push uploads your new snapshots to GitHub, and only then does your live site update. It's like saving a draft with a note, then sending it. Try it:

How the pieces fit

Click each stage to see what happens there.

1. Your laptopProject folder
2. Your laptopAgent edits files
3. GitHub DesktopCommit
4. GitHub DesktopPush
5. github.comRepository
6. The internetPages → live URL

Working with an agent: six principles

A coding agent is fast, capable and confident, and it only knows what you tell it. When something is missing, it fills the gap with a plausible guess. These principles keep you in charge. They apply to every tool and every task, not just this website.

1. Give it context. Say what this folder is, who the result is for, and where it will run. "This folder is my GitHub Pages repo for a college course."
2. Say what "done" looks like. Be concrete, and ask for one change at a time. Describe what you see, not what you guess. "On my phone the menu overlaps the title. Fix only the menu."
3. Set limits. Say what it must not do, add, or invent. "Use only the text I give you. Plain HTML and CSS, no frameworks."
4. Plan before it acts. For anything bigger than a small fix, ask for a plan first, or let it ask you questions. "Before editing, show me your plan, and ask me up to 3 questions about anything unclear."
5. You review everything. Check the actual result yourself, in the browser, sentence by sentence. "Done!" from the agent is a claim, not proof. "List every file you changed and what you changed in each."
6. Save often, undo freely. Commit whenever something works. If a change goes badly, go back to the last commit instead of arguing with the agent. "Undo your last change."

Your first request

Write it yourself. A few sentences that follow the principles are enough. Here's what one can look like:

This folder is my GitHub Pages repo for a college course. Build a simple one-page personal website: an index.html with a linked style.css, plain HTML and CSS only. Include About, Interests and Project interests sections, using only the text I give below. Don't add facts, links or achievements I didn't write. Keep it readable on a phone. Add a footer saying "Built with [tool]. Text written by [my name]." Before editing anything, show me your plan and wait for my OK.

[paste your content here]

It's short, but every principle is there: context (line 1), done (the sections), limits (no invented facts, no frameworks), plan first (the last line). You'll do the reviewing and saving.

The steps

Do steps 0 and 1 before section if you can. Start the rest in section, where help is around, and keep going at home. There's no need to finish in section. Click a step to open it, and mark it done when you finish.

1. 0Accounts and appsGitHub, GitHub Desktop, and your agent appbefore section

   1. Create a GitHub account at github.com/signup. Your username becomes part of your website address (username.github.io), so pick one you're happy to share. A short, professional name is best.
   2. Install GitHub Desktop from desktop.github.com, open it, and sign in with your GitHub account.
   3. Install the Claude desktop app from claude.com/download and sign in. Click the Code tab at the top. If it asks you to upgrade, your plan doesn't include Claude Code. Switch this guide to Codex instead.
   4. Install the ChatGPT desktop app from chatgpt.com/download and sign in with your ChatGPT account. Find the mode menu and switch it from ChatGPT to Codex.

   You're ready when: GitHub Desktop shows your account (Settings → Accounts), and the Code tab opens without an upgrade prompt.Codex mode opens and offers to work in a folder.

   Mark step done
2. 1Create your repositoryA GitHub project with a special name, copied to your laptop

   A repository (repo) is a project folder that Git tracks. GitHub has one rule for personal sites: if the repo is named exactly YOUR-USERNAME.github.io, it is published at that address.

   On github.com

   1. Click + (top right) → New repository.
   2. Repository name: YOUR-USERNAME.github.io. It must match your username exactly.
   3. Visibility: Public. Turn Add README on.
   4. Click Create repository.

   In GitHub Desktop

   1. File → Clone repository… → choose YOUR-USERNAME.github.io from the list.
   2. Note the Local path. By default it's Documents/GitHub/YOUR-USERNAME.github.io. Click Clone.

   You're ready when: GitHub Desktop shows Current repository: YOUR-USERNAME.github.io, and Repository → Show in Finder (Mac) or Show in Explorer (Windows) opens a folder containing README.md.

   Mark step done
3. 2Open that folder in your agentand check that it can see your files

   1. In the Claude app, open the Code tab.
   2. Choose Local, click Select folder, and pick Documents/GitHub/YOUR-USERNAME.github.io.
   3. Next to the send button, set the permission mode to Manual for today. Claude will show you each change and wait for Accept or Reject. It's slower, but you'll see exactly what an agent does. You can switch to Accept edits once you're comfortable.

   1. In the ChatGPT app, switch the mode menu to Codex.
   2. Open a folder and pick Documents/GitHub/YOUR-USERNAME.github.io.
   3. Choose the Local environment, which works directly in that folder. Don't use Worktree or Cloud today.
   4. If Codex asks for permission to edit files or run a command, read the request before you approve it.

   Your first message is a warm-up. It changes nothing, and it proves the agent is looking at the right folder:

   Warm-up promptCopy

   What files are in this folder? In two sentences, explain what this project is and what GitHub Pages will do with it. Don't change anything yet.

   You're ready when: the agent mentions README.md and your repo name. If it describes some other folder, you opened the wrong one. Go back to step 2.

   Mark step done
4. 3Write your content yourselfHuman first: the words on the site are yours

   Before you ask the agent for anything, write your content in any notes app: a short About, a few Interests, and your Project interests. The agent handles the structure and styling. You supply the substance. This matches the course AI policy: written work must be in your own words.

   • 2–4 sentences are plenty for About. Write the way you'd introduce yourself at a club fair.
   • Project interests: what kinds of projects you'd like to work on in this course (topics, questions, or the kind of work you enjoy, like data, writing, or design). Classmates will use this to find group partners for the final project. You can also mention something you've worked on before.
   • Only include what you're comfortable having online. Leave out your phone number, home address, and student ID.

   Mark step done
5. 4Write your request and send itPlan first, then let it edit

   1. Write your first request yourself, following the six principles. The example there is a good starting point. Paste your content from step 3 below it and send. If you're stuck, the optional prompt builder can draft one for you.
   2. Your request asks the agent to propose a plan and wait. Read the plan. If something is off (e.g., "I'll add a contact form"), reply with the correction. When it looks right, reply "Looks good, go ahead."
   3. In Manual mode, each file change appears as a diff with Accept/Reject. Skim it, then accept.Approve file edits when asked. Codex lists the files it changed at the end of its reply.

   You're ready when: your folder contains index.html (and probably style.css).

   Mark step done
6. 5Look at it and review it criticallyYou are the reviewer, not the agent

   Open index.html in your browser. Double-click it in Finder or Explorer, or drag it onto a browser window. You can also ask Claude to "open a preview of index.html." Then check:

   • Accuracy. Read every sentence. Did the agent add anything you didn't write, like a made-up award, a university you didn't attend, or an extra link? Agents fill gaps with plausible fiction.
   • Phone width. Narrow the browser window until it's phone-sized. Is the text still readable? Does the navigation still work?
   • Links. Click every one.
   • Taste. Is there anything you'd be embarrassed to show a professor? That goes on your revision list.

   Mark step done
7. 6Commit and push your first versionSave a version, then send it to GitHub

   1. Switch to GitHub Desktop. The Changes tab lists the new files. Click one to see its diff (green = added lines).
   2. In the Summary box (bottom left), describe the change, e.g. Add first version of personal site.
   3. Click Commit to main. This creates a version on your laptop that you can always return to.
   4. Click Push origin (top bar). This sends your commits to GitHub.

   Commit ≠ push. A commit saves a version locally. Nothing reaches GitHub, or your live site, until you push.

   You're ready when: on github.com, your repo shows index.html and your commit message.

   Mark step done
8. 7Turn on GitHub Pages and visit your siteOne setting, then wait a few minutes

   1. On github.com, open your repo → Settings → Pages (left sidebar).
   2. Under Build and deployment, set Source to Deploy from a branch. Set Branch to main and folder to / (root), then click Save. Your username.github.io repo may already be set up this way.
   3. Wait. It can take up to 10 minutes. The Pages settings page shows the address once the site is live.
   4. Visit https://YOUR-USERNAME.github.io. Open it on your phone too.

   You're ready when: your page, not the README, loads at your address.

   Mark step done
9. 8Improve it (optional, recommended)Specific requests, reviewed, then committed

   Your site is live, which is all the assignment needs. To make it better, repeat the loop: describe → review → revise → commit → push. Make one change at a time, and commit each one, so you can always go back. Click a suggestion to copy it, or write your own:

   Fix one thing only Interests as tags Accessibility check Add a “Now” section Audit for invented content Undo last change Explain my files

   After each revision: refresh the page in your browser and check it. If you like the change, commit with a clear message (Show interests as tags, not update) and push. If you don't, reject the change, or ask the agent to undo it.

   Mark step done

You are the reviewer

Stuck?

First ask your agent. Describe exactly what you see: "GitHub Desktop says 'rejected — fetch first'. What does that mean, and what should I click?" Then check here, then ask a neighbor, then raise your hand.

Words you'll hear

Repository (repo)

A project folder whose history Git tracks. Yours lives both on your laptop and on GitHub.

Clone

Copy a repo from GitHub to your laptop, keeping them connected.

Commit

A saved version with a message describing what changed. Like a save point in a game.

Push

Send your new commits from your laptop up to GitHub.

Pull / Fetch

Bring changes from GitHub down to your laptop.

Branch main

The main line of your project's history. Today you only use this one.

Diff

A view of exactly which lines were added (green) or removed (red).

GitHub Pages

GitHub's free hosting: it turns the files in a repo into a public website.

Permission mode

How much the agent may do without asking you first. Start cautious.

HTML / CSS

HTML is the content and structure of a page; CSS is how it looks. Both are plain text files.