Build a Personal Website With v0 — No Code Needed
In this guide, you will design and ship a real, live personal website in one evening — no coding, no templates, no designer — using v0, Vercel's AI design tool. You'll describe what you want in plain English and watch it generate a working site, then learn the part most people skip: how to guide the AI so the result looks intentional instead of generic, fill it with content that actually gets you hired or found, and deploy it to your own custom domain. By the end you'll have a polished portfolio at a real URL, plus a repeatable process you can use to spin up any small site in an hour.
This tutorial is sponsored by v0.
Difficulty: ★☆☆☆☆ (If you can describe what you want in a sentence, you can do this — zero code required)
Required Tools: A free v0 account + your content (bio, projects, links) + optionally a custom domain
Updated: July 2026
Overview
The old way to get a personal website was a bad set of choices: wrestle a template that never quite fit, pay a developer four figures, or learn to code first. v0 removes the tradeoff. It's Vercel's AI design tool: you describe the site you want in plain English, it generates a real, functioning website — actual responsive layout, real components, deployable code — and you refine it by chatting. No template to fight, no invoice, no HTML.
But "describe it and it appears" hides where the quality actually comes from. Anyone can type "make me a portfolio" and get a generic result that looks like every other AI-generated site. The difference between a site that says "made in five minutes by AI" and one that says "this person has taste" is entirely in how you direct the tool — the specificity of your prompts, the references you point it at, the order you polish in, and the content you feed it. That direction is the real skill, and it's most of this tutorial.
This article does four things. First, it gets you oriented in v0 and — crucially — makes you plan your content before you prompt, because the biggest mistake is prompting into a blank mind. Second, it walks the generation and iteration loop: the first prompt that sets the foundation, then the conversational refinement that turns generic into intentional. Third, it covers the content and polish that actually matter for a portfolio — what to put in each section, and the design refinements that make recruiters and clients take you seriously. Fourth, it ships the thing: deploy to a live URL and connect your own custom domain, so you end with a real website, not a preview.
The honest goal: by the end of this article, you have a live personal website at a URL you can put on your CV and in your bio — one that looks deliberately designed, not AI-defaulted. "I'll make a website someday" is not the goal. "Here's my site" — pasted into a chat tonight — is.
Who This Is Useful For
What You Will Learn
By the end of this article, you'll be able to do five things:
What You Need
Step 1 — Understand What v0 Is (And Isn't)
Thirty seconds of framing so you direct the tool instead of fighting it.
v0 is an AI design tool that generates real web code from descriptions. You chat with it the way you'd brief a designer — "a portfolio with a hero, an about section, a projects grid, and a contact form; modern and warm with an indigo accent" — and it produces an actual, working website you can see, refine, and deploy. Under the hood it's writing genuine responsive code (the same kind a front-end developer would), which is why the output is a real deployable site, not a screenshot or a locked template.
Two things follow from that, and they shape how you'll work:
The mindset that works: treat v0 like a fast, talented designer you're directing — not a search box you're querying. The quality of what you get back is a direct function of the quality of your direction, which is why the next step is about you, not the tool.
Step 2 — Plan Before You Prompt (The Step That Decides Quality)
The single biggest mistake is opening v0 with a blank mind and typing "make me a portfolio." A vague brief produces a generic site — not because the tool is weak, but because you gave it nothing specific to build. Five minutes of planning is what makes the difference, and it's all offline.
Decide four things before you type a word:
This five-minute plan is the brief. Everything downstream — the prompt, the iterations, the result — is only as good as this.
Step 3 — Write the First Prompt
Now the plan becomes a prompt. The goal of the first prompt is a strong foundation to refine — not a finished site. Pack your Step 2 plan into it, because specificity is what separates a distinctive first draft from a generic one.
A strong first prompt names the purpose, the sections, and the design direction in one go:
A personal portfolio website for a [your role], [your name].Sections:
Hero: my name, the line "[your one-line positioning]", and a "Get in touch" button
About: a short bio section with a photo on the side
Projects: a grid of project cards, each with a title, one-line description, and a link
Contact: my email and links to LinkedIn and GitHub Design: [minimal / bold / editorial], [warm neutrals with an indigo accent],
[big confident typography]. Clean spacing, fully responsive, with a dark mode toggle.
Notice what makes this work: it's the Step 2 plan, transcribed. The sections are listed, the design direction is in nameable terms, the positioning line is included. v0 generates from specifics, so specifics are what you feed it. A one-line "make me a portfolio" prompt would produce the beige average of every portfolio; this produces something shaped by your actual choices.
Send it, and v0 generates your foundation — a real, responsive site matching your brief. It won't be perfect. That's expected and correct — the next step is where good becomes great.
Step 4 — Iterate Conversationally Until It's Intentional
This is where generic becomes yours, and it's the step people underuse. You refine by chatting — each message a specific, single-purpose edit — and v0 updates the site in seconds. The skill is giving clear, one-thing-at-a-time directions, exactly like art-directing a designer.
Refine in this order — it's the sequence that compounds well:
1. Layout and structure first. "Make the hero full-height." "Move the about photo to the left." "Make the projects a 2-column grid instead of 3." Get the bones right before the paint.
2. Then typography. "Make the headings bigger and bolder." "Use a more elegant serif for headings, keep the body clean and sans-serif." Type carries more of the 'designed' feeling than people expect.
3. Then color and detail. "Deepen the accent to a richer indigo." "Add more breathing room between sections." "Give the project cards a subtle hover lift."
4. Then the extras. "Add a dark mode toggle." "Add smooth scroll to the nav links." "Add a subtle gradient behind the hero."
Two rules make iteration effective:
Five to ten of these small rounds is the difference between an obvious AI default and a site that looks deliberately designed. This iteration is the craft — budget more time here than on the first prompt.
Step 5 — Fill It With Content That Actually Works
A beautifully designed site with placeholder text or weak copy fails at its one job. Now replace every default with real content — and write that content to convert a visitor into an opportunity, not just to fill space.
Section by section, what actually works:
Feed this content to v0 by telling it directly — "change the about text to: [your bio]" — or edit in place. Getting real content in is what turns a design demo into your actual website.
Step 6 — Deploy to a Live URL
Your site exists in v0; now make it real on the internet. This is where a lot of "someday" websites die — people design and never ship. Don't. Deploying takes one click.
In v0, click Deploy (or Publish). It deploys to Vercel — Vercel's own hosting, which v0 is built on — and gives you a live URL like your-site.vercel.app. That's it: your site is now live on the internet, accessible to anyone, for free. You can share that URL immediately.
Two things worth doing right after your first deploy:
Step 7 — Connect Your Custom Domain
A vercel.app URL is real and shareable, but yourname.com is what makes the site feel like yours — and for a personal brand, that credibility is worth the small cost and 15 minutes.
The flow:
1. Get a domain. If you don't have one, buy it — Vercel can register it directly (easiest, one dashboard), or use any registrar (often cheaper). Pick something clean: yourname.com if available, or yournamedesign.com, yourname.dev, etc.
2. Add it in the Vercel dashboard. Open your deployed project → Settings → Domains → add your domain. Vercel walks you through it.
3. Point the DNS. If you bought through Vercel, this is automatic. If you used another registrar, Vercel shows you the DNS records to add there — copy them into your registrar's DNS settings. It's copy-paste, not code.
4. Wait for it to propagate. DNS changes take anywhere from a few minutes to a couple of hours. Then yourname.com serves your site, with HTTPS handled automatically.
Set up both yourname.com and www.yourname.com — Vercel will redirect one to the other, so visitors who type either land on your site instead of an error.
Common Mistakes to Avoid
Three patterns turn a great tool into a mediocre result.
Mistake #1: Prompting into a blank mind. Opening v0 and typing "make me a portfolio" with no plan produces a generic site every time — the tool builds what you brief, and a vague brief is a generic brief. The five minutes of Step 2 planning (purpose, sections, named design direction, real content) is what separates a distinctive site from a default one. Plan offline; then prompt.
Mistake #2: Accepting the first output. The first generation is a foundation, not a finished site — and stopping there is why so many AI-built sites look AI-built. The intentional look comes from Step 4's five-to-ten small iterations, especially on typography and spacing. Budget your time for refinement, not just generation.
Mistake #3: Never actually shipping. The most common failure isn't a bad site — it's a good site that never goes live because it's "almost ready." Deploy early (Step 6), share the URL, and keep improving the live version. A real site at a real URL, imperfect, beats a perfect draft nobody can see.
Going Further
Go deep with the Vibe Coding series. This tutorial is the fast, standalone version. If you want the full craft — using reference sites to polish design, building more complex pages, adding real backends and payments — the Vibe Coding series walks through building and shipping multiple real apps with v0 end to end. This got you a site tonight; the series makes you fluent.
Add pages as you grow. A single-page site is the right start, but v0 makes it easy to add a blog, a detailed project case study, or a dedicated contact page later. Just describe the new page and connect it to your nav.
Reuse the process for everything. The plan → prompt → iterate → deploy loop you just learned isn't portfolio-specific. Use it for a landing page for a side project, an event page, a link-in-bio replacement, a small business site. Once the process is muscle memory, any small site is an evening's work.
Keep it alive. A personal site's worst enemy is staleness — a projects list two years out of date reads worse than no site. Because updating is just another chat with v0 and a redeploy, make it a quarterly habit: new project, updated bio, ship. A site that's current is a site that's working for you.
Key Takeaways
Here's what you learned in this guide:
Your challenge, restated for the road: spend five minutes planning (purpose, sections, design direction, content), then open v0, write one specific first prompt, and don't stop iterating until it looks deliberately designed — and deploy it live tonight, even if it's not perfect. The moment you paste your real URL into a bio or an email is the moment "I should make a website" becomes "here's my site."