S
Specra Docs
Specra Docs Comprehensive documentation for your project

Documentation

Deploy to Vercel

Deploy your Specra documentation to Vercel with zero configuration

Deploy to Vercel

Vercel is the easiest way to deploy your Specra documentation. It's built by the creators of SvelteKit, so everything works perfectly out of the box.

Why Vercel?

  • Zero configuration - Automatic detection and setup
  • Instant deployments - Live in under 60 seconds
  • Automatic HTTPS - SSL certificates included
  • Edge network - Fast loading worldwide
  • Preview deployments - Every git push gets a URL
  • Free tier - Generous limits for documentation sites

Quick Deploy

Push to GitHub

If you haven't already, push your project to GitHub:
Code
bash 
1git init
2git add .
3git commit -m "Initial commit"
4git remote add origin https://github.com/username/repo.git
5git push -u origin main

Import to Vercel

  1. Go to vercel.com/new
  2. Click "Import Git Repository"
  3. Select your documentation repository
  4. Vercel auto-detects SvelteKit and configures everything
No manual configuration needed!

Deploy

Click "Deploy" and wait about 30-60 seconds. 
You'll get a production URL like `your-project.vercel.app`
Success
That's it! Your documentation is now live with automatic HTTPS and global CDN.

Configuration

Vercel automatically uses these settings for SvelteKit projects:

SettingValue
Build Commandnpm run build
Output Directory`
Install Commandnpm install
Node Version20.x (latest LTS)

Override Settings (Optional)

If you need custom settings, create vercel.json:

Code
json 
1{
2  "buildCommand": "npm run build",
3  "outputDirectory": "build",
4  "installCommand": "npm ci",
5  "framework": "sveltekit",
6  "regions": ["iad1"]
7}

Environment Variables

Add environment variables in the Vercel dashboard:

Go to Project Settings

Click your project → Settings → Environment Variables

Add Variables

Add your variables one by one: 
MEILISEARCH_HOST=https://search.example.com
MEILISEARCH_API_KEY=your-search-key
NEXT_PUBLIC_GA_ID=G-XXXXXXXXXX
Tip
Variables starting with `NEXT_PUBLIC_` are exposed to the browser. Keep sensitive keys without this prefix.

Redeploy

Environment changes require a redeploy. Go to Deployments → Click the three dots → Redeploy.

Custom Domain

Add your own domain to your Vercel project:

Add Domain

  1. Go to Project Settings → Domains
  2. Enter your domain (e.g., docs.example.com)
  3. Click "Add"

Configure DNS

Vercel shows you the DNS records to add. Typically:

For subdomain (docs.example.com):

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

For apex domain (example.com):

Type: A
Name: @
Value: 76.76.21.21

Wait for Verification

DNS propagation takes 5 minutes to 48 hours (usually under an hour). 
Vercel automatically provisions an SSL certificate once DNS is verified.

Automatic Deployments

Every git push triggers a deployment:

Production Deployments:

  • Commits to main branch deploy to production
  • Updates your live site automatically

Preview Deployments:

  • Commits to other branches get preview URLs
  • Pull requests get unique URLs for testing
  • Perfect for reviewing changes before merging

Preview URLs

Each preview deployment gets a unique URL:

your-project-git-feature-branch-username.vercel.app

Share this with your team to review changes before going live.

Deployment Settings

Branch Configuration

Control which branches deploy:

  1. Go to Settings → Git
  2. Set Production Branch (usually main)
  3. Enable/disable preview deployments for other branches

Deployment Protection

Protect production deployments:

Code
json 
1{
2  "git": {
3    "deploymentEnabled": {
4      "main": true,
5      "staging": "preview"
6    }
7  }
8}

Performance Optimization

Vercel automatically optimizes your deployment:

  • Edge caching - Static files cached globally
  • Image optimization - optimized images optimized automatically
  • Compression - Gzip/Brotli compression enabled
  • HTTP/2 - Faster multiplexed connections

Analytics

Enable Vercel Analytics for free:

  1. Go to Analytics tab
  2. Click "Enable Analytics"
  3. Add the Analytics component to your layout
Code
tsx 
1// app/layout.tsx
2import { Analytics } from '@vercel/analytics/react'
3 
4export default function RootLayout({ children }) {
5  return (
6    <html>
7      <body>
8        {children}
9        <Analytics />
10      </body>
11    </html>
12  )
13}

CI/CD Integration

Vercel acts as your CI/CD pipeline:

What runs on every deployment:

  • npm install (dependencies)
  • npm run build (SvelteKit build)
  • Automatic checks and validations
  • Deploy to edge network

GitHub Integration

Vercel comments on pull requests with:

  • Preview deployment URL
  • Build logs
  • Performance insights

Build Logs

View detailed build logs:

  1. Go to Deployments
  2. Click any deployment
  3. View the Building section for logs

Troubleshooting

Build Fails

Check Node version: Ensure you're using Node 18+. Add to package.json:

Code
json 
1{
2  "engines": {
3    "node": ">=18.0.0"
4  }
5}

Clear build cache:

  1. Go to Settings → General
  2. Scroll to Build & Development Settings
  3. Clear build cache

Environment Variables Not Working

  • Check variable names (case-sensitive)
  • Prefix client-side variables with NEXT_PUBLIC_
  • Redeploy after changing variables

Custom Domain Not Working

  • Verify DNS records are correct
  • Wait for DNS propagation (check with dig or nslookup)
  • Ensure CNAME points to cname.vercel-dns.com
  • Check domain verification status in Vercel dashboard

Monorepo Deployment

If your docs are in a monorepo:

  1. Set Root Directory in project settings
  2. Point to your docs folder (e.g., apps/docs)
  3. Vercel builds only that directory
Code
json 
1{
2  "buildCommand": "cd ../.. && npm run build:docs",
3  "outputDirectory": "build"
4}

Best Practices

Use preview deployments - Test changes before merging to main

Enable branch protection - Require preview deployment success before merging

Set up notifications - Get Slack/email alerts for deployment status

Monitor analytics - Track page views and performance

Use edge config - Store feature flags and config at the edge for instant updates

Pricing

Vercel's free tier includes:

  • Unlimited deployments
  • 100GB bandwidth/month
  • Automatic HTTPS
  • Preview deployments
  • Analytics (basic)

This is usually enough for documentation sites. Upgrade to Pro if you need:

  • More bandwidth
  • Advanced analytics
  • Password protection
  • Enterprise support

Next Steps

GitHub Pages

Deploy as static site to GitHub Pages

Netlify

Alternative static hosting platform

Deployment Overview

Back to deployment options

Performance

Optimize your documentation

Edit this page Report an issue
Previous
Deployment Overview
Next
Deploy to Specra Cloud