How to Deploy a Website on Vercel

1. Make or update your site locally.
2. Create a GitHub repo and push your local code.
3. Connect GitHub to Vercel and import the repo.
4. Configure build settings (if needed) and deploy.
5. Make further changes locally as following:

local changes → push to GitHub → Vercel auto-deploys

• Git installed (git --version).
• A GitHub account.
• A Vercel account (you can sign up with GitHub).
• Your project folder ready locally (with package.json for JS frameworks, or plain static files).

• Open your project folder in your terminal / VS Code.
• If your project already has git tracking, fetch and pull remote changes first:

git status
git pull origin main   

• Make your changes locally (edit HTML, CSS, React components, build config, etc.).
• Test locally:

1. Plain HTML: open index.html in browser.
2. React/Vite: npm install then npm run dev (or pnpm/yarn).
3. Next.js: npm run dev.

cd /path/to/your/project
git init
git add .
git commit -m "Initial commit — project ready for Vercel"

git add .
git commit -m "Your descriptive message about changes"

node_modules/
.env
dist/
.build/

# replace URL with your repo's URL
git remote add origin https://github.com/your-username/your-repo.git


# push for the first time (set upstream)
git branch -M main                     
git push -u origin main

1. Go to https://vercel.com and Sign up / Log in.
2. You can sign in with GitHub, this is easiest because Vercel will ask for repo access.
3. When prompted, give Vercel permission to access your GitHub account. You can grant access to all repos or only selected ones. (Selecting your project repo is sufficient.)
4. After login, on the Vercel dashboard, click New Project → Import Git Repository.

1. On the import screen, pick your repository from the list (you can search).
2. Vercel will attempt to detect the framework automatically. Confirm the Framework Preset (e.g., Next.js, React (Vite), Svelte, or “Other” for plain static sites).
3. Confirm Build & Output Settings:
4. Build Command (common defaults):
5. Next.js: next build
6. Create React App: npm run build
7. Vite: npm run build
8. Static HTML: leave blank or use a custom script if you have one.
9. Output Directory:
10. CRA: build
11. Vite: dist
12. Next.js: (Vercel uses .next internally; leave default)
13. Static HTML: / or leave default
14. If your repository is a monorepo or the site lives in a subfolder, set the Root Directory to that subfolder (e.g., web/).
15. Choose the Git branch to deploy (usually main).
16. Add any Environment Variables required at build/runtime (ex: API_KEY, NEXT_PUBLIC_*). You can add them under the Environment Variables section (select Production / Preview as needed).

1. Click Deploy (or Import & Deploy).
2. Vercel will:
3. Clone your GitHub repo,
4. Run install (npm ci or npm install) and the build command,
5. Deploy the static output or serverless functions.
6. You’ll see build logs in the Vercel web UI. A successful deploy results in a live URL like https://your-repo.vercel.app (or a random project name if you didn’t set one).

• Click the production URL from the Vercel dashboard to see the live site.
• If the build failed, open the Build Logs in Vercel — they show install, build, and output stages and error traces. Fix locally, commit, push, and Vercel will re-trigger.

Common build errors and quick fixes:

1. Module not found / dependency errors:
2. run npm install locally and check package.json.
3. Wrong build command / wrong output dir:
4. update build settings in Vercel project settings.
5. Node version mismatch:
6. add engines.node to package.json or set Node version in package.json or via Vercel settings.

1. Make changes locally.
2. git add . && git commit -m "Describe change".
3. git push origin main (or push to whatever branch you configured).
4. Vercel detects the new push and automatically creates a new deployment.

• For main → Production deployment.
• For other branches / Pull Requests → Preview deployments (great for testing before merging).

Wait a few seconds to a minute for the build to start, you’ll see a new deployment in Vercel dashboard and logs.

Important: You do not need to log into Vercel to deploy changes after the initial setup, pushing to GitHub is enough.

Deploying a website to Vercel from GitHub is a smooth and beginner-friendly process once your workflow is set up. You simply update your project locally, commit and push those changes to GitHub, and Vercel automatically handles the entire deployment pipeline for you. After the initial setup, you don’t need to manually redeploy anything, every push instantly triggers a fresh build and updates your live site within seconds. This lets you focus on building features and improving your project, while Vercel takes care of the hosting, versioning, and production environment behind the scenes.