Vibe coding tools in 2026: how to publish the result

Vibe coding means that you build software through a chat with an AI tool. Tools such as Claude Code, Codex, Cursor or ChatGPT can quickly make a working page, game, prototype, script or dashboard from a rough idea. The hard part is often not the first version. The hard part is to share the result with other people. You also do not want to turn the experiment into a full deployment project too early.

This tutorial covers that publishing step. It shows how to find what to publish, select a host and get a link. It also shows how to protect unfinished work and keep track of updates.

The common output

After a vibe coding session, you often have a folder like this one:

weather-dashboard/
  index.html
  package.json
  src/
  public/
  data/
  README.md
  screenshots/

Or you have a simpler static folder:

client-demo/
  index.html
  styles.css
  app.js
  assets/
  notes.md

Before you select a host, find out what the output really is. It can be plain files that a browser can open, or a framework project that needs a build. It can also be an app that needs a server.

Choose the publishing path

If the result is… Use Why
Static files that you want to share for review today Netlify Drop or Cloudflare Pages Direct Upload You drag a folder in and get a URL. You do not need Git
Something that belongs in a public GitHub repository GitHub Pages It hosts the site directly from the repository, but the site is public
A project that will become a maintained web app Netlify or Vercel connected to Git Builds on every push, preview URLs for each branch, support for frameworks
Something that needs a server, database, background jobs or Docker A VPS or an app platform Static hosts do not run your backend

1. Freeze the first publishable version

Before you publish, ask the AI tool to make a folder that is ready for review.

Here is an example prompt:

Prepare this project for initial publication and review.

Make sure:
- the homepage is index.html or the README explains the start command
- all local-only paths are removed
- sample data is safe to share
- private keys and .env files are excluded
- README.md explains what the reviewer should test
- known limitations are listed

This step creates a clean checkpoint (a saved state that you can return to). You can always improve it later.

2. Decide whether it needs a build

If the folder has only static files, you can publish it as it is.

If it has a framework, you probably need to run a build first:

npm install
npm run build

The folder to publish is then the build output. It is often dist/, build/, out/ or .output/public/.

If you do not know which folder to publish, ask the AI tool:

Tell me the exact folder I should publish as a static site.
If this project cannot be published statically, explain what server runtime it needs.

Then open that folder through a local server, for example with python3 -m http.server 8000 inside the folder. Click through the site once. If it does not work locally, it will not work on a host.

3. Publish the folder for review

The fastest path needs no Git and no command line.

To use Netlify Drop, do these steps:

  1. Sign in to Netlify.
  2. Drag the folder onto Netlify Drop.
  3. If you want a readable <name>.netlify.app address, rename the project in its settings.
  4. For the next version, open the Deploys page of the project. Drag the new folder onto the dropzone at the bottom of the page (Netlify’s deploy docs). The URL stays the same.

To use Cloudflare Pages, do these steps:

  1. In the Cloudflare dashboard, open Workers & Pages.
  2. Select Create application, then Get started, then Drag and drop your files.
  3. Name the project. Drag in the folder or a ZIP file of it. Then select Deploy site.
  4. For the next version, open the project. Select Create a new deployment.

The dashboard upload accepts up to 1,000 files. The Wrangler CLI accepts up to 20,000 (Direct Upload limits). You cannot connect a Direct Upload project to a Git repository later. If you want automatic deployments on every push, start a new project.

You can also use the terminal, or let the AI agent run the deployment:

npx wrangler pages deploy dist
netlify deploy --dir dist
netlify deploy --dir dist --prod

Without --prod, the Netlify CLI creates a draft deployment that you can look at first. With --prod, the deployment goes to the live site (Netlify CLI reference). On Vercel, the vercel command in the project folder deploys the project. The first deployment of a new project is production. Later production deployments use vercel --prod (Vercel CLI docs).

Our guides for Netlify, GitHub Pages and Vercel show each host step by step.

4. Include the non-web files

Vibe-coded projects often include more than a web page:

  • Prompt notes
  • CSV exports
  • PDFs
  • Screenshots
  • Demo data
  • Reviewer instructions
  • Test results

You can publish these files in the same folder. Each file gets its own URL, for example /data/sample.csv. But static hosts do not show a list of the files in the folder. For this reason, add a short page or a section in the app that links to the files. Then a reviewer does not have to guess file paths.

Leave out all files that you do not want to give to the reviewer directly. Examples are raw prompt logs with private details, real customer data and .env files.

5. Protect unfinished work

Keep most vibe-coded work private at first.

Use a gate (a login screen in front of the site) when:

  • The app is a client demo.
  • The design is not approved.
  • The code uses sample data.
  • The idea is still confidential.
  • You want feedback before a public launch.

The options for each host are:

  • For a shared password, use Netlify password protection on paid plans (Netlify docs). Or use Vercel Password Protection on Pro and Enterprise (Vercel docs).
  • For email codes to named people, use Cloudflare Access with the One-time PIN login. Put it in front of a Cloudflare Pages project. You list the allowed addresses or a company domain. Each visitor gets a code by email. You also get a record of which address signed in. Read our Cloudflare Pages protection guide.
  • For teammates with accounts, use Vercel Authentication. It is available on all Vercel plans. It lets in people who have access to the project, after they sign in with Vercel.

Be careful with two details. On Cloudflare Pages, the Enable access policy switch protects only preview deployments, not the production pages.dev address. Also, GitHub Pages sites are public even when the repository is private, unless you use GitHub Enterprise Cloud.

6. Keep a publish log

In README.md, keep a small log:

## Publish log

2026-07-06
- First review version
- Known issue: mobile menu needs polish
- Feedback requested: copy, layout, and chart readability

2026-07-07
- Updated hero copy
- Replaced sample CSV
- Fixed chart labels

The log helps reviewers understand what changed between AI iterations (rounds of changes by the AI tool). It also helps the AI tool. Paste the log into the next session, so that the tool knows what is already fixed.

Vibe coding gets you to a folder. A static host, a gate that fits the audience and a short publish log get that folder to reviewers. With them, the folder does not become a full deployment project before it is ready.

A docs portal with Ask AI
and support tickets

Connect a repository, or describe your product to start. Each docs site has search, Ask AI, an API console, an MCP server and support tickets.

  • Publishes from GitHub on every push
  • Works with Mintlify repositories
  • API console from your OpenAPI file
  • MCP server and llms.txt for AI agents
  • Ask AI and support tickets
  • Analytics for people and AI agents
Start Free Questions? Ask AI in our docs

No card required.

Share:
Markdown version

Related Articles

↧
Loading PDF…