How to Vibe Code a Website (Live URL in 5 Minutes)

So you've heard about vibe coding, you've maybe even watched somebody type "build me a portfolio site" into an AI tool and watched magic happen, and now you're wondering how to actually do this yourself. More specifically: how do you build a vibe coding website and end up with a real URL you can share, not just a preview window that disappears when you close the tab?

That last part is where most tutorials quietly tap out. The AI spits out code, the guide says "and now you have a website!" and you're left staring at an index.html file on your desktop wondering what comes next. I've been there. So this is the full playbook: prompt to public URL, with the tools compared honestly and the deployment step actually explained.

What is vibe coding (and why it changes website building)

Vibe coding is basically this: you describe the website you want, an AI writes the code, you tweak by chatting instead of editing, and you ship. The term took off after Andrej Karpathy's February 2025 X post describing "fully giving in to the vibes." It stuck because it captures the actual feeling - you're not really writing code, you're vibing with an AI that does.

For website building specifically, this is a big shift. The old options were:

• Learn HTML/CSS/JS (steep ramp).
• Use a drag-and-drop builder like Wix or Squarespace (locked-in, monthly fee, template-bound by default).
• Hire someone (expensive).

Vibe coding adds a fourth option that didn't really exist before: you get real, ownable code that looks the way you want, without having written a single line yourself. That's the unlock.

But here's the hidden gap nobody talks about: every "how to vibe code a website" guide stops at "look, the AI made code!" Getting that code online, on a real URL, is on you. And if you've never deployed anything before, that final mile can feel weirdly hard. We'll fix that here.

What you need before you start

Honestly, not much:

• An AI tool that generates websites. Free options include Claude, ChatGPT, Bolt.new, Lovable, v0.dev, and Base44. We'll compare them below.
• A way to host the output. This is the part most guides skip. You need somewhere to put the generated files so they live at a real URL.
• A clear idea of what you want. Purpose, audience, vibe (pun intended), and a rough list of sections. The clearer your prompt, the less back-and-forth.

That's it. No terminal, no Node install, no Git account, no domain purchase. You can do this from a Chromebook in a coffee shop, which is exactly where I'm writing this from.

The 5-minute vibe coding workflow (prompt to live URL)

Alright, let's break this down. Here's the workflow I actually use when I want to vibe code a website from scratch and get it live the same evening.

Step 1: Write a prompt that actually works

The single biggest mistake people make is being too vague. "Make me a portfolio site" gets you generic garbage. Try this template instead:

Build a single-page TYPE website for WHO YOU ARE / WHAT IT'S FOR.

Audience: WHO IS VISITING

Sections (in order): LIST SECTIONS

Style: PICK 2-3 ADJECTIVES + 1-2 REFERENCE SITES

Tech: Plain HTML, CSS, and vanilla JavaScript in a single index.html file. No frameworks, no build step. Use system fonts. Make it responsive on mobile.

Include: ANY MUST-HAVES - contact form, links, etc.

Here's a real one I used last week for a friend's photography portfolio:

Build a single-page portfolio website for Maya, a film photographer in Austin. Audience: art directors and potential clients. Sections: hero with name and tagline, gallery grid (6 placeholder images), short bio, contact email. Style: minimal, editorial, warm cream background and dark serif type, reminiscent of are.na and Cereal magazine's site. Tech: single index.html, vanilla CSS and JS, mobile responsive, no frameworks.

The "no frameworks, single file" line is doing a lot of work. It tells the AI not to give you a Next.js project with a tree of dependencies you can't deploy. You get one file you can literally drag onto any host.

Step 2: Generate the site

Paste your prompt into your tool of choice. Most of them will show a live preview alongside the code. Take a beat and actually look at it before iterating.

Step 3: Iterate with conversational refinements

This is where vibe coding really shines. You don't open a code editor - you just talk:

• "Make the hero text bigger and add more whitespace below it."
• "The gallery looks cramped on mobile, give it more breathing room."
• "Swap the serif font for something more like Inter."
• "Add a subtle hover state to the gallery images."

Two or three rounds usually gets you 90% of the way there. If the AI gets stuck in a loop or breaks something that was working, just say "revert that last change" or paste back the version you liked.

Step 4: Export the HTML/CSS/JS

This step varies by tool (see the comparison below), but the goal is the same: end up with a folder on your computer that contains your site. For a single-file site, that's just index.html. For a slightly fancier one, you might have an index.html, a styles.css, and an images/ folder.

Step 5: Drag and drop onto a host for a live URL

This is the part the guides skip. Open a hosting service that accepts a folder upload, drag your folder in, get a URL back. I'll cover one option I like below, but the workflow is the same regardless: folder in, URL out.

That's the whole loop. Prompt to public site, in literally minutes once you've done it once.

The best vibe coding website builder (tools compared)

I've messed around with all of these. Picking the best vibe coding website builder depends on what you want to build - a one-pager, an app, a Next.js component? Here's how they actually stack up, with no marketing fluff.

Free tier limits change often - check current terms before you commit to a tool.

A few honest observations:

• For a simple personal site or landing page, Claude Artifacts is hard to beat. Ask for one HTML file, copy it, done. No shade to the others, but this is the one that clicked for me.
• Bolt and Lovable are great when you want something more app-shaped, like a tool with state or a small backend. The tradeoff is the output is a real project you have to handle as one.
• v0.dev is powerful but really aimed at developers who already know Next.js. If that's not you, the export will feel like falling off a cliff.
• Base44 is the most "all in one" but also the most locked-in. Fine if you never plan to leave; rough if you do.

The pattern: the simpler the output, the easier the deploy. For most "vibe coding personal website" use cases, simpler wins.

How to export your code from each tool

The export step is where many people get stuck. Here's what actually works for each tool.

Claude (Artifacts)

Open the artifact, hit the copy button (or select all and copy). Open a plain text editor - TextEdit on Mac (set to plain text, not rich text), Notepad on Windows, whatever. Paste. Save as index.html. Done.

ChatGPT (Canvas or code blocks)

Same as Claude. Copy the code, paste into a plain text file, save as index.html. If ChatGPT split the output into separate HTML/CSS/JS, save each file with the right extension in the same folder.

Bolt.new

Top-right of the editor, there's a download button. Hit it, you get a zip. Unzip it. Important: if it gave you a Vite or React project, you need to run npm install and npm run build to get static files - which kind of defeats the no-code premise. This is why I tell the prompt "no frameworks" upfront.

Lovable

Two options. Export to GitHub (requires a GitHub account, and you'll get a full repo) or download the project zip. Same caveat as Bolt: if it built a framework project, you need a build step.

v0.dev

You can copy individual component code or "ship" to a Next.js project. There's no clean "give me static HTML" path. This is a power-user tool. If you're already comfortable exporting code from existing builders, you might also like my notes on how to export code from Webflow for a similar "get the static output and own it" workflow.

Base44

Their happy path is to host it on Base44. There's a code export option but you're somewhat fighting the tool.

If you're new to all this, the cleanest move is: prompt for a single HTML file, copy it out, save it locally. That's it.

How to host a vibe coding website free

Okay, you've got an index.html (and maybe a few other files) sitting in a folder on your desktop. Now what?

You need static site hosting. Translation: a service that takes your files and serves them at a public URL. Lots of options exist - Netlify, Cloudflare Pages, GitHub Pages - but most assume you're comfortable with Git, CLIs, or a deploy command. Which... if you just used an AI so you wouldn't have to think about that stuff, kind of misses the point.

Here's what I actually use, for what it's worth: Hostsmith. It's drag-and-drop static hosting. You take the folder with your site in it, drag it onto the dashboard, and you get a live URL on hostsmith.link. No terminal. No Git. No deploy command. No build step.

The free tier covers:

• 1 site
• 5,000 monthly visitors
• 5 MB upload limit (plenty for a vibe-coded single-page site - we're talking kilobytes, not megabytes for a text-and-CSS page)
• A hostsmith.link subdomain
• Hostsmith branding shown on the site

For a personal site, a resume page, or a "I built this in 5 minutes to share with my group chat" project, the free tier is totally enough. A quick note on that 5 MB cap: it's fine for most one-pagers, but if you're going image-heavy (a photo portfolio, say), compress your JPEGs first (tools like Squoosh or TinyPNG do this in your browser) or jump to the Basic tier, which bumps the headroom to 25 MB. And on visitors: if you blow past 5,000 in a month, you'll need to upgrade - the site won't disappear, but plan ahead if you're expecting traffic.

If you want more sites, custom domains, or to drop the branding, the paid tiers scale up from there - Standard gets you 5 sites, 100K visitors, and custom domains.

It pairs really well with vibe coding because the mental model matches: AI gives you files, you drag files onto a host, site is live. No context switch. I wrote more about this approach in drag-and-drop website hosting if you want the longer take, and how to host an HTML file online covers the single-file case specifically.

The step-by-step, in case it helps:

1. Sign up (email and password, nothing fancy).
2. Click "new site."
3. Drag your folder (or just index.html) into the upload zone.
4. Wait a couple seconds.
5. You get a URL like your-site.us.hostsmith.link (or your-site.eu.hostsmith.link, depending on region). Share it.

That's it. From AI prompt to live URL, once you've done it once, you really can run the whole loop in a few minutes.

Vibe coding a personal website (portfolio, resume, link-in-bio)

A vibe coding personal website is the perfect first project. They're small, the requirements are clear, and nobody else gets fired if you mess up. I'd argue everyone should have one - it's still the cleanest way to own your professional identity online, and vibe coding a personal website is now genuinely a one-evening task.

Some prompt templates that work well for a vibe coding personal website:

Portfolio. "Build a single-page portfolio for name, a role. Sections: hero, selected work (3-6 projects with image, title, one-line description, link), about, contact. Style: adjectives. Single HTML file, vanilla CSS, mobile-first."

Resume. "Build a single-page web resume for name. Sections: header with name and contact, summary, experience (reverse chronological), education, skills. Make it print-friendly with a clean print stylesheet. Single HTML file."

Link-in-bio. "Build a single-page link-in-bio site for name/brand. Centered avatar, name, one-line bio, then 5-8 large tappable link buttons. Mobile-first, very large tap targets, dark mode by default. Single HTML file."

For more on this specific use case, the how to host a portfolio website guide goes deeper.

Common pitfalls (and how to fix them)

I'm not going to pretend this wasn't confusing the first time I tried it. A few things tripped me up.

Broken images after export. The AI used a placeholder URL or referenced an image with an absolute path like /Users/you/Desktop/photo.jpg. Fix: tell the AI to "use placehold.co URLs for images so the site works anywhere" or put your real images in the same folder and use relative paths like images/photo.jpg.

Framework projects you can't deploy. Bolt or Lovable gave you a full Vite project, you didn't realize it, and now you're staring at a package.json. Fix: either re-prompt asking for a "static HTML output, no build step" or actually run npm install && npm run build and upload the dist/ folder. The first is way easier.

Mobile looks broken. AI sometimes forgets the viewport meta tag. Check your <head> has: <meta name="viewport" content="width=device-width, initial-scale=1">. If not, ask the AI to add it.

Works in preview but breaks live. Almost always a relative path issue. Look for any path starting with / and either change to relative (./styles.css or just styles.css) or tell the AI: "use only relative paths so this works at any URL."

Missing fonts. If the AI used a fancy font without a link, it'll fall back to Times New Roman live. Either add a Google Fonts link in the <head> or stick with system fonts (font-family: system-ui, sans-serif;).

Cleanup checklist before deploying:

• One index.html at the root of the folder (always lowercase to be safe across hosts).
• Viewport meta tag present.
• All paths relative.
• Open the file locally by double-clicking it. If it works in your browser like that, it'll work hosted.

This is also a good moment to note: if you tried GitHub Pages and found the Git workflow annoying, the drag-and-drop approach is the obvious upgrade for vibe-coded sites.

FAQs

Can you vibe code a website for free? Yes, end to end. Claude, ChatGPT, Bolt, Lovable, and v0 all have free tiers that handle a basic site. Hostsmith's free tier hosts it. Total cost: zero.

What is the best vibe coding website builder? For a single-page site, Claude Artifacts is my pick - it outputs one HTML file you can copy out and host immediately. For app-shaped projects with state or a backend, Bolt.new or Lovable are stronger. For developers already in the Next.js ecosystem, v0.dev fits best. There's no single "best" - it tracks what you're building.

How do I host a vibe-coded website? Save the AI output as index.html (and any companion files) in a folder, then drag that folder onto a static host like Hostsmith. You'll get a public URL back. No terminal, no Git, no build step needed if you prompted for a single HTML file.

Do you need to know any code? No. You should be willing to copy and paste a file, and roughly recognize what an index.html is, but you don't need to write code. If something breaks, you describe the problem to the AI and ask for a fix.

Can I use a custom domain? On Hostsmith's free tier, no - you get a hostsmith.link subdomain. Custom domains are on the Standard tier and up. Other free hosts vary; most "free + custom domain" combos involve more setup hassle.

Is a vibe-coded site production-ready? For a personal site, marketing landing page, or small portfolio - yes, totally. For a real SaaS app handling payments and user data, no, you should not vibe-code your way there without review. The AI writes plausible code, not always secure code.

How is this different from Wix or Squarespace? You own the code. You can move it to any host. The design isn't constrained to templates. The tradeoff is there's no point-and-click visual editor - changes go through the AI. For people who want to look unique and stay portable, vibe coding wins. For people who genuinely want a visual builder, the old players still make sense.

Can I export code from existing builders too? Sometimes. Webflow lets you export HTML/CSS if you're on a paid plan - I wrote about that in how to export code from Webflow. Most others (Wix, Squarespace) make it hard on purpose. Vibe coding sidesteps that whole lock-in problem.

From prompt to live URL: try it now

Here's the short version, one more time:

1. Pick an AI tool (Claude or ChatGPT for the simplest path).
2. Use a prompt that says "single HTML file, no frameworks, mobile responsive."
3. Iterate by chatting until it looks right.
4. Copy the code into an index.html file in a folder.
5. Drag the folder onto a drag-and-drop host (Hostsmith is what I use).
6. Share the URL.

If you're anything like me, you probably just want the thing to work, and you don't want to spend a Saturday learning DNS records and Git commands to put up a one-page site. That's the whole point of vibe coding. Don't let the deployment step be the thing that ruins the vibe.

Go build something. The bar for "having a website" has never been lower, and that's actually kind of beautiful.