Primeros Pasos con Claude Code

1Where Claude Code actually runs

Claude Code does not run in your browser. It runs in something called a terminal: a plain text window where you type commands. Think of it as a more direct way to talk to your computer.

From the terminal, Claude Code can see your files, create new ones, run your site locally so you can preview it, and push your finished work online. Everything happens there.

2Pick a terminal

You need a terminal app. Here are three good options:

• Kaku -- the one I use. Clean, fast, good defaults. Just install and go.
• Warp -- popular, has AI built in. Good if you want autocomplete while typing commands.
• Terminal -- already on your Mac. Go to Applications → Utilities → Terminal. Works fine to start.

3Install Claude Code

Open your terminal and run this one command:

# Install Claude Code
curl -fsSL https://claude.ai/install.sh | bash

That is it. The native installer handles everything - no Node.js or npm needed. It also auto-updates in the background so you always have the latest version.

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

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

# Start Claude Code
claude

The first time you run claude, it will ask you to log in with your Anthropic account and choose a plan. The free tier works for getting started.

4Build your first site

Once Claude Code is running, just tell it what you want. Plain English. No special syntax.

You: Create a simple one-page website for my coffee shop.
      Name: Grounds, location: Malaga, Spain.
      Include a menu section and contact info.

Claude will create the files. Then follow up naturally:

Make the menu section bigger and add a hero image placeholder
Change the font to something warmer
Add a WhatsApp button in the corner

To preview your site in a browser while you work:

npx serve .
Serving at http://localhost:3000

Open that address in your browser. Every time Claude makes changes, reload the page to see them.

5Teach Claude about your project (CLAUDE.md)

The single biggest upgrade you can make is creating a file called CLAUDE.md in your project folder. It is a plain-English note that Claude reads at the start of every session. Stack you use, how you write, things to avoid, where the production site is. The more you put in here, the less you have to repeat yourself.

The fastest way to make one is to ask Claude:

You: /init

Claude will look around your project and write a starter CLAUDE.md for you. From there, edit it like a living document. A good one for a small website might look like:

# Project: Grounds Coffee

## Stack
- Plain HTML/CSS, no build step
- Hosted on Vercel, domain via Porkbun

## Brand voice
- Warm, short sentences. No emojis on the site.
- Always Spanish first, English second.

## Things to avoid
- No tracking scripts. No popups.
- Never commit anything from .env.local.

## Verify before claiming done
- Run npx serve . and load localhost:3000 to check the change.

Now every time you start claude in this folder, it already knows the rules. You stop sounding like a broken record.

6Save your code on GitHub

GitHub is like Dropbox for code, but smarter. It stores every version of your project, so you can always go back. And it connects to tools that put your site online automatically.

First, create a free account at github.com. Then install the GitHub CLI and log in:

# Install GitHub CLI (Mac)
brew install gh

# Log in to your GitHub account
gh auth login

Follow the prompts -- it will open a browser to confirm. Then push your project:

# Initialize git, stage all files, commit
git init && git add . && git commit -m "first version"

# Create repo on GitHub and push
gh repo create my-first-site --public --source . --push

7Put it on the internet with Vercel

Vercel is the easiest way to host a website. Sign up at vercel.com using your GitHub account. Then:

• Click Add New Project
• Select your repository from the list
• Click Deploy

That is it. Your site is live. Vercel gives you a free URL like “my-first-site.vercel.app” to share immediately.

From this point on, every time you push changes from your terminal, Vercel picks them up and redeploys automatically:

Cloudflare Pages is a solid alternative to Vercel. Same idea, also free, and the CDN is faster in some regions. Worth trying if you hit limits.

8Add your own domain

The vercel.app URL works, but a real domain looks more professional. Buy one at Porkbun -- most domains cost $10-15 per year, with free privacy protection included.

Once you have a domain, go to your Vercel project settings, find the Domains section, and add it. Vercel will show you two records to add:

# Records to add in Porkbun (DNS settings)
A record:    @ → 76.76.21.21
CNAME record: www → cname.vercel-dns.com

In Porkbun, go to your domain’s DNS settings and add those two records exactly as shown. Then go back to Vercel -- it will check automatically and confirm when the domain is connected.

9Keep your secrets safe

If your site uses any external service -- an AI API, a payment processor, a map, anything -- it comes with a key. Think of it like a password. If someone finds your key, they can use the service and you pay the bill.

The rule: never put keys in your code. Instead, create a file called .env.local in your project folder:

# .env.local -- never commit this file
ANTHROPIC_API_KEY=sk-ant-your-key-here
STRIPE_SECRET_KEY=sk-your-stripe-key
SOME_SERVICE_KEY=your-key-here

Then add .env.local to a file called .gitignore in the same folder:

# .gitignore -- files Git should never track
.env.local
node_modules/

Your project should look something like this:

10The daily workflow

Once everything is set up, your day-to-day looks like this:

# Go to your project folder
cd my-first-site

# Start Claude Code
claude

# Tell it what to build...
You: Add a booking form to the contact section

# When done, push to GitHub
git add . && git commit -m "add booking form" && git push

Vercel picks this up and deploys automatically

11Stop pressing Yes all the time

By default, Claude Code asks permission before doing anything -- writing files, running commands, etc. Useful when you are learning, but it gets old fast. Here are your options:

Option 1: Shift+Tab to auto-accept (recommended). Press Shift+Tab when Claude Code is running and it switches into auto-accept mode. It will do its work without stopping to ask. Press Shift+Tab again to go back to manual mode.

Option 2: Allowlist specific actions. You can tell Claude Code it is always allowed to do certain things. Create a file at .claude/settings.json:

{
  “permissions”: {
    “allow”: [
      “Bash(git:*)”,
      “Bash(npm:*)”,
      “Bash(npx:*)”
    ]
  }
}

Option 3: Skip permissions entirely. Run Claude with claude --dangerously-skip-permissions. It will never ask. Fine for a throwaway project, risky for anything real.

+What to learn next

Once the daily workflow feels normal, three things make Claude Code much more powerful. You do not need them on day one, but they are worth knowing about.

• Skills — small add-ons you install once and Claude can use forever. Examples: a token-saving skill, a code mapping skill, a design-review skill. Browse tools tagged in Field Notes for the ones we actually use.
• MCP servers — let Claude talk to external services (your database, calendar, Stripe, GitHub Issues) directly. Configure once in ~/.claude/mcp.json, then ask in plain English: show me the last 10 signups.
• Subagents — Claude can spawn smaller helper agents to do parts of a task in parallel. Most useful for long-running jobs (research, code reviews, batch fixes). They inherit your CLAUDE.md so they already know your project.

The fastest way to learn each of these is to try one when it makes sense. Do not chase them upfront. Build something boring first.

✓You’re set.

Here is what you now have running:

• A terminal where Claude Code lives
• Claude Code building your site from plain English instructions
• A CLAUDE.md teaching Claude how you work
• GitHub storing every version of your project
• Vercel deploying automatically on every push
• Your own domain pointing to it
• API keys stored safely, out of your code

That is the same stack professionals use. You just set it up from scratch without writing a line of code yourself.

From here, keep asking Claude to build things. The more specific you are, the better the results. When something breaks -- and it will -- just paste the error message into Claude and ask it to fix it.