AboutProjectsBlogLet's Talk
All posts
·7 min read

How to Get Your First Website Live

A step-by-step guide to building and deploying your personal website using Claude Code, VSCode/Cursor, and Vercel

TutorialClaude CodeWeb DevelopmentVercel

How to Get Your First Website Live

Using Claude Code, VSCode/Cursor, and Vercel

What You'll Need

Before starting, make sure you have:

  • A computer (Mac, Windows, or Linux)
  • An internet connection
  • An email address for creating accounts

Accounts to create (all free):

Step 1: Install Your Code Editor

You have two options — pick one:

Option A: Cursor (recommended for beginners — has AI built in)

  1. Go to cursor.com
  2. Click Download and install it like any other app
  3. Open Cursor and sign in (or create a free account)

Option B: VS Code (more established, huge community)

  1. Go to code.visualstudio.com
  2. Click Download and install it
  3. Open VS Code

Step 2: Install Node.js

Node.js is required to run modern web projects locally.

  1. Go to nodejs.org
  2. Download the LTS version (the one labeled "Recommended For Most Users")
  3. Run the installer — click through with all the defaults
  4. Verify it worked: open a terminal and type node --version — you should see a version number like v20.x.x

How to open a terminal:

  • Mac: Press Cmd + Space, type "Terminal", hit Enter
  • Windows: Press Win + R, type "cmd", hit Enter
  • In VS Code / Cursor: Go to Terminal → New Terminal from the top menu

Step 3: Install Claude Code

Claude Code is a command-line tool that lets you build with AI directly from your terminal.

  1. Open a terminal
  2. Run this command: 
    npm install -g @anthropic-ai/claude-code
  3. Once installed, run: 
    claude
  4. It will prompt you to log in — follow the link it gives you and authenticate with your Anthropic account
  5. When you see the Claude Code prompt >, you're ready

Step 4: Create Your Project

  1. In your terminal, navigate to where you want your project to live: 
    cd Desktop
  2. Create a new folder for your project: 
    mkdir my-website
cd my-website
  3. Start Claude Code inside that folder: 
    claude

  1. Now tell Claude what you want to build. Fill in the brackets with your details:
Build a personal branding website for:
Name: [YOUR NAME]
Role: [YOUR ROLE]
Audience: [FOUNDERS / CLIENTS / RECRUITERS / SPEAKING ORGANIZERS]
Primary goal: [BOOK CALLS / GET CLIENT LEADS / SPEAKING INQUIRIES / JOB
OPPORTUNITIES]
Style keywords: [MINIMAL, EDITORIAL, PREMIUM, CREATIVE, BOLD, CALM]
Inspiration references: [OPTIONAL]
Sections needed: [LIST]
Preferred colors: [OPTIONAL]
Tone of voice: [OPTIONAL]
Use Next.js, TypeScript, and Tailwind.
Make it responsive, accessible, SEO-friendly, and visually premium.
Use strong placeholder copy tailored to this positioning.
Create a site that feels distinctive and personal rather than template-based.
Before coding, decide:
- the visual system
- the page structure
- the component hierarchy
- the content strategy
Then implement the full site.
At the end, provide:
- file structure
- setup instructions
- customization guide
- suggested improvements
  1. Claude Code will generate your entire project. Watch it work — it'll create files, install packages, and set everything up.

Step 5: Preview Your Site Locally

Before publishing, see your site running on your own computer:

  1. Claude Code will usually tell you the command to run your site. It's typically: 
    npm run dev
  2. Open your browser and go to: http://localhost:3000
  3. You should see your website

If something looks wrong, go back to Claude Code and describe what you want changed:

The header is too large. Make it smaller and add my name "Al" as the logo.

Keep iterating until you're happy with it.

Step 6: Open the Project in Your Editor

  1. In VS Code or Cursor, go to File → Open Folder
  2. Select your project folder (my-website)
  3. You'll see all your files in the left sidebar
  4. In Cursor, you can also make changes by chatting with the AI using Cmd/Ctrl + L

Step 7: Push Your Code to GitHub

GitHub is where your code lives online. Vercel will connect to it to deploy your site.

First, create a GitHub account at github.com if you don't have one.

Then let Claude Code handle everything else. Inside your Claude Code session, just say:

Set up a new GitHub repository called "my-website" and push my code to it

Claude Code will:

  • Initialize Git in your project
  • Create the GitHub repository
  • Make your first commit
  • Push everything up

If it's your first time connecting to GitHub, Claude Code will walk you through authenticating. Follow the prompts — it takes about a minute.

Once done, refresh github.com and you'll see your code there.

Step 8: Deploy to Vercel

Vercel takes your GitHub code and puts it on the internet automatically.

  1. Go to vercel.com and click Sign Up
  2. Choose Continue with GitHub — this connects the two accounts
  3. Once logged in, click Add New → Project
  4. You'll see your GitHub repositories listed — click Import next to your project
  5. Vercel will auto-detect your framework (Next.js, etc.) — leave the settings as-is
  6. Click Deploy
  7. Wait about 60 seconds while Vercel builds and deploys your site

When it's done, Vercel gives you a live URL like:

https://my-website-al.vercel.app

Your site is live. Anyone in the world can visit that URL.

To connect a custom domain, go to your project in Vercel → Settings → Domains, search for the domain you want, buy it directly, and Vercel connects it automatically — no DNS configuration needed.

Step 9: Make Changes and Redeploy (The Magic Part)

This is where the workflow gets powerful. Every time you push code to GitHub, Vercel automatically rebuilds and redeploys your site. You never have to manually deploy again.

The update loop:

  1. Make changes using Claude Code or your editor
  2. Tell Claude Code to push your changes: 
    Push my latest changes to GitHub
  3. Vercel detects the push and redeploys automatically — usually within 30–60 seconds
  4. Your live site is updated

Bonus: The Visual Upgrade (The Skill Upgrade)

Now that your site is live, let's turn it into something that looks like a design studio spent a month on it.

1. In your terminal, install the skill:

npx skills add https://github.com/anthropics/skills --skill frontend-design

2. Paste this Master Prompt (don't change a word — it's engineered to break the rules):

Use the frontend-design skill to redesign my personal branding
homepage from scratch. This is NOT a refresh. Tear it down and
build something original.
WHAT IT IS:
A personal branding website. One person, their story, their work.
Audience: potential clients, collaborators, or employers who
Google my name and land here.
BREAK THESE RULES:
- No centered hero with headshot + "Hi, I'm [Name]" + button
- No card grids of portfolio projects in 3 columns
- No "About / Work / Contact" nav that looks like every other
personal site built since 2015
- No purple gradients, no hero background stock photos
AESTHETIC DIRECTION:
Go bold. Pick a direction and commit fully — don't hedge.
- Editorial / magazine: oversized type, aggressive layout
- Brutalist: raw, confident, unapologetically dense
- Cinematic: dark, dramatic, moody — feels like a film poster
- Organic + tactile: textures, warmth, handcrafted feel
This person should feel like someone worth knowing.
TYPOGRAPHY:
Two unexpected fonts that work together.
Display: condensed, expressive, or editorial.
Body: readable but not boring.
No Inter. No Roboto. No Space Grotesk.
LAYOUT:
- Break the grid at least once in a meaningful way
- Diagonal, overlap, or full-bleed elements
- The hero should stop someone mid-scroll
MOTION:
One showstopper animation on load.
Hover states that feel tactile and satisfying.
Scroll-triggered reveals that reward the reader.
GOAL:
Someone lands on this page and immediately thinks —
"This person is different. I want to know more."

3. Once Claude is done, tell it:

Push my latest changes to GitHub

Vercel will detect the change and update your live site within 30 seconds.

Troubleshooting

Claude Code won't start: Make sure you ran npm install -g @anthropic-ai/claude-code and are authenticated. Try running claude --version to check.

npm run dev gives an error: Ask Claude Code: "I'm getting this error when I run npm run dev: [paste the error]" — it will fix it.

Vercel build fails: Click on the failed deployment in Vercel to see the error logs. Paste the error into Claude Code and ask it to fix it, then push again.

Site looks different locally vs. on Vercel: This is usually an environment variable issue. Ask Claude Code to help you set up a .env file and configure it in Vercel's Settings → Environment Variables.

Quick Reference

TaskCommand
Start Claude Codeclaude
Run site locallynpm run dev
Push to GitHubTell Claude Code: "Push my latest changes to GitHub"

Built with Claude Code · Hosted on Vercel · Version controlled on GitHub

Back to all posts