Deploying on Vercel: One-Command Deployment for AI Coding Agents

💡 In one sentence: The shortest path to going live on Vercel — npm i -g vercel install once, vercel login log in once, and after that every release is a single command; moreover, these few commands can be handed to an AI coding agent to run in one go.

Search for "Vercel deployment tutorial" and most results are the original English documentation, walking through sign-up, creating a project, connecting a repository — with so many steps, it's easy to get stuck halfway. This Chinese tutorial shortens it: a local folder plus a few commands, and in about ten minutes you can put your AI-built pages on the public internet — and if you're already using an AI coding agent, you can even have the agent run all these commands for you.

This is lesson 4 of Route A (building websites) in the scenario hands-on track, and also the last of the three go-live routes: A2 GitHub Pages goes through a web wizard, A3 Cloudflare Pages goes through drag-and-drop upload, and this lesson's Vercel goes through the command line — for people writing code with an AI agent, it's usually the smoothest option.

• Haven't built the page yet? Go back to A1 Build a Website with AI first
• Want to compare all three before starting? Jump straight to A5 Deployment Platform Comparison

What you'll be able to do after this lesson

• Install and log in to the Vercel CLI: npm i -g vercel + vercel login (requires Node.js 18+)
• Run a single vercel command in your project directory to complete a deployment, then use vercel --prod to publish the official version for everyone
• Hand the whole deployment to an AI coding agent: send one prompt and it runs the commands for you and sends back the live link
• Be able to state the boundaries of the Hobby free plan: 100 GB of traffic per month, 100 deployments per day, 200 projects, and non-commercial personal use only

Where you are stuck right now

• "The AI has already written all my page files, but every deployment guide I find is in English — CLI, build, deploy, so many terms, it's overwhelming"
• "GitHub Pages requires creating a repository, Cloudflare means hunting for the entry in the dashboard — isn't there an easier way to go live?"
• "The AI agent clearly knows how to run terminal commands, so why does the go-live step still have to be done manually, one command at a time?"

When to use this approach

When you need to:

• Get the static pages in that local folder onto the public internet as fast as possible, with a shareable link
• Make every future update and republish a single command as well
• Let an AI coding agent handle everything — running terminal commands is its strong suit to begin with

And you don't want to:

• Create a Git repository or manage branches (the official Vercel CLI flow doesn't go through a repository)
• Fill in build configuration item by item in dashboard forms

🎒 Prerequisites

• Completed A1 Build a Website with AI: you have a local folder of static pages (the output of A1, with the entry point usually index.html)
• Register a Vercel account (free sign-up on the official site; the default for personal use is the Hobby free plan)
• Node.js 18 or higher installed on your computer (Vercel officially requires Node.js 18+; you can download and install it from nodejs.org)

System Requirements

Item	Requirement
Node.js	18 or higher
Package manager	npm / pnpm / yarn / bun, any one
Account	Vercel account (Hobby plan is free)
Project	Local project folder (the static pages output by A1)

Core Idea

Vercel's official workflow starts with the CLI: install once, log in once, and after that every deployment is a single command. The CLI automatically detects which framework your project uses, then builds and deploys — you don't need to fill in build commands or pick an output directory.

Deployments come in two tiers, differing by just one argument:

• vercel: preview deployment, gives you a preview URL when it finishes so you can check the result yourself first
• vercel --prod: production deployment, the official version shown to everyone

Two ways to go live, pick one

vs.	Method A: one CLI command (the main path of this lesson)	Method B: connect Git in the dashboard
Where it runs	Terminal	Browser dashboard
Repository needed?	The official flow doesn't go through a Git repository; deploy directly from the local folder	Code must be in a GitHub / GitLab / Bitbucket repository
First launch	vercel + vercel --prod two commands	Pick a repository on the New Project page and click Deploy
For later updates	just run vercel --prod again	every push automatically triggers a new deployment
Who it suits	Using AI coding agents and want to ship as fast as possible	Already know Git and want "push to deploy"

How much allowance does the Hobby free plan include

Free sign-up uses the Hobby plan; Vercel's free allowance mainly comes down to these items:

Item	Hobby free allowance
Number of projects	200 projects
Number of deployments	100 per day
Traffic (Fast Data Transfer)	100 GB per month
Custom domains per project	50 domains
Function invocations	1,000,000 per month
Image transformations	5,000 per month
Consequences of exceeding the limit	most features stay unavailable for 30 days before recovering (Web Analytics can resume after 7 days of suspension)

For sites like personal homepages and portfolios, 100 GB/month is more than enough.

⚠️ The Hobby plan cannot be used commercially

The Hobby plan's fair use terms state: for non-commercial, personal use only. For company websites or client projects, upgrade to Pro ($20/user/month per developer seat), or see the A5 deployment platform comparison to switch platforms.

Follow along with me

Step 1: Install the Vercel CLI (one global command)

Why: Vercel officially says "every workflow starts with the CLI" — even AI agents deploy projects using it.

Recommended approach (npm comes bundled with Node):

npm i -g vercel

Readers already using pnpm / yarn / bun, pick one of the four:

pnpm i -g vercel
yarn global add vercel
bun add -g vercel

You should see: the install log finishes scrolling, the terminal returns to the prompt, with no red errors.

• Quick check: no errors during installation (whether it installed correctly will be clear the moment you log in at the next step)

Step 2: Log in to your Vercel account (vercel login)

Why: before deploying, you need to link the CLI to your Vercel account so subsequent deployments are recorded under your projects.

vercel login

You should see: the CLI gives an authentication prompt; follow it to complete authentication with your Vercel account, and the terminal shows a successful login.

• Quick check: the terminal confirms you are logged in to your account

Step 3: Run the core command of the Vercel deployment tutorial (vercel)

Why: this single command is the star of the whole Vercel deployment tutorial — the CLI auto-detects the framework, builds the project, and completes the deployment, all in one command.

How: first go into your project folder (the directory where the AI generated the page in A1), then run:

vercel

You should see: the CLI detects the framework → builds → deploys in one go, and finally gives you a preview URL; open it in a browser and your page is already online.

• Quick check: the preview URL opens your page in the browser

Step 4: Publish the production deployment (vercel --prod)

Why: the vercel in step 3 produces a preview deployment; the official version for visitors requires one more command.

vercel --prod

You should see: another build and deployment completes, and this time you get the production URL — use this one when sharing on social media or printing on business cards (the online address under the vercel.app domain).

• Quick check: the production URL is accessible and the page content matches the preview

Step 5: Hand the whole deployment to an AI coding agent (recommended)

Why: all four steps above are terminal commands, and running terminal commands is exactly what AI coding agents excel at. In its Getting started docs, Vercel provides an "Agent prompt" directly — have the agent install the CLI, log in, deploy, and return the link in one run.

How: open your AI coding agent in the project directory and send it the following message:

Help me deploy to Vercel:
1. Globally install the Vercel CLI (npm i -g vercel) and log in with vercel login.
2. Run vercel in the current project directory to complete the deployment, and send me the preview link.
3. Suggest the next step based on my project, such as binding a custom domain or configuring environment variables.

You should see: the agent runs the commands from steps 1–4 for you and finally pastes the online link back into the conversation.

Haven't installed an AI coding agent yet? Go back to 1.5 Install Claude Code; for the desktop version, see 1.5b Alternative installation methods.

💡 The official "trio"

Vercel also offers a Plugin / Skills / MCP trio for AI agents, letting the agent read official docs directly and manage projects and deployments — this advanced setup is covered in 5.2 Vercel × AI toolchain.

Method B: No command line — deploy from the console by connecting Git

Prerequisite: the page files are already pushed to a GitHub / GitLab / Bitbucket repository (if you created one in A2 GitHub Pages, just reuse it).

1. Open the New Project page in the Vercel console
2. Connect your GitHub / GitLab / Bitbucket account
3. Pick a repository and click Deploy

You should see: after the deployment finishes you get the online address; from then on, every push to the connected branch automatically triggers a new deployment.

Checkpoint ✅

• npm i -g vercel installs without errors, vercel login shows you are logged in
• run vercel in the project directory to get a preview URL that opens in the browser
• after vercel --prod the production URL is accessible
• can state the three limits of the Hobby plan: 100 deployments per day, 100 GB of traffic per month, non-commercial personal use only
• know the consequences of exceeding the limit: most features take 30 days to recover

Pitfall warnings

❌ Pitfall 1: Node.js version below 18

Symptom: errors when installing or running the CLI. Cause: Vercel CLI officially requires Node.js 18+. The right way: first confirm your Node version is at least 18 (if it's lower, install the new version from nodejs.org), then re-run npm i -g vercel.

❌ Pitfall 2: running vercel and then sharing the link as the official address

Symptom: the link you shared is a preview deployment, not the production version. Cause: vercel creates a preview deployment; for public release you need the production deployment from vercel --prod. The right way: use the preview URL for your own acceptance checks, and the production URL from vercel --prod for sharing publicly.

❌ Pitfall 3: deploying a commercial project on the free Hobby plan

Symptom: a company website or client work goes live on the Hobby plan, which violates the platform's rules. Cause: the Hobby plan's fair use terms state "non-commercial, personal use only." The right way: upgrade commercial projects to Pro ($20/user/month for a developer seat), or check A5 deployment platform comparison to switch platforms.

❌ Pitfall 4: assuming everything recovers the next day after exceeding your quota

Symptom: traffic or deployment count exceeded, and the related features are suspended. Cause: after the Hobby plan exceeds its quota, most features can't be used again for 30 days (Web Analytics is the exception—it recovers after a 7-day suspension). The right way: keep an eye on usage after going live; personal sites usually never hit the limits, but high-traffic projects should consider Pro or another platform in advance.

Advanced tips

• Add a database with one command: does your project need to store data? vercel install neon (or upstash, supabase) can install Marketplace integrations directly from the CLI, and Vercel automatically writes the credentials into the project's .env.local.
• Bind your own domain: don't want the vercel.app suffix? Vercel's official docs have an "Add a custom domain" guide; for the general approach, see 5.3 custom domain.
• Let the agent take over more deeply: install Vercel's Plugin / Skills / MCP, and the AI agent can look up official docs, manage projects and deployments—see 5.2 Vercel × AI toolchain.

Lesson summary

✅ The shortest path of this Vercel deployment tutorial:

• npm i -g vercel → vercel login → vercel → vercel --prod, four commands from install to live
• vercel gives a preview, vercel --prod gives production—use the latter for sharing publicly
• No command line needed either: connect a Git repo on the console's New Project page, and every push after that deploys automatically
• Hobby free plan: 200 projects / 100 deployments per day / 100 GB traffic per month / 50 domains per project, non-commercial personal use only
• The whole workflow can be packaged into a single prompt and handed to an AI coding agent to execute

Command	Purpose	When to use
npm i -g vercel	Install Vercel CLI globally	Once only
vercel login	Log in to your Vercel account	Once only (again when switching accounts)
vercel	Preview deployment, gives a preview URL	Whenever you want to check the result first
vercel --prod	Production deployment, gives the official URL	Public release, updating the production version
vercel install neon	One-command install of database integrations	When the project needs storage

Next lesson preview

All three deployment routes are done—GitHub Pages, Cloudflare Pages, and Vercel each have their own free quotas and quirks. The next lesson, A5 deployment platform comparison: free quotas, limits, and how to choose, puts all three into one table.

You will learn:

• How much free quota each of the three offers, and what happens when you exceed it
• Which one to choose for different people (no command line / knows Git / uses an AI agent)
• When you're unsure, in what order to make the decision