Skip to content
Blacks

Run on Hosting

Deploy and Publish Your Website

Once your project is on GitHub, the next step is to make it live on the internet. The Blacks template builds to static HTML — which means it can be hosted for free on any modern static hosting provider.

This guide walks you through deploying to Cloudflare Pages, Netlify, and Vercel. All three are free for static sites, and all three support automatic deploys from GitHub.

Before You Deploy

Make sure you have:

  1. A GitHub account with your Blacks project pushed
  2. Your site URL updated in astro.config.mjs
  3. The correct build settings:
    • Build command: npm run build
    • Output directory: dist

See the GitHub Repo guide if you haven’t pushed your project yet.

Cloudflare Pages is the recommended host for Blacks — free, fast, and offers unlimited bandwidth.

Steps:

  1. Go to pages.cloudflare.com and sign up with your GitHub account
  2. Click Create application → Pages → Connect to Git
  3. Select your Blacks repository from the list
  4. Set the build settings:
    • Build command: npm run build
    • Build output directory: dist
  5. Click Save and Deploy

Your site goes live in about 2 minutes at https://your-project.pages.dev.

Every future push to master (or main) triggers an automatic deploy.

Alternative: Netlify

Netlify is another solid choice — drag-and-drop deploy or Git integration.

Steps:

  1. Go to netlify.com and sign up with your GitHub account
  2. Click Add new site → Import an existing project
  3. Select GitHub and authorize Netlify
  4. Choose your Blacks repository
  5. Set the build settings:
    • Build command: npm run build
    • Publish directory: dist
  6. Click Deploy site

Your site goes live at https://your-project.netlify.app.

Alternative: Vercel

Vercel is designed for frontend frameworks and detects Astro automatically.

Steps:

  1. Go to vercel.com and sign up with your GitHub account
  2. Click Add New → Project
  3. Select your Blacks repository
  4. Vercel auto-detects Astro and fills in the settings:
    • Build command: npm run build
    • Output directory: dist
  5. Click Deploy

Your site goes live at https://your-project.vercel.app.

How Automatic Deploys Work

Once connected to GitHub, every push triggers a new build and deploy automatically.

ActionResult
Push to master (or main)Production deploy
Push to another branchPreview deploy with a unique URL
Open a pull requestPreview deploy with a PR comment

You never manually deploy again. Just commit and push.

Build Settings Summary

All three hosts use the same build settings:

SettingValue
Build commandnpm run build
Output directorydist
Node version20 or newer

Troubleshooting

ProblemSolution
Build failsCheck that Node.js 20+ is set in the host’s environment settings
404 errors on the live siteVerify the output directory is set to dist
Images not loadingCheck that the site URL in astro.config.mjs matches your domain
Slow first loadEnable CDN caching in the host’s settings
Custom domain not workingAdd the domain in the host’s dashboard and update your DNS records

Adding a Custom Domain

All three hosts let you add a custom domain for free.

General steps:

  1. Go to your project’s settings in the host dashboard
  2. Find the Domains or Custom domain section
  3. Add your domain (for example: yourdomain.com)
  4. Update your DNS records at your domain registrar:
    • A record → the host’s IP address
    • CNAME record → the host’s subdomain
  5. Wait for DNS propagation (usually 5–30 minutes)

HTTPS is enabled automatically on all three hosts.

Need Help?

If you run into any issues during deployment, our team is available to help.

Contact: axcora@gmail.com

Next Step

Your website is live. Continue to:

👉 Headless CMS — optional integration with a Git-based CMS