Astro 网站部署全攻略：从本地到线上

为什么选择 Astro？

Astro 是一个现代化的静态站点生成器，默认输出零 JavaScript 的纯静态 HTML，性能极致。对于我们外贸建站来说，Astro 特别适合：

  • 速度飞快：静态 HTML 直出，无需 PHP/数据库
  • 安全省心：没有后端攻击面，不需要频繁更新补丁
  • 部署简单：一堆 HTML 文件，扔到任何服务器都能跑
  • 开发体验好：支持 Markdown、MDX、组件化开发

部署前准备

在部署之前，确保你的项目已经可以正常构建：

# 安装依赖
npm install

# 本地构建测试
npm run build

# 预览构建结果
npm run preview

构建成功后，所有静态文件会输出到 dist/ 目录。部署的本质就是把这个目录的内容上传到服务器。

方式一：GitHub Pages（免费，推荐入门）

GitHub Pages 是最简单的部署方式，完全免费，适合个人博客和项目展示站。

1. 配置 Astro

在 astro.config.mjs 中设置正确的 site 和 base：

import { defineConfig } from 'astro/config';

export default defineConfig({
  site: 'https://你的用户名.github.io',
  base: '/你的仓库名',
  // ...
});

2. 创建部署脚本

项目根目录创建 .github/workflows/deploy.yml：

name: Deploy to GitHub Pages

on:
  push:
    branches: [main]

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - uses: actions/setup-node@v4
        with:
          node-version: 22

      - run: npm ci
      - run: npm run build

      - uses: peaceiris/actions-gh-pages@v4
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist

3. 启用 GitHub Pages

  1. 推送代码到 GitHub
  2. 进入仓库 Settings → Pages
  3. Source 选择 gh-pages 分支
  4. 等待 Actions 运行完成，网站就上线了

方式二：Cloudways（推荐生产环境）

对于外贸网站，我推荐使用 Cloudways 托管，性能更好、更稳定。

操作步骤

  1. 注册 Cloudways 账号并创建服务器（选择 DigitalOcean/Vultr 等）
  2. 创建一个 WordPress 应用（作为基础环境，我们会覆盖它）
  3. 通过 SFTP 连接服务器，在 applications/xxxxx/public_html/ 目录下：
# 本地构建
npm run build

# 上传 dist 目录内容到服务器
# 使用 SFTP 客户端（如 FileZilla）或命令行：
rsync -avz --delete dist/ 用户名@服务器IP:~/applications/xxxxx/public_html/

自动化部署脚本

可以写一个脚本自动化这个过程：

#!/bin/bash
# deploy-cloudways.sh

echo "🔨 构建中..."
npm run build

echo "📤 上传到 Cloudways..."
rsync -avz --delete \
  -e "ssh -p 22" \
  dist/ \
  user@your-server-ip:~/applications/appname/public_html/

echo "✅ 部署完成！"

Cloudways 的优势

  • 性能强劲：内置 Varnish、Redis、PHP-FPM 优化
  • 免费 SSL：一键申请 Let’s Encrypt 证书
  • 每日备份：自动备份，数据安全有保障
  • 全球机房：60+ 数据中心，用户访问更快

方式三：Netlify（免费，超快部署）

Netlify 是最快的部署方式之一，支持自动构建和预览。

操作步骤

  1. 将项目推送到 GitHub
  2. 登录 Netlify，点击 “Add new site” → “Import an existing project”
  3. 选择 GitHub 仓库
  4. 构建设置：
    • Build command: npm run build
    • Publish directory: dist
  5. 点击 Deploy

Netlify 会自动检测到 Astro 项目，每次推送代码都会自动重新构建和部署。

方式四：Vercel（免费，零配置）

Vercel 对 Astro 有原生支持，几乎是零配置部署。

  1. 推送代码到 GitHub
  2. 在 Vercel 导入仓库
  3. 框架会自动识别为 Astro
  4. 点击 Deploy 即可

方式五：传统虚拟主机/FTP

如果你用的是传统的 cPanel 虚拟主机：

# 构建
npm run build

# 使用 lftp 或 ftp 客户端上传
lftp -e "mirror -R dist/ /public_html/ ; quit" ftp.example.com

或者在 package.json 中添加 ftp 部署脚本：

{
  "scripts": {
    "deploy:ftp": "npm run build && lftp -e \"mirror -R dist/ /public_html/ ; quit\" ftp.example.com"
  }
}

自定义域名

无论使用哪种部署方式，都建议绑定自己的域名：

  1. 在域名 DNS 中添加记录（A 记录或 CNAME）
  2. 在部署平台配置自定义域名
  3. 开启 HTTPS / SSL

以 Cloudways 为例：

  1. 进入 Application → Domain Management
  2. 添加你的域名
  3. 到域名 DNS 添加 A 记录指向服务器 IP
  4. 一键申请 Let’s Encrypt SSL 证书

总结对比

平台 费用 适合场景 部署难度
GitHub Pages 免费 个人博客、文档站 ⭐ 简单
Netlify 免费/付费 个人项目、小型商业站 ⭐ 简单
Vercel 免费/付费 个人项目、前端应用 ⭐ 简单
Cloudways $11/月起 外贸站、企业官网 ⭐⭐ 中等
虚拟主机 不等 传统网站迁移 ⭐⭐ 中等

我的建议

  • 刚开始学习：用 GitHub Pages，完全免费，够用
  • 外贸建站 / 商业项目：用 Cloudways，性能好、支持多站点管理、有客服
  • 追求极简部署流程：用 Netlify 或 Vercel

目前这个站点（nutswp.com 的 Astro 版）就是通过 GitHub Actions 自动部署到 GitHub Pages 的，配合自定义域名使用。

如果你在部署过程中遇到问题，欢迎联系我交流讨论！