lunartech-x/AI Website Deployment

AI Website Deployment

Deploy websites created with AI coding assistants to production using Vercel, Netlify, Cloudflare Pages, or GitHub Pages.

Overview

After an AI assistant generates your website code, follow this workflow to deploy it live:

1. Version control setup
2. Platform selection
3. Configuration
4. Deployment
5. Custom domain (optional)

Quick Start by Platform

Vercel (Recommended for Next.js/React)

# Install Vercel CLI
npm i -g vercel

# Deploy from project directory
vercel

# Follow prompts to:
# - Link to Vercel account
# - Configure project settings
# - Deploy to preview URL

# Deploy to production
vercel --prod

Netlify (Great for Static Sites)

# Install Netlify CLI
npm i -g netlify-cli

# Login and initialize
netlify login
netlify init

# Deploy draft
netlify deploy

# Deploy to production
netlify deploy --prod

Cloudflare Pages

# Install Wrangler CLI
npm i -g wrangler

# Login
wrangler login

# Deploy
wrangler pages deploy ./dist

GitHub Pages (Free, Simple)

# In your repo, enable GitHub Pages:
# Settings → Pages → Source: GitHub Actions

# Or use gh-pages package
npm i -g gh-pages
gh-pages -d dist

Project Configuration

Vercel (vercel.json)

{
  "version": 2,
  "builds": [
    { "src": "package.json", "use": "@vercel/next" }
  ],
  "routes": [
    { "src": "/(.*)", "dest": "/" }
  ]
}

Netlify (netlify.toml)

[build]
  command = "npm run build"
  publish = "dist"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

Cloudflare Pages

# Set in dashboard or wrangler.toml
# Build command: npm run build
# Build output directory: dist
# Root directory: /

Framework-Specific Configs

Vite

// vite.config.js
export default {
  base: '/', // or '/repo-name/' for GitHub Pages
  build: {
    outDir: 'dist'
  }
}

Next.js

// next.config.js
module.exports = {
  output: 'export', // For static export
  // or leave default for Vercel serverless
}

Plain HTML/CSS/JS

# No build step needed
# Just deploy the folder containing index.html
vercel ./public
# or
netlify deploy --dir=./public

Environment Variables

Setting via CLI

# Vercel
vercel env add VARIABLE_NAME

# Netlify  
netlify env:set VARIABLE_NAME "value"

# Cloudflare
wrangler secret put VARIABLE_NAME

Using .env Files

# .env.production
VITE_API_URL=https://api.example.com
NEXT_PUBLIC_API_KEY=xxx

[!WARNING] Never commit secrets to git. Use platform environment variables for sensitive data.

Custom Domains

Vercel

vercel domains add yourdomain.com
# Update DNS: Add CNAME record pointing to cname.vercel-dns.com

Netlify

netlify domains:add yourdomain.com
# Update DNS per Netlify instructions

Cloudflare Pages

# Add custom domain in Cloudflare dashboard
# If using Cloudflare DNS, it's automatic

GitHub Actions Workflow

# .github/workflows/deploy.yml
name: Deploy

on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      
      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: '20'
          
      - name: Install & Build
        run: |
          npm ci
          npm run build
          
      - name: Deploy to Vercel
        uses: amondnet/vercel-action@v25
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-org-id: ${{ secrets.ORG_ID }}
          vercel-project-id: ${{ secrets.PROJECT_ID }}
          vercel-args: '--prod'

Deployment Checklist

Pre-Deployment

• [ ] npm run build succeeds locally
• [ ] All environment variables configured
• [ ] robots.txt and sitemap.xml present (SEO)
• [ ] Favicon and meta tags configured
• [ ] No console errors in production build

Post-Deployment

• [ ] Site loads correctly at deployed URL
• [ ] All pages/routes work
• [ ] Forms and interactive features function
• [ ] SSL certificate active (HTTPS)
• [ ] Performance acceptable (run Lighthouse)

Platform Comparison

| Feature | Vercel | Netlify | Cloudflare | GitHub Pages | |---------|--------|---------|------------|--------------| | Free Tier | Generous | Generous | Generous | Unlimited | | Build Time | Fast | Fast | Very Fast | Moderate | | Serverless | ✅ Edge Functions | ✅ Functions | ✅ Workers | ❌ | | Best For | Next.js, React | Static, JAMstack | Speed-critical | Simple sites | | Custom Domain | ✅ Free | ✅ Free | ✅ Free | ✅ Free |

Troubleshooting

Build Fails

# Check build logs
vercel logs
netlify build

# Common fixes:
# - Missing dependencies in package.json
# - Node version mismatch (specify in config)
# - Environment variables not set

404 on Routes

# For SPAs, add redirect rule:
# All routes → /index.html

# Vercel: vercel.json rewrites
# Netlify: _redirects file or netlify.toml

Assets Not Loading

# Check base path in build config
# Ensure paths are relative or use correct base URL

Resources

• Vercel Documentation
• Netlify Documentation
• Cloudflare Pages Docs
• GitHub Pages Docs