Deployment#

This guide will walk you through deploying your HTML, Tailwind CSS, and Vite project to Vercel. Vercel provides excellent support for static sites and offers seamless deployment with automatic builds and deployments.

Prerequisites#

Before deploying, ensure you have:

• A Vercel account (sign up here)
• Your project code pushed to a Git repository (GitHub, GitLab, or Bitbucket)
• Node.js installed locally for building

Project Setup#

1. Build Configuration

Make sure your vite.config.js is properly configured for production builds:

import { defineConfig } from 'vite'

export default defineConfig({
  build: {
    outDir: 'dist',
    assetsDir: 'assets',
    rollupOptions: {},
  },
})

2. Build Scripts

Ensure your package.json has the correct build scripts:

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

Deployment Methods#

Method 1: Vercel Dashboard (Recommended)

1. Connect Repository

   • Go to vercel.com and sign in
   • Click "New Project"
   • Import your Git repository
   • Select the repository containing your project

2. Configure Project Settings

   • Framework Preset: Select "Vite"
   • Root Directory: Leave as ./
   • Build Command: yarn build or npm run build
   • Output Directory: dist
   • Install Command: yarn install or npm install

3. Deploy

   • Click "Deploy"
   • Vercel will automatically build and deploy your project

Method 2: Vercel CLI

1. Install Vercel CLI

   npm i -g vercel
   

2. Login to Vercel

   vercel login
   

3. Deploy from Project Directory

   cd your-project-directory
   vercel
   

4. Follow the CLI Prompts

   • Link to existing project or create new
   • Confirm build settings
   • Deploy

Support Resources#

• Vercel Documentation

---

Your HTML, Tailwind CSS, and Vite project is now successfully deployed on Vercel! 🚀