About 1353 wordsAbout 5 min
2025-08-17
You can deploy your Astro site to Vercel either through Vercel's website UI or using the official Vercel CLI (Command Line Interface). The process is the same for deploying static sites and on-demand rendered sites.
Push your code to your online Git repository (GitHub, GitLab, BitBucket, etc.).
Import your project to Vercel.
Vercel will automatically detect your Astro project and configure the correct settings for it.
Your application is now deployed! (e.g., astro.vercel.app)
After your project is imported and deployed, all subsequent pushes to branches (other than the production branch) will automatically generate Preview Deployments. Any changes made to the production branch (usually named "main") will automatically be deployed as Production Deployments.
vercel to deploy:pnpm add -g vercel
vercelWant to override the settings? [y/N], choose N (No).You can use vercel.json to override Vercel's default behavior and configure additional settings. For example, you can append headers to HTTP responses during deployment.
Netlify is another popular static website hosting platform. You can deploy your Mizuki blog directly from GitHub. Netlify will automatically build and deploy your project and provide continuous deployment functionality.
If your project is stored on GitHub, GitLab, BitBucket, or Azure DevOps, you can use Netlify's website UI to deploy your Astro site.
On the Netlify dashboard page, click "Add a new site".
Select "Import an existing project".
When you import your Astro repository from your Git provider, Netlify should automatically detect and pre-fill the correct configuration settings.
Ensure the following settings are entered, then click the "Deploy" button:
astro build or npm run builddistAfter deployment, you will be redirected to the site overview page. There, you can edit your site's details.
Depending on your deployment configuration, any future changes to the source repository will trigger preview and production deployments.
netlify.toml File
You can optionally create a new netlify.toml file at the root of your project repository to configure your build command and publish directory, as well as other project settings, including environment variables and redirects. Netlify will read this file and automatically configure your deployment.
To configure the default settings, create a netlify.toml file with the following content:
[build]
command = "npm run build"
publish = "dist"More information can be found in Netlify's blog post Deploy an Existing Astro Git Repository.
You can also create a new site on Netlify and associate your Git repository by installing and using the Netlify CLI.
Install the Netlify CLI tool globally:
npm install --global netlify-cliRun netlify login and follow the instructions to log in and authorize Netlify.
Run netlify init and follow the instructions.
Confirm your build command (astro build).
The CLI will automatically detect the build settings (astro build) and deployment directory (dist) and will provide an auto-generated netlify.toml file with these settings.
Push to Git to trigger the build and deployment.
The CLI will add a deployment key to the repository, meaning that every time you use git push, your site will automatically rebuild on Netlify.
If you want to host your blog on GitHub Pages, the Mizuki project typically includes a GitHub Actions workflow to help automate the deployment process. You need to ensure that the correct base path is configured in astro.config.mjs.
Configure the site and base options in astro.config.mjs.
import { defineConfig } from 'astro/config'
export default defineConfig({
site: 'https://astronaut.github.io',
base: 'my-repo',
})Site
The value of site must be one of the following:
https://<username>.github.iohttps://<random-string>.pages.github.io/Tips
Do not set the `base` parameter if:
- Your page is served from the root folder.
- Your source repository is located at `https://github.com/<USERNAME>/<USERNAME>.github.io`.
Base
The value of base should be your repository name, starting with a forward slash, e.g., /my-blog. This is so Astro understands that your site's root is /my-repo instead of the default /.
Warning
When this value is configured, all your internal page links must be prefixed with your base value:
<a href="/my-repo/about">About</a>For more information on configuring the base value, see the documentation.
Set up a custom domain
You can optionally set up a custom domain by adding a `./public/CNAME` file to your project.
This will deploy your site on your custom domain instead of `<YOUR_USERNAME>.github.io`.
Don't forget to configure DNS with your domain provider.
sub.mydomain.comTo configure Astro to use a custom domain with GitHub Pages, set your domain as the value of site. Do not set a value for base:
import { defineConfig } from 'astro/config'
export default defineConfig({
site: 'https://example.com',
})deploy.yml in the .github/workflows/ directory of your project and paste the following YAML configuration:name: Deploy to GitHub Pages
on:
# Trigger this workflow on every push to the `main` branch
# If you use a different branch name, replace `main` with your branch name
push:
branches: [ main ]
# Allow you to manually trigger this workflow from the Actions tab on GitHub
workflow_dispatch:
# Allow the job to clone the repo and create a page deployment
permissions:
contents: read
pages: write
id-token: write
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: Checkout your repository using git
uses: actions/checkout@v4
- name: Install, build, and upload your site
uses: withastro/action@v3
# with:
# path: . # The root location of your Astro project in the repository. (Optional)
# node-version: 20 # The specific Node.js version to use for building the site, defaults to 20. (Optional)
# package-manager: pnpm@latest # Which Node.js package manager should be used to install dependencies and build the site. Automatically detected based on the lockfile in the repository. (Optional)
deploy:
needs: build
runs-on: ubuntu-latest
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
steps:
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v4deploy.yml file so they can be processed when deploying to GitHub Pages.jobs:
build:
runs-on: ubuntu-latest
steps:
- name: Checkout your repository using git
uses: actions/checkout@v4
- name: Install, build, and upload your site
uses: withastro/action@v3
env:
# Use single quotes to wrap variable values
PUBLIC_EVM_WALLET_ADDRESS: '0x4bFc229A40d41698154336aFF864f61083E76659'Your site should now be live! When you push changes to your Astro project's repository, the GitHub Action will automatically deploy them for you.
First, run the build command:
npm run buildNext, compress the dist directory and upload it to your server. Deploy it using server software like Nginx or Apache as a static website solution.