~/haritha-nair

The Simplest Guide to Vibe Coding a Personal Website

10 min read
TechnologyAIWeb Development

When I built my personal website in 2020, I read a blog on how to create a WordPress site. Even as an engineer, I didn’t want the pain of setting up cloud hosting or designing a frontend just to write my random thoughts. I bought my domain from Hostgator, set up WordPress, and spent a week configuring everything just the way I wanted. Five years later, I rebuilt my personal website (this) in an hour or two.

I'm not a fan of how people call everything "vibe-coding," I prefer to call it agentic coding, because the hard work is usually in thinking through exactly what you want to build, being able to articulate it, and then passing it on to the agent. Here's the simplest guide to building an agentic-coded personal website from scratch to deployment. If you're a non-engineer, and even if you are one because honestly, many of us haven’t done a full deployment from scratch in years.

New to coding? If you've never used the command line or written code before, check out the detailed beginner setup guide at the end of this post before you start.

Step 1: Plan with AI

Go to Claude and talk about what you want to build. Share as much detail as you can. In my case, I described a minimal website that should have an about section, an essays section, and a few other pages, along with some reference websites for inspiration.

Ask Claude to create a simple-to-follow requirements document. Specifically say: "Give me step-by-step instructions so that each step is a logical end-to-end flow and can be tested and validated. Include validation steps for each stage. A given step shouldn't just be 'install all libraries'. Do not write code yet." This prompt works as of October 2025, and that keeps changing.

Step 2: Set Up Your Repository

Set up a repository locally and create a markdown file called instructions.md. Dump the document Claude created into that file. This becomes your project blueprint. Need detailed steps?

Step 3: Let AI Build It

Launch whatever AI coding agent you want to use — Cursor, Windsurf, or Claude Code. Ask it to follow the instructions file. It's better if you can supervise and let it complete each step one at a time (specifically say this and ask to stop and let you validate before moving on). The agent will come back and ask you for validation after each step. You validate, commit your code (super important), and repeat until you reach a state you like. Need detailed steps?

Step 4: Add Your Content

Update the content to what you need it to be. It's usually helpful to set everything up in markdown format for easy editing and version control.

Step 5: Deploy to Vercel

Push your code to GitHub and create a Vercel account. Set up a new project that connects to your GitHub repository. Vercel will automatically detect your framework and configure the build settings. Need detailed steps?

Step 6: You're Live!

That's it. You now have a unique URL that points to your website. Vercel provides this automatically.

Step 7: Backend and Environment Variables (Optional)

If you have a backend, that can also be configured on Vercel or Railway. I'll probably write another blog post about backend hosting.

Step 8: Connect Your Domain

Go to your domain provider (or buy your domain)—in my case, Squarespace—and add whatever configuration Vercel provided, such as A records, CNAME records etc. Use Claude or ChatGPT to walk you through this if you need help. It might take some time for the changes to propagate through. Need detailed steps?

Step 9: Done!

Enjoy your new website.

Beginner Setup Guide

If you're completely new to coding, this section will help you get everything set up before you start Step 1.

Install Git

Git is a tool that tracks changes to your code. Think of it like "Track Changes" in Microsoft Word, but for code.

For Windows:

  1. Go to git-scm.com
  2. Click "Download for Windows"
  3. Run the installer and click "Next" through all the options (the defaults are fine)

For Mac:

  1. Open Terminal (search for "Terminal" in Spotlight)
  2. Type: git --version
  3. If Git isn't installed, macOS will prompt you to install it

Install Node.js

Node.js lets you run JavaScript code on your computer (not just in a browser).

  1. Go to nodejs.org
  2. Download the LTS version (the one marked "Recommended for most users")
  3. Run the installer and follow the prompts

Install Cursor (Your AI Coding Agent)

Cursor is a code editor with AI built in. It has a free plan that's perfect for beginners.

  1. Go to cursor.sh
  2. Download and install it
  3. Sign up for a free account when prompted
  4. Launch Cursor

Verify everything is installed correctly:

  1. In Cursor, open the terminal: Terminal → New Terminal
  2. Type git --version and press Enter - you should see a version number
  3. Type node --version and press Enter - you should see a version number

If both commands show version numbers, you're ready to go! If not, restart Cursor and try again.

Sign Up for Free Accounts

You'll need these accounts (all free):

  • GitHub: Where your code will live - github.com
  • Claude: For the planning phase - claude.ai
  • Vercel: Where your website will be hosted - vercel.com

Step 2 Detailed

Create a project folder: On your desktop or documents folder, create a new folder called personalwebsite

Open in Cursor:

  1. Launch Cursor
  2. Go to File → Open Folder
  3. Select your personalwebsite folder

Open the terminal in Cursor:

  • Go to the top menu: Terminal → New Terminal
  • A terminal panel will open at the bottom

Initialize Git: In the terminal, type git init and press Enter. This tells Git to start tracking changes in this folder.

Create the instructions file:

  1. In the terminal, type touch instructions.md and press Enter (or just create a new file in Cursor)
  2. Click on instructions.md in the file explorer on the left
  3. Paste the entire plan Claude gave you, and save it (Ctrl+S or Cmd+S)

Make your first commit:
In the terminal, run:

git add instructions.md
git commit -m "Add project instructions"

This saves a snapshot of your work.

Back to Step 2

Step 3 Detailed

You should already have Cursor open with your project folder. Now let's use the AI to build your website.

Open Cursor's AI Chat:

  • Press Ctrl+L (Windows) or Cmd+L (Mac) to open the chat panel
  • Or click the chat icon on the left sidebar

Start the agent:
Type in the chat: "Please follow the instructions in instructions.md. Do one step at a time and wait for me to validate before moving to the next step."

What to expect:
You'll see the agent start creating files, installing packages, and writing code. Don't panic! This is normal. Files will appear in your project folder on the left, and you'll see changes happening in real-time. Just watch and let it work through each step.

Validate each step: After the agent completes each step, it will ask you to check if it worked. Look at what changed in your files, and if it looks good, type "looks good, continue"

Commit after each step:
After validating, open the terminal in Cursor (Terminal → New Terminal if it's closed) and run:

git add .
git commit -m "Complete step X"

(Replace X with the step number)

Repeat until all steps are done

What if something goes wrong?

  • Don't panic! Git saves all your work
  • You can ask the AI in the chat: "Something went wrong, can you help me debug?"
  • Or type git log in the terminal to see your history and git checkout [commit-id] to go back to a working state

Back to Step 3

Step 4 Detailed

Look for a content folder in your project (the AI probably created it). You'll find markdown files (.md files) - these are like text files with simple formatting.

Edit your content in Cursor:

  1. Click on any .md file in the file explorer on the left
  2. Edit the content directly in Cursor
  3. Markdown is easy - # Title makes a heading, **bold** makes bold text

Save and commit your changes:

  1. Save your files (Ctrl+S or Cmd+S)
  2. Open the terminal in Cursor
  3. Run: 
    git add .
git commit -m "Add my content"

Back to Step 4

Step 5 Detailed

Push to GitHub:

  1. Go to github.com and sign in
  2. Click the "+" button (top right) and select "New repository"
  3. Name it personalwebsite, leave it public, and click "Create repository"
  4. GitHub will show you commands to run. In the terminal in Cursor, run: 
    git remote add origin https://github.com/YOUR-USERNAME/personalwebsite.git
git branch -M main
git push -u origin main
    (Replace YOUR-USERNAME with your GitHub username)
  5. Refresh the GitHub page - you should see your code!

Deploy with Vercel:

  1. Go to vercel.com and sign up (use your GitHub account to sign in)
  2. Click "Add New Project"
  3. Click "Import" next to your personalwebsite repository
  4. Vercel will detect your framework automatically
  5. Click "Deploy" and wait about 2 minutes
  6. Vercel will give you a URL like personalwebsite-abc123.vercel.app - click it to see your live site!

Every time you make changes:

  1. Edit your files in Cursor
  2. Open the terminal in Cursor and commit your changes: 
    git add .
git commit -m "description of changes"
git push
  3. Vercel will automatically rebuild and update your site in about 1-2 minutes

Back to Step 5

Step 8 Detailed

Buy a Domain:

  1. Go to Namecheap or Squarespace Domains
  2. Search for your desired domain name
  3. Buy it

Connect it to Vercel:
This step looks scarier than it is — it's basically copy-pasting what Vercel gives you.

  1. In Vercel, go to your project settings
  2. Click "Domains"
  3. Type in your domain (e.g., yourname.com) and click "Add"
  4. Vercel will show you DNS records to add
  5. Go to your domain provider's DNS settings
  6. Add the records Vercel showed you (copy-paste exactly):
    • Usually an A record pointing to Vercel's IP
    • And a CNAME record for www
  7. Wait for the changes to propagate (usually 5-60 minutes)
  8. Your site will be live at your custom domain!

Don't know what DNS records are? Don't worry - you don't need to understand them. Just copy-paste exactly what Vercel tells you into your domain provider's settings. If you get stuck, ask Claude or ChatGPT: "How do I add DNS records on [your domain provider]?"

Back to Step 8