# How to publish an AI-generated site on Vercel

> Deploy an AI-generated static site or frontend app on Vercel, understand previews and traffic usage, and learn when Revdoku is simpler.

![Vercel service page](/assets/blog/publish-ai-site-vercel/01-service-page.png)

Vercel is a natural fit for a vibe-coded frontend built with Next.js, React, Astro, SvelteKit, or another modern framework. The simplest repeatable workflow is to import a Git repository and let every push create a deployment.

## Before you start

Make sure the project runs locally and has:

- A `package.json` with the correct build script
- A production build that finishes without errors
- Secrets removed from the repository
- A GitHub, GitLab, or Bitbucket repository

Plain HTML also works. In that case, the project may need no build command.

## 1. Push the project to Git

Create a repository and push the source code. Do not commit `.env` files, private API keys, service credentials, or database passwords.

If the app calls a backend, confirm that the backend accepts requests from the future Vercel domain.

## 2. Import the repository

Open Vercel, choose **Add New → Project**, connect your Git provider, and select the repository. Vercel detects many frameworks automatically.

The [Vercel getting-started guide](https://vercel.com/docs/getting-started-with-vercel) covers the same import workflow.

![Vercel project import guide](/assets/blog/publish-ai-site-vercel/02-import-project.png)

## 3. Check the build settings

Review the detected framework, root directory, build command, and output directory.

Common patterns include:

- Next.js: Vercel normally detects everything
- Vite: build command `npm run build`, output `dist`
- Astro: build command `npm run build`, output `dist`
- Plain HTML: no build command, project root as the output

If the app lives in a subfolder, set the root directory before deploying.

## 4. Add environment variables

Open the project’s environment-variable section and add only the values the production build or server code needs. Use the project settings in the dashboard; never paste secrets into source files.

Remember that variables exposed to browser JavaScript are public even when entered through a dashboard. Follow your framework’s naming rules.

## 5. Deploy and test

Select **Deploy**. Vercel builds the project and gives it a `.vercel.app` URL.

Open that URL and test:

- The homepage and important routes
- A direct refresh on a nested route
- Forms and API calls
- Images and fonts
- Mobile layout
- Runtime and build logs

Fix the first reported build error rather than changing several settings at once.

## 6. Add a custom domain

Open **Settings → Domains**, add the hostname, and follow the DNS instructions. Vercel provisions HTTPS after the DNS records point to the project.

![Vercel custom domain guide](/assets/blog/publish-ai-site-vercel/03-add-domain.png)

The official [Vercel domain guide](https://vercel.com/docs/domains/working-with-domains/add-a-domain) explains apex domains, subdomains, and external DNS.

## Update the site

Push a commit to the production branch. Vercel builds and publishes it automatically. Pull requests can get preview URLs, so you can review a change before merging it.

Vercel’s Hobby plan is intended for personal, non-commercial use. Check the current plan terms before using it for paid client or business work.

| Check | Ready when |
|---|---|
| Build | The production command succeeds locally |
| Secrets | Private values live in environment settings |
| Deploy | The `.vercel.app` URL opens |
| Routes | Direct refreshes and API calls work |
| Domain | The custom hostname loads over HTTPS |

Your site is live.

Just ask to “publish to Revdoku” to
publish your HTML pages presentation dashboard app prototype game prototype
as a fast and secure website

from your Codex , Claude or another AI app publish files or folders

Connect
Skill
MCP

Paste this into your AI app.

Copy

Install the Revdoku skill in your AI app.

Copy
npx skills add revdoku/revdoku --skill revdoku -g

Choose your AI app to connect through MCP.

Codex CLI
Claude Code
Other

Copy codex mcp add revdoku --url https://app.revdoku.com/mcp
codex mcp login revdoku

Copy claude mcp add --transport http revdoku https://app.revdoku.com/mcp
claude mcp login revdoku

Transport Streamable HTTP Auth Browser OAuth

Copy https://app.revdoku.com/mcp

Open the MCP setup guide →

Free · Public or protected · Visitor analytics · Forms and email alerts Building websites for clients? Explore Revdoku for agencies →

---

[View the canonical page](https://revdoku.com/blog/publish-ai-site-vercel/) · [Browse llms.txt](https://revdoku.com/llms.txt)