WF07
Build Your Own Website
Claude Code · GitHub Pages · No coding required
Weeks12 – 13
OutputLive website
HostingGitHub Pages (free)
AssignmentA live personal portfolio site on GitHub Pages — about page, at least one project, and a resume. You direct; the agent builds. Share the public URL.
Setup
→
Plan
→
Claude Chat
→
Claude Code
→
localhost
→
GitHub
→
Live
00
Set Up Your Machine
One-time installs. Work through them in order.
- Claude Desktop — claude.com/download. Includes Claude Code. Requires a paid plan (Pro or above).
- GitHub account — github.com. Free. This is where your site lives.
- Git for Windows — git-scm.com. Click Next through the installer; leave all defaults.
01
Gather Your Material
- A short about text — who you are, what you do.
- Your resume file.
- A few project images — three to six to start.
Resize images before you build. Print-resolution exports are far too heavy for the web.
- Feature images: 1600–2000 px on the long edge, under 500 KB.
- Gallery images: 1000–1200 px, under 300 KB.
- Format: JPG for photos and renders; PNG only for transparent backgrounds.
Too-large exports? Ask Claude Code to batch-resize them in Step 3.
02
Write the Spec in Claude Chat
CHAT
Open a Claude chat (not the Code tab) and talk through your site — pages, sections, style. When you have a clear plan, ask Claude to write it into a file called BUILDSPEC.md.
Create a new folder on your computer and save BUILDSPEC.md inside it. This folder becomes your website.
Chat is for planning — nothing is built yet.
03
Build in Claude Code
CODE
Open Claude Desktop → Code tab → Local → select your folder. Tell it to read BUILDSPEC.md and build the site.
Iterate in plain language: "make the header bigger," "use a darker background." Code edits the real files in your folder.
04
Preview Locally
localhost
Claude Code runs a live preview inside the app. You can also open localhost:3000 in your browser for a full-size view.
The preview only works while Claude Code is running — your files aren't hosted anywhere yet. Step 5 fixes that.
05
Publish to GitHub
GitHub
Create an empty repository on GitHub. Click + → New repository, name it my-portfolio, leave all defaults, click Create repository. Don't add any files.
Push from Claude Code. Copy the repo URL (e.g. https://github.com/yourname/my-portfolio.git) and type:
Commit all my files and push to https://github.com/yourname/my-portfolio.git
Enable GitHub Pages. In your repo on github.com: Settings → Pages → deploy from main branch, root folder.
06
Your Site Is Live
Your site is now public at yourname.github.io — the same files as your local preview, but hosted in the cloud permanently.
To update: make changes in Claude Code, then ask it to commit and push. Your live site refreshes.
What is Git?
Git keeps a history of every saved version of your files — like version history in InDesign or Photoshop, but for your whole project folder, and the snapshots are deliberate. Instead of site_final_v2_REALLY_final, you keep one folder and Git remembers each saved state, so you can always go back.
Three names that get mixed up:
- Git tracks the snapshots, on your own computer.
- GitHub stores a copy online, so it's backed up and shareable.
- GitHub Pages turns the files in your GitHub repo into a live public website, free.
You won't operate Git by hand — Claude Code does the snapshots and uploads. You just need the idea: deliberate saves you can return to, backed up online, served as a site.
Chat vs. Code
You used two different tools in this workflow, and the difference is the point:
- Claude Chat is for deciding. Thinking through what you want, planning, writing the spec. No files are touched.
- Claude Code is for doing. It works on the real files in your folder — building, editing, resizing, publishing.
The BUILDSPEC.md file is the handoff between them: you figure out what in Chat, then Code makes it real.