← Back to the front page

jarrenchang.com — operator's manual

How to run
this site

Everything you need to change this website, add to it, and publish it yourself. You don't need to know how to code. You do need about an hour the first time.

00How this website actually works

Three things exist, and they hold copies of the same site. Once this clicks, the rest of the manual is just details.

  1. A folder on your laptop. This is where you make changes. Nobody else can see it.
  2. GitHub. A website that stores the folder online and remembers every version of it, forever.
  3. The live site. What the world sees at jarrenchang.com.

You edit the folder on your laptop. When you're happy, you push the changes to GitHub. GitHub notices, and about a minute later the live site updates by itself. That's the whole system.

The one rule to remember

A folder containing a file called index.html becomes a page on the site. The folder howto/ holds index.html — that's why you're reading this at jarrenchang.com/howto. Make a folder called music/ with an index.html inside, and you've made jarrenchang.com/music.

The site is built from plain files — no database, no software to keep updated, nothing that expires. Hosting is free. If you ignore it for two years it'll still be there.

01Get a GitHub account

GitHub is where the site lives. The account is free and takes a few minutes.

  1. Go to github.com/signup.
  2. Pick a username you'd be happy showing an employer. It appears in public links. Something close to your name is a safe choice; an old gamertag is not.
  3. Use an email address you'll still have in ten years. Not your UW address — universities close those after you graduate, and recovering a locked account without the email is genuinely painful.
  4. Turn on two-factor authentication when it offers. It takes two minutes and it's the difference between an inconvenience and losing the account.
  5. Send your username to Uncle Jimmy so he can give you access to the site.
Careful

Everything you put in a public repository is public — permanently, and often copied elsewhere within minutes. Don't commit your address, your phone number, your student ID, or anything with a password in it. Deleting it later does not remove it from the history.

02Open the Terminal

Terminal is an app that's already on your Mac. It lets you type instructions to the computer instead of clicking. It looks intimidating and isn't — you'll use about five commands total, and you can paste all of them.

  1. Press ⌘ + Space.
  2. Type Terminal and press Return.

A window opens with a blinking cursor. Try one to see that nothing bad happens:

pwd

It prints which folder you're currently in — "print working directory." That's the shape of everything here: you type a short command, press Return, it does one thing.

Worth knowing

Terminal won't ask "are you sure?" the way the rest of the Mac does. That's the only real difference. Stick to commands from this manual or from your AI helper and you won't hit trouble.

03Install your AI helper

This is the part that makes the whole thing workable. Instead of learning HTML, you describe what you want in plain English and the helper writes it. You still review it and decide whether to publish.

Pick one. Claude Code is what this manual assumes.

Claude Code

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

Codex (the alternative)

npm install -g @openai/codex

If either says npm: command not found, install Node first — it's a one-time thing:

brew install node
If you get a permissions error

A red wall of text mentioning EACCES or permission denied means the installer needs elevated rights. Put sudo in front and run it again — it'll ask for your Mac password, and nothing appears as you type it. That's normal. 

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

04Get the site onto your computer

You do this once. After today you'll never repeat it.

Paste these one at a time, pressing Return after each:

cd ~/Documents
git clone https://github.com/thirstypig/jarrenchang.git
cd jarrenchang

In order: move into your Documents folder, download the site from GitHub, then step inside the folder you just downloaded. Now start the helper: 

claude

The helper is now running inside your site's folder, which is what makes it useful — it can read every file, so you can refer to things by name and it knows what you mean.

Coming back later

Next time, you only need these two lines. There's no need to clone again. 

cd ~/Documents/jarrenchang
claude

05The everyday loop

Every change you ever make follows the same three steps.

1. Ask

Describe what you want, in normal sentences. The helper edits the files.

2. Look

Check it before anyone else sees it. In a second Terminal window:

cd ~/Documents/jarrenchang
python3 -m http.server 3140

Then open localhost:3140 in your browser. That's your private copy — it's running on your laptop and nobody else can reach it. Press Control + C in Terminal to stop it.

Why 3140?

Uncle Jimmy runs a lot of sites on one machine, and each one gets its own number so they don't collide. 3140 is yours. Tobin's is 3130. If you use someone else's number, one of you gets a confusing error.

3. Ship

When it looks right, publish it. You can simply ask:

Prompt

Commit these changes with a clear message and push them to GitHub.

Wait about a minute, then reload jarrenchang.com. Your change is live to the entire internet.

06Make your first change

Do this now — it's the fastest way to prove the whole chain works.

  1. Open Terminal, run cd ~/Documents/jarrenchang, then claude.
  2. Paste the prompt below and press Return.
  3. Read what it changed. It'll show you.
  4. Start the preview and look at localhost:3140.
  5. Ask it to commit and push.
Copy this

On the front page, change the sentence under my name so it says something that sounds more like me. Keep it to one or two lines and keep the existing style and formatting. Show me the change before you save it.

That's it. That's the entire job, forever. Everything after this point is a variation on those five steps.

07Make a whole new page

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

jarrenchang.com/
  index.html          →  jarrenchang.com
  howto/index.html    →  jarrenchang.com/howto
  photos/index.html   →  jarrenchang.com/photos     (once you make it)

You don't have to build that by hand. Ask:

Prompt

Make a new page at /photos for pictures I've taken. Match the fonts, colours and layout of the existing pages exactly, and add a link to it from the front page.

The "match the existing style" part matters. Without it you get a page that looks like it came from a different website.

Another one

Add a page at /about with a short bio and a photo. Use the same header and footer as the other pages so it feels like part of the same site.

08Write a prompt that works

The quality of what you get back tracks almost entirely with how specific you were. A good prompt has four ingredients:

  1. What you want changed.
  2. Where it is — a page, a section, a heading.
  3. How it should feel — shorter, warmer, more formal, funnier.
  4. What not to touch — the part people forget, and the part that prevents surprises.
Too vague

"make the site better"

Specific

"On the front page, make the list of ideas shorter — cut it to four items and keep the wording casual. Don't change the footer."

If the result isn't right, don't start over. Say what's wrong and it'll adjust — "that's too formal, make it sound more like a text message" works fine.

09The prompt pack

Copy these straight in. They're written to work as-is.

Everyday edits

Change words

Change the text under my name on the front page to say: "…". Keep the current formatting.

Add a photo

I've put a photo in the folder. Add it to the front page under the heading, at a sensible size, and make sure it still looks right on a phone.

Add a link

Add a link to my Instagram in the footer, styled the same as the existing links.

Making it look better

Phones

Open every page and check how it looks on a phone-sized screen. Fix anything that overflows, overlaps, or is too small to read.

Colours

Change the accent colour across the whole site from red to deep green. Update it everywhere so nothing is left behind, and make sure the text is still easy to read in both light and dark mode.

Spacing

The front page feels cramped. Add more breathing room between the sections without changing the fonts or colours.

Understanding your own site

Tour

Give me a tour of this site. What file is each page in, and what does each one do? Keep it short and skip the jargon.

Explain

Explain what the file assets/site.css does, in plain English, as if I've never seen code before.

What changed

What did I change the last three times I worked on this site?

Publishing and safety

Ship it

Commit everything with a clear message and push it to GitHub.

Check first

Before we publish — show me exactly what will change, and flag anything that might be a mistake.

Privacy sweep

Look through the whole site for anything personal I shouldn't be publishing — my address, phone number, email, school ID, or anything that looks like a password. List what you find.

10When something breaks

It will, and it doesn't matter. GitHub keeps every version of this site, so anything you break can be undone. You cannot permanently destroy it by making a mistake — that's the entire point of the system.

The site looks wrong

Prompt

Something looks broken on the front page. Find out what I changed most recently and fix it.

You want to undo everything since the last publish

Prompt

Undo all my changes since the last commit and put the site back exactly how it was.

An error message you don't understand

Prompt

I got this error and I don't know what it means. Explain it in plain English and tell me what to do: [paste the error]

The live site didn't update

Give it two minutes — publishing isn't instant. Then hard-refresh with ⌘ + Shift + R, which forces the browser to stop showing you its saved copy. If it's still wrong:

Prompt

I pushed a change but the live site hasn't updated. Check whether it actually published and tell me what went wrong.

Still stuck?

Text Uncle Jimmy. Tell him what you were trying to do and paste the error. That's a two-minute conversation, not an imposition.

11Rules of the road

  1. Assume anything you publish is permanent. Search engines and archives copy pages within minutes. Deleting something later doesn't reliably un-publish it.
  2. Keep your address, phone number and student ID off the site. An email address is fine if you're comfortable with strangers having it.
  3. Never paste a password or an API key into a file. If you think you have, tell Uncle Jimmy immediately — the fix is quick, but only if it happens straight away.
  4. Ask before posting photos of other people. Your friends didn't sign up to be on a public website.
  5. Read what the helper wants to do before approving it. It's very good and it's not infallible. If a change looks bigger than what you asked for, say so.
  6. Trust your gut. If something feels off — a strange login page, an email asking for your GitHub password — stop and ask. GitHub will never email you asking for it.

—Glossary

Every term in this manual, in one place.

repo
Short for repository. The folder holding your whole site, plus every past version of it.
clone
Download a copy of the repo from GitHub onto your laptop. You do it once.
commit
Save a snapshot of your changes with a short note about what you did. Like a save point in a game.
push
Send your commits up to GitHub. This is what makes changes public.
pull
Fetch changes from GitHub down to your laptop. You'll need this if someone else edits the site.
branch
A separate line of work, so you can try something without touching the live site. You may never need one.
deploy
The automatic step where GitHub takes your pushed files and puts them on the real website.
localhost
Your own computer, viewed through a browser. localhost:3140 is your private preview — no one else can open it.
terminal
The app where you type commands instead of clicking.
prompt
What you type to the AI helper. A clear one gets a good result.
HTML
The language describing what's on a page — headings, paragraphs, images.
CSS
The language describing how it looks — colours, fonts, spacing. All of this site's CSS is in assets/site.css.