Getting Started with Claude Code

Everything I wish someone had told me when I started. This guide takes you from zero to a live website, built with AI, deployed on the internet, under your own domain. No prior coding experience needed.

1 Where to run Claude Code

You can use Claude in the browser or the desktop app - and that's great for conversations, writing, and analysis.

But Claude Code is different. It runs in the terminal - a text-based window where you type commands and your computer executes them. Think of it as texting your computer instead of clicking around. It looks old-school, but it's the fastest way to build things.

When Claude Code runs in the terminal, it can see your files, create new ones, run your website locally, and push code online. It's not just chatting - it's doing.

2 Pick a terminal

Your Mac already has one (it's called Terminal, lives in Applications → Utilities). But there are better options:

• Kaku - the one I use. Clean, fast, good defaults. Just install and go.
• Warp - popular, has AI built in. Good if you want a more visual experience.
• Mac Terminal - already on your machine. Works fine to start with.

3 Install Claude Code

First, you need Node.js - it's a tool that lets you run JavaScript and install packages like Claude Code. Go to nodejs.org, download the LTS version, and run the installer. Takes 2 minutes.

Once that's done, open your terminal and install Claude Code:

# Install Claude Code
npm install -g @anthropic-ai/claude-code

Now create a folder for your project and start Claude Code inside it:

# Create a project folder and go into it
mkdir my-first-site
cd my-first-site

# Start Claude Code
claude

That's it. You're now talking to Claude inside your project folder. It can see your files (there aren't any yet), create new ones, and run commands.

4 Build your first site

With Claude Code running, just tell it what you want in plain English:

You: Build me a simple personal website. Dark background,
my name is Alex, I'm a photographer based in Stockholm.
Include a short bio and links to my Instagram and email.

Claude will create the files, explain what it's doing, and ask if you want changes. You can keep iterating:

You: Make the font bigger. Add a photo grid section.
Change the background to dark blue instead of black.

To see your site locally, ask Claude or run:

npx serve .
   ┌─────────────────────────────────────┐
   │   Serving!                          │
   │   Local: http://localhost:3000      │
   └─────────────────────────────────────┘

Open that URL in your browser. There's your site.

5 Save your code on GitHub

GitHub is where your code lives online. Think of it as Dropbox for code, but with superpowers: it tracks every change you make, so you can always go back to a previous version. If your laptop dies tomorrow, your code is safe.

Set it up:

1. Create a free account at github.com/signup
2. Install the GitHub CLI (makes everything easier):

# Install GitHub CLI
brew install gh

# Log in (opens browser, follow the steps)
gh auth login

Now push your project to GitHub:

# Inside your project folder:
git init
git add .
git commit -m "first version"
gh repo create my-first-site --public --source . --push

Your code is now on GitHub. You can see it at github.com/yourusername/my-first-site.

6 Put it on the internet with Vercel

Vercel takes your code from GitHub and turns it into a live website. Free for personal projects.

1. Go to vercel.com/signup and sign in with your GitHub account
2. Click "Add New Project"
3. Select your my-first-site repository
4. Click "Deploy"

That's literally it. Vercel gives you a URL like my-first-site-abc123.vercel.app. Your site is live.

Some people use Cloudflare Pages instead. It works too. But Vercel is simpler to start with and the free tier is generous.

7 Add your own domain

A .vercel.app URL works, but you probably want yourname.com. That's where Porkbun comes in - they sell domain names without the usual upsell circus.

Buy your domain:

1. Search for your domain on porkbun.com and buy it (usually $10-15/year for a .com)
2. You now own the name. But it doesn't point anywhere yet.

Connect it to Vercel:

1. In Vercel, go to your project → Settings → Domains
2. Type your domain (e.g. yourname.com) and click Add
3. Vercel shows you DNS records to add - usually something like this:

Vercel will typically ask you to add one of these:

# Option A: A record (points to an IP address)
Type: A
Host: @ (means "the root domain")
Value: 76.76.21.21

# Option B: CNAME record (points to another domain)
Type: CNAME
Host: www
Value: cname.vercel-dns.com

Add them in Porkbun:

1. Go to Porkbun → your domain → DNS Records
2. Add the records exactly as Vercel showed you
3. Save and wait 5-10 minutes

That's it. Go back to Vercel - it checks automatically and shows a green checkmark when it's connected. Your site is now live at your own domain, with free SSL (the padlock in the browser).

8 Keep your secrets safe

This is the one thing that can actually cost you money if you get it wrong.

Many services give you API keys - secret passwords that let your code talk to their services. If someone gets your key, they can use it and you get the bill. People have lost thousands of dollars from accidentally leaking keys.

The rule is simple: Never put API keys directly in your code. Put them in a separate file called .env.local that stays on your machine and never gets uploaded.

How to create the file: The easiest way? Tell Claude Code to do it. Just say:

You: Create a file called .env.local with these keys:
OPENAI_API_KEY=sk-abc123...
STRIPE_SECRET_KEY=sk_live_...

Claude Code creates the file for you. Done. You can also do it manually in the terminal:

# Create .env.local in your project folder
touch .env.local
open .env.local

This opens it in a text editor where you paste your keys, one per line:

# .env.local — this file stays on YOUR machine
OPENAI_API_KEY=sk-abc123...
STRIPE_SECRET_KEY=sk_live_...

Now you need to tell Git to ignore this file so it never gets uploaded. Same deal - tell Claude Code "add .env.local to .gitignore" or create it yourself:

# .gitignore — tells Git which files to NOT upload
.env.local
.env
node_modules

Your project should look something like this:

9 The daily workflow

Once everything is set up, your workflow looks like this:

# Open your terminal, go to your project
cd my-first-site

# Start Claude Code
claude

# Tell it what to build or change
"Add a contact form that sends emails to me"

# When you're happy, save and push
git add .
git commit -m "added contact form"
git push

# Vercel auto-deploys. Your site is updated.

That's the whole loop. Write with AI, push to GitHub, it's live. Every change is tracked, every version saved.

You're set.

You now have a working setup that actual developers use. Claude Code for building, GitHub for version control, Vercel for hosting, Porkbun for domains. No unnecessary complexity, no subscriptions you'll forget about.

Start simple. Build something small. Then build something bigger. The tools grow with you.

← Back to toolkit ☀️ AC0 AI 📓 Field Notes