Deploy to Vercel

Overview

Vercel is a frontend cloud platform optimized for performance and developer experience. It offers lightning-fast deployments with automatic optimization and global edge network delivery.

Vercel’s free “Hobby” tier includes unlimited deployments, automatic SSL, and 100GB bandwidth/month.

Prerequisites

Your portfolio template folder ready to deploy
An email address or GitHub account
(Optional) Git repository for continuous deployment

Why Choose Vercel?

Fastest global CDN: Content delivered from 100+ edge locations worldwide
Automatic optimization: Image optimization, compression, and caching
Instant deployments: Changes go live in seconds
Built-in analytics: Performance monitoring included
Zero configuration: Works out of the box for static sites

Method 1: Import from GitHub (Recommended)

Go to vercel.com
Click Sign Up
Choose Continue with GitHub (recommended) or email
Authorize Vercel to access your GitHub account
Complete the registration process

Using GitHub for sign-up streamlines the import process and enables automatic deployments.

Push Portfolio to GitHub

If you haven’t already:

Create a new GitHub repository
Upload your portfolio files
Ensure index.html is at the root level

See the GitHub Pages guide for detailed instructions.

Import Your Repository

In your Vercel dashboard, click Add New
Select Project
Click Continue with GitHub
Choose your portfolio repository from the list
- If you don’t see it, click Adjust GitHub App Permissions
Click Import

Vercel automatically detects that this is a static site and configures everything.

Configure Project Settings

For a static HTML portfolio:

Framework Preset: Select “Other” or leave as detected
Root Directory: Leave as . (current directory)
Build Command: Leave empty (no build needed)
Output Directory: Leave empty or enter .
Install Command: Leave empty

Click Deploy

Vercel’s smart detection usually fills these in correctly. For static sites, you typically don’t need to change anything.

Deployment Complete

Vercel builds and deploys your site (10-20 seconds)
You’ll see a success screen with confetti animation
Your portfolio is assigned a URL like:
```
https://your-portfolio.vercel.app
```
Click Visit to view your live portfolio

Vercel also creates preview URLs like https://your-portfolio-git-main-username.vercel.app for different branches.

Method 2: Manual Upload via CLI

Install Vercel CLI

Open your terminal and install the Vercel CLI:

npm install -g vercel

You need Node.js and npm installed on your computer. Download from nodejs.org.

Navigate to Your Portfolio

cd /path/to/your/portfolio

Deploy with Vercel CLI

vercel

Follow the prompts:

Set up and deploy: Press Enter
Which scope: Select your account
Link to existing project?: No (for first deployment)
What’s your project’s name?: Enter a name or press Enter
In which directory is your code located?: Press Enter (current directory)
Want to override settings?: No

Vercel uploads and deploys your portfolio.

Access Your Deployment

Once complete, Vercel displays:

✅  Production: https://your-portfolio.vercel.app

Your portfolio is now live.

Run vercel --prod to deploy directly to production, or just vercel for preview deployments.

Method 3: Drag-and-Drop Upload

Prepare Your Portfolio

Ensure all files are in a single folder
Verify index.html is at the root level
Compress the folder into a .zip file (optional, for easier upload)

Upload via Dashboard

Log in to your Vercel dashboard
Click Add New > Project
Look for the Manual Upload option
Drag your portfolio folder (or .zip file) to the upload area
Vercel uploads and deploys automatically

Manual uploads don’t support automatic redeployments. Use Git-based deployment for automatic updates.

Updating Your Portfolio

For Git-Based Deployments

Push Changes to GitHub

git add .
git commit -m "Update portfolio"
git push

Automatic Deployment

Vercel automatically:

Detects the push to GitHub
Triggers a new deployment
Updates your live site in seconds

You’ll receive notifications via email or Vercel dashboard.

For CLI Deployments

Make Local Changes

Edit your HTML, CSS, or JavaScript files.

Redeploy

cd /path/to/your/portfolio
vercel --prod

Vercel uploads and deploys the new version.

Custom Domain Setup

Add Domain to Vercel

In your project dashboard, click Settings
Click Domains in the sidebar
Enter your domain name (e.g., johndoe.com or www.johndoe.com)
Click Add

You can add multiple domains (e.g., both apex and www) and set one as primary.

Configure DNS Records

Vercel shows exactly which DNS records to add:For apex domain (example.com):

Type: A
Name: @
Value: 76.76.21.21

For www subdomain (www.example.com):

Type: CNAME
Name: www
Value: cname.vercel-dns.com

Add these records at your DNS provider (Namecheap, Cloudflare, etc.).

Vercel provides exact instructions specific to your domain. Follow them carefully.

Verify DNS Configuration

Vercel automatically checks DNS configuration
Once records propagate (can take up to 48 hours), domain status shows Valid Configuration
SSL certificate is automatically provisioned
Your portfolio is accessible at your custom domain with HTTPS

Use Vercel’s built-in DNS checker or dnschecker.org to verify propagation.

Set Primary Domain (Optional)

If you have multiple domains:

Go to Settings > Domains
Click the three dots next to your preferred domain
Select Set as Primary Domain

Other domains will automatically redirect to the primary.

Environment Variables (If Needed)

If your portfolio uses environment variables:

Add Environment Variables

Go to project Settings > Environment Variables
Click Add New
Enter:
- Name: Variable name (e.g., API_KEY)
- Value: Variable value
- Environment: Production, Preview, or Development
Click Save

Access in Code

Environment variables are available during build time:

// Access via process.env (if using build tools)
const apiKey = process.env.API_KEY;

For client-side JavaScript in static sites, environment variables must be injected at build time. Don’t expose sensitive keys client-side.

Redeploy to Apply Changes

After adding environment variables, trigger a new deployment:

Push to Git, or
Click Deployments > Redeploy

Configuration Tips

vercel.json Configuration

Create a vercel.json file in your project root for advanced configuration:

{
  "cleanUrls": true,
  "trailingSlash": false,
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        {
          "key": "X-Frame-Options",
          "value": "DENY"
        },
        {
          "key": "X-Content-Type-Options",
          "value": "nosniff"
        }
      ]
    }
  ],
  "redirects": [
    {
      "source": "/old-page",
      "destination": "/new-page",
      "permanent": true
    }
  ]
}

For most static portfolios, vercel.json is optional. Vercel’s defaults work great out of the box.

Custom 404 Page

Create a 404.html file in your root directory:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page Not Found</title>
</head>
<body>
  <h1>404 - Page Not Found</h1>
  <p>The page you're looking for doesn't exist.</p>
  <a href="/">Go Home</a>
</body>
</html>

Vercel automatically serves this for 404 errors.

Performance Optimization

Vercel automatically:

Compresses assets with Brotli/Gzip
Serves from global edge network
Caches static assets aggressively
Optimizes images (if using Vercel Image Optimization)

No configuration needed. Vercel optimizes your static site automatically.

Preview Deployments

Every Git push creates a unique preview deployment:

Branch deployments: Every branch gets its own URL
Commit deployments: Every commit gets a unique preview
Pull request comments: Vercel comments on PRs with preview links

Share preview URLs with clients or collaborators to get feedback before merging to production.

Vercel Analytics (Optional)

Enable built-in analytics:

Enable Analytics

Go to project Analytics tab
Click Enable Analytics
Analytics starts tracking immediately (no code changes needed)

View Metrics

Track:

Page views and visitors
Real Experience Score (performance metrics)
Top pages
Geographic distribution

Vercel Analytics is privacy-friendly and doesn’t use cookies or track personal data.

Troubleshooting

Build failed

For static sites, builds rarely fail. If they do:

Check deployment logs in Deployments tab
Ensure index.html exists at root level
Verify no build commands are configured (should be empty)

Assets not loading

Use relative paths: ./css/style.css instead of /css/style.css
Check file names match exactly (case-sensitive)
Verify files are committed to Git (for Git deployments)

Custom domain not working

Verify DNS records are correct (check Vercel’s instructions)
Wait up to 48 hours for DNS propagation
Use dig or nslookup to verify DNS records
Check domain status in Settings > Domains

Deployment stuck

Check Vercel status page: vercel-status.com
Cancel and retry deployment
Contact Vercel support if issue persists

Best Practices

Preview Deployments: Always review preview deployments before merging to ensure changes look correct.

Instant Rollback: If something breaks, use the Deployments tab to instantly promote a previous deployment to production.

Branch Protection: Use Git branch protection rules to require preview deployments to succeed before merging.

Vercel CLI: Install the CLI for quick local testing with vercel dev before deploying.

Vercel’s free tier is generous for personal projects. You get unlimited deployments, 100GB bandwidth/month, and automatic SSL.

Next Steps

Edge Functions

Add serverless functions that run at the edge for dynamic functionality.

Image Optimization

Use Vercel’s Image Optimization API to automatically optimize portfolio images.

Web Analytics

Enable Vercel Analytics to track performance and visitor metrics.

Speed Insights

Monitor real user performance metrics with Vercel Speed Insights.

Getting Started

Customization

Components

Deployment

Overview

Prerequisites

Why Choose Vercel?

Method 1: Import from GitHub (Recommended)

Method 2: Manual Upload via CLI

Method 3: Drag-and-Drop Upload

Updating Your Portfolio

For Git-Based Deployments

For CLI Deployments

Custom Domain Setup

Environment Variables (If Needed)

Configuration Tips

vercel.json Configuration

Custom 404 Page

Performance Optimization

Preview Deployments

Vercel Analytics (Optional)

Troubleshooting

Best Practices

Next Steps

Edge Functions

Image Optimization

Web Analytics

Speed Insights

Build docs developers (and LLMs) love

Getting Started

Customization

Components

Deployment

​Overview

​Prerequisites

​Why Choose Vercel?

​Method 1: Import from GitHub (Recommended)

​Method 2: Manual Upload via CLI

​Method 3: Drag-and-Drop Upload

​Updating Your Portfolio

​For Git-Based Deployments

​For CLI Deployments

​Custom Domain Setup

​Environment Variables (If Needed)

​Configuration Tips

​vercel.json Configuration

​Custom 404 Page

​Performance Optimization

​Preview Deployments

​Vercel Analytics (Optional)

​Troubleshooting

​Best Practices

​Next Steps

Edge Functions

Image Optimization

Web Analytics

Speed Insights

Build docs developers (and LLMs) love

Overview

Prerequisites

Why Choose Vercel?

Method 1: Import from GitHub (Recommended)

Method 2: Manual Upload via CLI

Method 3: Drag-and-Drop Upload

Updating Your Portfolio

For Git-Based Deployments

For CLI Deployments

Custom Domain Setup

Environment Variables (If Needed)

Configuration Tips

vercel.json Configuration

Custom 404 Page

Performance Optimization

Preview Deployments

Vercel Analytics (Optional)

Troubleshooting

Best Practices

Next Steps