Setup guide · 2 hours · Mac

From a blank Mac to a live website

Ten steps. About two hours, most of which is waiting for downloads. This is the exact setup we use every day to build client sites, written for someone who has never opened a terminal. At the end you will have a real website of your own live on the internet at a real URL you can send to anyone.

What you are installing, and why

None of these are things you have to understand today. You just need them on the machine. Understanding comes later, from using them.

Tool	What it actually does	Cost
Homebrew	The app store for developer tools. Installs the rest with one command each.	Free
Node.js	The engine that runs website code on your own machine before it goes public.	Free
VS Code	Where you write and read code. Think of it as the studio.	Free
Claude Code	The AI that writes most of the code. You describe what you want, it builds it.	$20/mo
Git	Save points for your work. Lets you undo anything, forever.	Free
GitHub	Where those save points live online, so nothing dies with your laptop.	Free
Vercel	Puts your site on the internet. One command, real URL.	Free
Supabase	The database, for when your site needs logins or has to remember things.	Free

Before you start: four accounts

Do these in a browser first, about ten minutes total. Use the same email for all four so you never have to guess later.

01
github.com
Free. Pick a username you would be fine showing a stranger, it becomes part of your work address.
02
claude.ai
You need a paid plan. Pro at $20 a month is the right starting point. The free plan does not include Claude Code, which is the whole engine of this setup.
03
vercel.com
Free. Sign up with the Continue with GitHub button, not with an email and password.
04
supabase.com
Free. Same thing, sign up with GitHub. You will not need it on day one, but set it up while you are here.

First: how the Terminal works

Most of this guide happens in an app called Terminal. If you have never opened it, read this part properly. It is ten minutes that will save you the whole afternoon, and once you understand these eight things there is nothing else to learn about it.

Terminal is just a way of telling your Mac to do something by typing it instead of clicking it. Same computer, same files, no buttons. To open it: press Cmd + Space, type Terminal, press Return. It looks like this, and that last line is called the prompt:

Last login: Tue Aug 11 09:14:02 on ttys000

yourname@MacBook-Pro ~ %

The prompt means ready: That line ending in % with the blinking block after it means Terminal is waiting for you. If you cannot see it, Terminal is still busy working. Wait for it to come back before you type anything else.
You paste, you do not type: Every command here has a Copy button. Click it, click into the Terminal window, press Cmd + V, then press Return to run it. Never type these by hand. One wrong character and it will not work.
Nothing runs until you press Return: Pasting only puts the text there. Return is the button that actually does it. If a block has several lines, paste the whole block and press Return once, they run in order from the top.
Walls of text are good: When you run something, text will fly up the screen for a while. That is it working, not breaking. Let it finish. You will know it is done when the prompt comes back.
Passwords are invisible: When it asks for your Mac password, nothing appears as you type. No dots, no stars, nothing moves. That is deliberate, not a frozen screen. Type it and press Return.
Ctrl + C is the stop button: If something is running and you want it to quit, press Ctrl + C. That is Control, not Command. It is your escape hatch from anything.
Cmd + N opens a second window: You will need two windows open at once later on, one running your website and one for commands. They do not interfere with each other.
Closing it undoes nothing: Quitting Terminal does not uninstall anything or lose your work. A few steps below actually ask you to close it and open it again. That is normal and safe.

The install, step by step

Every step tells you which app you are in before it asks you to do anything. A dark block is a command: copy it, paste it into Terminal, press Return, and wait for the prompt to come back before the next one. Tick each step off as you go, this page remembers your place.

Open Terminal and try it

Where: Terminal

Press Cmd + Space, type Terminal, press Return. Keep this window open, you will be living in it for the next hour.

Run one harmless command first, just to feel the rhythm. Click Copy, click into the Terminal window, press Cmd + V, press Return.

Terminalpaste, then press Return

$ pwd

Worked ifIt prints the folder you are currently sitting in, something like /Users/yourname, then gives you the prompt back.

Install Apple's developer tools

Where: Terminal, then a popup

A free bundle from Apple that everything else is built on top of. It also gives you Git.

Terminalpaste, then press Return

$ xcode-select --install

Watch forA popup window appears on top of Terminal. Click Install, agree to the terms, then leave it alone for five to ten minutes. If instead it says the tools are already installed, you are fine, move on.

Terminalcheck it landed

$ git --version

Worked ifIt prints a version number like git version 2.50.1.

Install Homebrew

Where: Terminal

This is the one that makes every later install a single short command. It is also the longest one, give it a few minutes.

Terminalone long line, paste it all

$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Watch forIt asks for your Mac login password, and as you type it nothing appears on screen. Type it anyway and press Return. It also pauses once to show what it will install and asks you to press Return to continue.

When the prompt comes back, run these two lines so your Mac knows where Homebrew lives.

Terminal2 lines, paste both together

$ echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> ~/.zprofile$ eval "$(/opt/homebrew/bin/brew shellenv)"

Worked ifbrew --version prints a version number instead of saying command not found.

Install the tools

Where: Terminal

Four separate installs. Run these one line at a time, waiting for the prompt to come back between each, so you can tell which one failed if one does. Expect a lot of scrolling text. The third downloads VS Code into your Applications folder like any normal app.

Terminal4 commands, one at a time

$ brew install node$ brew install gh$ brew install --cask visual-studio-code$ brew install supabase/tap/supabase

Terminalcheck all three landed

$ node -v$ gh --version$ supabase --version

Worked ifYou get three version numbers back, and VS Code is sitting in your Applications folder.

Install Claude Code

Where: Terminal, then VS Code

The part that actually writes the code.

Terminalpaste, then press Return

$ curl -fsSL https://claude.ai/install.sh | bash

Do this nextQuit Terminal completely with Cmd + Q and open it again. It will not work until you do. This is the safe kind of closing, nothing is lost.

Terminalopens your browser to sign in

$ claude

Your browser opens on its own. Sign in with the account you paid for. Then back in Terminal, type /exit and press Return to leave Claude and get your normal prompt back.

Now add it to the app you will actually work in. Open VS Code, press Cmd + Shift + X for Extensions, search Claude Code, and install the one published by Anthropic. Sign in with the same account.

Worked ifclaude --version prints a version in Terminal, and a Claude panel appears down the side of VS Code.

Tell Git who you are

Where: Terminal

Every save point gets stamped with a name and email. Put your real ones in.

Edit firstAfter you paste this, change Your Name and the email to yours before you press Return. You can click into the pasted text and edit it with arrow keys like any text field.

Terminal3 lines, edit before Return

$ git config --global user.name "Your Name"$ git config --global user.email "you@example.com"$ git config --global init.defaultBranch main

Worked ifgit config --global user.name prints your name back at you. These three commands print nothing when they succeed, which is normal.

Connect to GitHub

Where: Terminal, then your browser

This logs your machine into GitHub once, so you are never asked for a password again.

Terminalasks you questions, read below

$ gh auth login

Watch forThis one is a conversation, not a single command. It asks a series of questions right there in Terminal. Move between answers with the up and down arrow keys and pick one with Return.

The answers, in order: GitHub.com, then HTTPS, then Yes to authenticate Git, then Login with a web browser. It shows you an eight character code. Copy it, press Return, and your browser opens. Paste the code there and approve it.

Worked ifgh auth status says you are logged in as your username.

Connect to Vercel

Where: Terminal, then your browser

Same idea, for the service that puts sites online.

Terminal2 lines, one at a time

$ npm install -g vercel$ vercel login

The second line asks how you want to log in. Arrow down to Continue with GitHub, press Return, approve it in the browser tab that opens, then come back to Terminal.

Worked ifvercel whoami prints your username.

Build your first site

Where: Terminal, VS Code, then your browser

Make a folder where all your projects will live, then create a real Next.js site inside it. Next.js is the framework we build every client site on.

Terminal3 lines, paste together

$ mkdir -p ~/code$ cd ~/code$ npx create-next-app@latest my-first-site

Watch forIt asks a handful of setup questions in Terminal, one after another. Press Return through all of them to take the defaults. If it asks to install a package first, say yes.

Now open the project in VS Code and start the site running.

Terminal3 lines, paste together

$ cd my-first-site$ code .$ npm run dev

ImportantAfter npm run dev the prompt will not come back, and that is correct. This command is your website running. It stays running until you press Ctrl + C. Leave this Terminal window alone from here on.

In your browser, go to http://localhost:3000. That is your site, running on your own machine. Only you can see it. Then open the Claude panel in VS Code and give it something real to do, like:

Replace the homepage with a landing page for my business. Big headline, a short paragraph about what we do, three cards, and a contact button. Dark background, clean type.

Watch it edit the files, then flip to your browser. The page updates on its own as it works.

Worked ifYour browser shows the page you asked for instead of the default Next.js one.

Put it on the internet

Where: A second Terminal window, then your browser

Read firstYour first Terminal window is busy running the site. Do not use it. Press Cmd + N to open a second Terminal window and do everything below in that one. A fresh window starts in your home folder, which is why the first line here moves you back into the project.

Terminal · new window3 lines, one at a time

$ cd ~/code/my-first-site$ gh repo create my-first-site --private --source=. --push$ vercel --prod

The last line asks a few questions. Press Return through all of them to take the defaults. When it finishes it prints a URL. That URL is live, right now, from anywhere in the world. Open it on your phone.

One last thing, and you only do it once. Go to vercel.com, open the project, find the Git settings, and connect it to your my-first-site repo on GitHub. From then on, every time you push your work, the live site updates by itself. That is the whole loop.

Worked ifThe URL Vercel printed opens your site on your phone, on cellular, with wifi off.

The loop, once you are set up

This is the actual rhythm of the work. It does not get more complicated than this, it just gets faster.

01Ask, look, saveAsk Claude for a change in VS Code, look at it in the browser, then save the point in Terminal with git add -A, git commit -m "what changed", git push. Do it every time something works, not at the end of the day.
02Commits are undoEvery commit is a moment you can return to. This is why breaking something is never actually a problem. Commit before you try anything risky.
03Paste the whole errorWhen Terminal turns red, select all of it, copy it, and paste the lot into Claude. Not a summary, the whole block. It reads those far better than you will for the first few months.
04Never put keys in codePasswords and API keys go in a file called .env.local, which is already set up never to leave your machine. If Claude ever writes a key straight into a file, tell it to move it.
05Make it explainAfter it builds something, ask "what did you just do and why". That single habit is the difference between having an AI build for you and actually learning to code.
06One folder per projectEverything lives in ~/code, one folder each. Never make a project inside another project.

Cheat sheet

All of these are typed in Terminal.

cd ~/code/my-first-siteMove into a project folder. Almost everything else only works once you are in one.

pwdTells you which folder you are currently in, when you have lost track

npm run devStart the site on your machine, at localhost:3000. Keeps running.

Ctrl + CStop whatever is running

code .Open the current folder in VS Code

claudeStart Claude Code in Terminal. /exit leaves it.

git statusSee what you have changed since the last save point

git add -AStage everything you changed

git commit -m "message"Make the save point

git pushSend it to GitHub, which updates the live site

vercel --prodDeploy manually

claude doctorCheck your Claude Code install when something is off

brew upgradeUpdate all your tools

When you get stuck

You will, on day one, probably at step 3 or step 7. That is not a sign of anything. The order to try things in: read what the error actually says, because about half the time it tells you the fix in plain English. Then select the whole error, copy it, paste it into Claude and ask it to fix it. Then ask a human if it is still stuck.

Do not spend an hour on a broken install. That is the one part of this where being stubborn buys you nothing.