How to run your own website.

Before you change anything, it helps to know what you're changing. The whole thing is only three parts.

• Your computer A folder called tobinchang. Just ordinary files. This is your workbench — mess it up freely.
• GitHub A free website that stores your folder online. It keeps every version you've ever saved.
• tobinchang.com What other people see. GitHub rebuilds it about a minute after you send it changes.

So: you change files in the folder on your computer. You send those files to GitHub. GitHub puts them on the internet.

Sending your files to GitHub is called pushing. That's the only bit of jargon in this paragraph, and you'll see it a lot. It just means "send it up."

GitHub is the free service that stores your website and puts it online. You only do this once.

1. Go to github.com/signup.
2. Choose your username carefully. It shows up in web addresses, anyone can see it, and changing it later breaks links. Pick something you'd be happy for a stranger — or someone hiring you one day — to read.
3. Use an email address you'll still have in five years.
4. Turn on two-factor authentication when it offers. That means logging in needs your password and a code from your phone. It's the difference between an account you own and an account you used to own.
5. Tell Uncle Jimmy your username. He'll give you permission to make changes to the site — without that, the last step of every edit won't work.

The Terminal is a window where you type instructions to your computer instead of clicking things. It looks intimidating. It isn't. You'll use about five instructions total, and your AI helper does everything else.

1. Hold ⌘ and press Space.
2. Type Terminal.
3. Press Return.

A window opens with a blinking cursor. When this manual shows a black box with an orange $ in front, type the part after the $ and press Return. Don't type the $ itself — it's just there to show you where the instruction starts.

Try one. This one asks "which folder am I in right now?"

pwd

It'll print something like /Users/tobin. That's your answer. Nothing was changed, nothing broke. That's most of what the Terminal is like.

One thing to install first

Your AI helper needs a free program called Node. Check whether you already have it:

node --version

If that prints a number like v22.19.0, you're set — skip ahead. If it says command not found, go to nodejs.org, download the button marked LTS, and install it like any other app.

This is the part that makes everything else possible. Your helper reads your files, writes the code, and saves your work — you just describe what you want in normal English.

Pick one of these. They do the same job. You can switch later.

• Claude Code

  made by Anthropic

  npm install -g @anthropic-ai/claude-code

  Once it's installed, you start it by typing claude.

• Codex

  made by OpenAI

  npm install -g @openai/codex

  Once it's installed, you start it by typing codex.

Installing takes a minute or two and prints a lot of text. That's normal — you don't need to read it. The first time you start it, it'll open your browser and ask you to sign in. That also only happens once.

Right now your website only exists on GitHub. You need your own copy on your computer to work on. Downloading that copy is called cloning.

Run these one line at a time, pressing Return after each.

First, move into your Documents folder. cd means "change directory", and directory is just another word for folder. The ~ symbol means your own home folder.

cd ~/Documents

Now download the website:

git clone https://github.com/thirstypig/tobinchang.git

That creates a folder called tobinchang. Step into it:

cd tobinchang

And start your helper:

claude

You're in. Your helper can now see every file on your website, and you can start talking to it like a person.

Every change you will ever make follows the same three beats. Learn this rhythm and you never have to memorise a command again.

• 1 · AskTell your helper what you want, in normal words.
• 2 · LookOpen the site on your own computer and check it with your eyes.
• 3 · ShipAsk your helper to send it to GitHub. A minute later it's live.

Looking before you ship

Never put something on the internet you haven't looked at. To see your site privately on your own computer, open a second Terminal window and run this:

cd ~/Documents/tobinchang && python3 -m http.server 3130

That's two instructions joined together — the && just means "and then". It moves into your folder, then starts a little private web server.

Now open localhost:3130 in your browser. That's your website, running only on your machine, where nobody else can see it. Refresh the page after each change. When you're done, click that Terminal window and press Ctrl + C to stop it.

Shipping it

You don't need to learn any of the saving commands. Just ask, in the window where your helper is running:

• Ship it Copy

  Save these changes with a clear message and send them to GitHub.

Saving a snapshot like that is called making a commit. Sending it up is the push from Station 00. Your helper does both.

Wait about a minute, then open tobinchang.com. Your change is on the internet.

Let's do the smallest real edit there is, start to finish, so you've been round the whole loop once.

1. Open the Terminal. Type cd ~/Documents/tobinchang, then claude.
2. Copy the prompt below, paste it in, and press Return.
3. Read what it says it's about to do. If it looks right, let it go ahead.
4. Check it at localhost:3130.
5. Ask it to save and send.

• Your first edit Copy

  Open the home page and change the big heading to say "Hi, I'm Tobin." Keep the fonts and colours exactly as they are. Show me the change before you save it.

That's the whole job. Everything else you'll ever do on this site is a bigger version of those five steps.

Remember the rule from Station 00: a folder with an index.html inside it becomes a page.

Here's how that looks in your actual folder:

tobinchang/
├── index.html          → tobinchang.com
├── howto/
│   └── index.html      → tobinchang.com/howto
├── music/
│   └── index.html      → tobinchang.com/music
└── assets/
    └── manual.css      → the file that controls how it all looks

You don't have to make those folders yourself. Describe the page you want and let your helper build it:

• New page Copy

  Make a new page at /music where I can write about songs I like. Use the same fonts, colours and styling as the rest of the site so it matches. Put three made-up entries on it so I can see how it looks, and add a link to it from the home page.

• New page — projects Copy

  Make a new page at /projects that lists things I've built. Each one needs a title, a short description, and a photo. Match the style of the rest of the site, and use grey boxes where the photos will go until I have real ones.

A prompt is just an instruction you type. Vague prompts get vague results — not because the helper is stupid, but because you left it guessing.

The four ingredients

• What — the thing you want changed.
• Where — which page, or which part of the page.
• How it should feel — calm, loud, funny, serious, simple.
• What not to touch — the stuff you already like.

Weak, then strong

• Weak — nothing here to act on

  make the site better

• Strong — nothing left to guess Copy

  On the home page, the text under my name is hard to read on a phone. Make it bigger and put more space between the lines. Don't change the colours or the heading.

Three habits worth having

• Ask for one thing at a time. Five changes in one prompt means five things that can go wrong at once, and you won't know which one did.
• Say "show me first" when you're unsure. You can always approve it after you've read it.
• If it comes out wrong, say what's wrong — don't start over. "Close, but the spacing is too tight" gets you there much faster than rewriting the whole prompt.

Copy these straight into your helper. Change the words to suit what you actually want — they're starting points, not magic spells.

Everyday edits

• Change some words Copy

  On the home page, change the sentence about what I do so it says I'm learning guitar and I play basketball. Keep the same tone and don't change anything else.

• Add a photo Copy

  I put a photo called me.jpg in the assets folder. Add it to the home page under the heading, make it round, and keep it a sensible size on phones.

• Add a link Copy

  Add a link at the bottom of every page that goes back to the home page. Make it small and quiet, not a big button.

Making it look better

• Fix it on phones Copy

  Check every page on a phone-sized screen and fix anything that runs off the edge, overlaps, or is too small to read. Don't redesign anything — just make what's already there work properly.

• Try a new look Copy

  Show me three different colour schemes for the site. Keep the layout and fonts the same, only change the colours. Describe each one before you build it so I can pick.

• Give it room Copy

  The home page feels cramped. Put more space between the sections so it feels calmer, without making the text smaller.

Understanding your own site

• Get your bearings Copy

  Give me a tour of this website. What files are here, what does each one do, and which one do I edit if I want to change the home page?

• Explain it to me Copy

  Explain what you just changed and why, like I'm new to this. Point out the bit I'd need to edit if I wanted to tweak it myself later.

• What have I changed? Copy

  What have I changed since the last time I sent anything to GitHub? List it in plain English, not code.

Shipping and safety

• Ship it Copy

  Save these changes with a clear message and send them to GitHub.

• Check before shipping Copy

  Before I send this — check every page for broken links, missing images, and spelling mistakes. Tell me what you find and don't fix anything yet.

• Privacy check Copy

  Look through the whole site for anything personal I shouldn't be publishing — my address, phone number, school name, email, or anything a stranger could use to find me. List anything you find.

It will break. That's normal, and it isn't a sign you're doing it wrong — it's the actual job.

Here's the thing worth knowing: nothing you do here is permanent. GitHub keeps every version you've ever saved, so any mistake can be undone.

• Undo everything since my last save Copy

  Undo all the changes I've made since my last save and put the files back how they were. Tell me exactly what you're about to throw away first.

• Go back one step Copy

  My last change broke the site. Show me what the previous version looked like and put it back.

• Explain an error Copy

  I got this error and I don't understand it. Explain what it means in plain English, then tell me how to fix it: [paste the whole error here]

• The site didn't update Copy

  I sent my changes but tobinchang.com still shows the old version. Check whether it actually sent and whether the site rebuilt, and tell me what went wrong.

Short list. Worth taking seriously.

• The internet is permanent. Once something is published, assume a copy of it exists somewhere forever — even after you delete it. Post accordingly.
• No personal details. Your address, phone number, school, birthday, and daily schedule don't belong on a public page. A first name and a rough location is plenty.
• Never type a password or a key into a file. Not into your site, not into a chat with your helper, not anywhere. If something asks you to, that's your signal to stop and ask.
• Read before you say yes. Your helper asks permission before it does anything real. Actually read what it's proposing. That pause is your safety net, and skipping it is the one habit that gets people into trouble.
• Other people's photos need permission. Friends, family, anyone. Ask first. Same goes for music, art, and writing that isn't yours.
• If something feels off, stop. A strange pop-up, an unexpected request to sign in, an email about your account you weren't expecting. Close it and ask. Being wrong costs you nothing; being right matters a lot.

Words people will use around you. None of them are as complicated as they sound.

repo

Short for repository. The folder holding your whole website, including its history.

clone

Download your own copy of the repo onto your computer.

commit

Save a snapshot of your changes, with a note about what you did. Like a checkpoint in a game.

push

Send your saved snapshots up to GitHub. This is the step that puts things on the internet.

pull

Bring down changes someone else made, so your copy is up to date.

branch

A side copy where you can try something risky without touching the real site.

deploy

The automatic process that turns your files into the live website after you push.

localhost

Your own computer pretending to be a web server, so you can preview privately.

terminal

The window where you type instructions instead of clicking buttons.

prompt

What you type to your AI helper. An instruction in plain English.

HTML

The kind of file that holds a page's words and structure.

CSS

The file that decides how it all looks — colours, fonts, spacing.