Deploying to Vercel

Vercel is the recommended hosting platform for PhantomStudio sites. It offers free hosting, automatic HTTPS, a global CDN, and GitHub integration.

Why Vercel?

• Free tier: enough for personal and small business sites
• Automatic deploys: every push to GitHub triggers a new build
• Global CDN: your site loads fast worldwide
• Preview deployments: every branch gets its own preview URL
• Custom domains: use your own domain for free
• Server rendering: Dynamic and Dynamic, cached pages work without extra setup

Connecting Vercel

Step 1: Get a Vercel Token

1. Go to vercel.com and sign in (or create an account)
2. Open Account Settings › Tokens (the connect dialog's Create Token on Vercel button goes there)
3. Click Create Token
4. Name it "PhantomStudio" and select an expiration
5. Copy the token (you won't see it again)

Step 2: Connect It to PhantomStudio

You can connect from the dashboard or from the editor:

• Dashboard: in the Connections panel, under Deployments, click Connect next to Vercel. This saves the token for your account.
• Editor: open Publish ▾ › Set up deployment. This saves the token and deploys the open project in one go.

In the Connect Vercel dialog:

1. Paste the token under Paste Your Token Here
2. If the project should live under a Vercel team, open Using a team account? (optional) and enter the team ID
3. Click Next

Step 3: Deploy the Project

If you connected from the editor, this already happened. From the dashboard, open the project's ⋯ menu and click Deploy to Vercel.

PhantomStudio creates the Vercel project from your GitHub repository and starts the first deployment. When it's done, the dialog shows View Your Site.

From then on, Vercel deploys every push to the repository's production branch.

Deployment Settings

Vercel detects Astro and uses its default build settings:

• Build Command: npm run build
• Output Directory: dist
• Install Command: npm install

You rarely need to change these. The Vercel project name is your repository name; you can rename it in Vercel later.

Environment Variables

Open Publish ▾ › Environment variables to see and edit the project's Vercel environment variables.

You don't need to add the WordPress or WooCommerce variables yourself: saving Site ▾ › WordPress copies them to Vercel. Deploy again after changing variables so the build uses the new values.

Getting Changes Live

Changes go live when they reach GitHub:

1. Make your changes in the editor (they save on their own)
2. Click Publish in the top right
3. Review what's going live and confirm

Publish commits and pushes your changes to GitHub, and Vercel builds and deploys them. Updates usually go live in 1-2 minutes. See Publishing.

Deploying Without New Changes

Publish ▾ › Deploy now rebuilds what's on GitHub, for example to pick up new WordPress content on static pages. If you have changes that aren't on GitHub yet, it offers to commit and push them first. To deploy from WordPress or a script instead, use a deploy hook.

Deployment Status

• Publish ▾: the Live site section shows the latest deployment and an Open link
• Dashboard: the project row shows Live, Building or Deploy error
• Vercel dashboard: full logs and history (the project's ⋯ menu on the dashboard has Vercel Dashboard)

Custom Domains

Adding a Custom Domain

1. Open Publish ▾ › Domains in the editor (or Manage Domains in the project's ⋯ menu on the dashboard)
2. Enter your domain (for example example.com or www.example.com)
3. Add the DNS records the dialog shows at your DNS provider
4. Wait for the domain to change from Pending verification to Verified & Active

You can also add domains in Vercel under the project's Settings › Domains.

DNS Configuration

Option A: Vercel Nameservers (Recommended) Point your domain's nameservers to Vercel:

• ns1.vercel-dns.com
• ns2.vercel-dns.com

Option B: A/CNAME Records Add these records at your DNS provider:

• A Record: 76.76.21.21
• CNAME: cname.vercel-dns.com

SSL/HTTPS

Vercel automatically provisions and renews SSL certificates. Your site is HTTPS-only with no configuration needed.

Deployment Logs

If a deployment fails, check the logs:

1. Go to the Vercel dashboard
2. Click the failed deployment
3. View Build Logs for details

Common issues:

• Missing dependencies: check package.json
• Build errors: check your Astro code for errors
• Out of memory: simplify the build or upgrade your Vercel plan

Rollbacks

If a deployment breaks your site:

1. Open Publish ▾ › Deploy history
2. Find the last working deployment
3. Click Rollback and confirm

Your site goes back to that version right away. You can do the same in the Vercel dashboard (Deployments, then Promote to Production on a deployment). A rollback doesn't change your code: the next publish deploys the latest code again.

Disconnecting Vercel

To disconnect Vercel from PhantomStudio:

1. Open the dashboard
2. In the Connections panel, under Deployments, find Vercel
3. Click Disconnect

This removes the token from PhantomStudio but doesn't delete your Vercel projects.

Vercel Limits (Free Tier)

The free tier includes:

• 100 GB bandwidth/month
• Unlimited static deployments
• 1 concurrent build
• Serverless functions (100 GB-hours/month)

That's enough for most personal and small business sites. Check Vercel's pricing for current limits.

Alternative Hosts

PhantomStudio also deploys to Cloudflare Workers. Netlify and Coolify are listed as coming soon in the Connections panel.

Fully static sites also work on any static host (Netlify, GitHub Pages, AWS S3 + CloudFront and others) through that host's own GitHub integration. Sites with Dynamic pages or WooCommerce need a server-capable host.

Troubleshooting

"You need to add a Login Connection to your GitHub account"

This error means your Vercel account is not connected to GitHub. Vercel needs GitHub access to pull your repository and set up automatic deployments.

To fix this:

1. Go to Vercel Authentication Settings
2. Connect your GitHub account under the authentication options
3. Return to PhantomStudio and try deploying again

"Build Failed"

1. Check build logs for specific errors
2. Run npm run build in the editor's terminal (Code mode) to see the same error
3. Fix any TypeScript or Astro errors

"Domain Not Working"

1. Verify DNS records are correct
2. Wait up to 48 hours for DNS propagation
3. Check for conflicting records

"Site Shows Old Content"

1. Clear your browser cache
2. Wait for CDN cache to expire (~1 minute)
3. Deploy again with Publish ▾ › Deploy now. Static pages only show new WordPress content after a deploy

"404 on Pages"

1. Check that pages exist in src/pages/
2. Verify dynamic routes are configured correctly
3. Check astro.config.mjs for routing settings

Next Steps

• Deploy Hooks: redeploy when WordPress content changes
• Deployment Troubleshooting: provider, build and domain issues
• WordPress Security: secure your WordPress installation