Vercel
Deploy an Astro Website to Vercel
Vercel is a modern frontend hosting platform with automatic framework detection, instant preview deploys, and a global edge network.
This guide walks you through deploying your Blacks project to Vercel.
Vercel Host
Before You Begin
Make sure your Blacks project is pushed to GitHub. Read how to push on GitHub →
Step 1 — Register on Vercel
Sign up at vercel.com using your GitHub account. This connects Vercel to your repositories automatically.
Step 2 — Create a New Project
From your Vercel dashboard:
- Click Add New → Project
- Select Continue with GitHub
- Choose your Blacks repository from the list
- Click Import
Step 3 — Configure Build Settings
Vercel auto-detects Astro and fills in the settings for you. Verify they match:
| Setting | Value |
|---|---|
| Framework preset | Astro |
| Build command | npm run build |
| Output directory | dist |
| Install command | npm install |
If the settings are correct, click Deploy.
Step 4 — Your Site Is Live
Vercel builds and deploys your site. When finished, your live URL is:
https://your-project.vercel.appEvery future push to your Git repository triggers an automatic build and deploy.
Automatic Deploys
Once connected, Vercel watches your repository:
| Action | Result |
|---|---|
Push to main | Production deploy |
| Push to another branch | Preview deploy with unique URL |
| Open a pull request | Preview deploy with a PR comment |
You never manually deploy again.
Add a Custom Domain
To use your own domain:
- Go to your Vercel project dashboard
- Click Settings → Domains
- Add your domain name
- Vercel shows the DNS records you need to configure
- Log in to your domain registrar and update the records:
- A record → Vercel’s IP
- CNAME record →
cname.vercel-dns.com
- Wait for DNS propagation (5–30 minutes)
HTTPS is enabled automatically once DNS is configured.
Alternative — Use Vercel Nameservers
You can also change your domain’s nameservers to Vercel’s:
- In Vercel, go to Settings → Domains
- Click Add domain and follow the setup
- Vercel provides nameservers (like
ns1.vercel-dns.com) - Log in to your domain registrar and replace your nameservers with Vercel’s
- Wait for propagation
Build Settings Summary
| Setting | Value |
|---|---|
| Framework preset | Astro |
| Build command | npm run build |
| Output directory | dist |
| Node version | 20 or newer |
Troubleshooting
| Problem | Solution |
|---|---|
| Build fails | Check that Node.js version is 20 or newer in project settings |
| 404 errors | Verify output directory is dist |
| Images not loading | Check site URL in astro.config.mjs |
| Custom domain not working | Wait for DNS propagation, or check records |
| Changes not showing | Hard refresh in your browser (Ctrl + Shift + R) |
Useful Links
Next Step
Explore other hosting options:
👉 Netlify — alternative static host with drag-and-drop deploy