使用 GitHub Actions 自动构建 Astro 博客并部署至 VPS

前言:为什么要自动化?

以前每次写完文章,我都需要经历繁琐的步骤:pnpm build 生成静态文件 -> 打开 FTP/SFTP 软件 -> 连接服务器 -> 手动上传文件。这个过程不仅麻烦,还容易传错文件。现在可以用 GitHub Actions,只需要一个 git push,GitHub 就会自动帮我跑完所有流程,几分钟后网站就自动更新了。这篇文章记录了完整的配置过程。

准备工作

  1. 服务器 (VPS):拥有一台 Linux 服务器。
  2. GitHub 仓库:存放博客源码(私有仓库也可以)。
  3. 项目框架:本文以 Astro + PNPM 为例,其他静态框架(Hexo/VuePress)逻辑通用。

第一步:配置 SSH 免密登录

为了让 GitHub 的服务器能连接到我的 VPS,需要使用 SSH 密钥对。

本地生成密钥:

ssh-keygen -t rsa -b 4096 -f ./github_action_key -C "github-actions"

生成后会得到私钥(无后缀)和公钥(.pub)。

上传公钥到 VPS: 将 .pub 文件内容追加到服务器的 ~/.ssh/authorized_keys 文件中。

第二步:在 GitHub 设置 Secrets

为了安全,不能把私钥和服务器 IP 直接写在代码里,需要用到 GitHub 仓库的 Secrets 功能。

进入仓库 -> Settings -> Secrets and variables -> Actions,添加以下变量:

SSH_PRIVATE_KEY: 刚才生成的私钥内容(包含 —–BEGIN… 开头)

REMOTE_HOST: 服务器 IP 地址

REMOTE_USER: 服务器用户名(如 root)

REMOTE_TARGET: 网站在服务器上的绝对路径(如 /www/wwwroot/myblog/)

第三步:编写 Workflow 脚本

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

这是我最终调试通过的配置(基于 Astro + PNPM):

name: Deploy to VPS

on:
  push:
    branches: [ master ] # 只有推送到 master 分支才触发
  workflow_dispatch:

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout 🛎️
        uses: actions/checkout@v4

      - name: Setup PNPM 📦
        uses: pnpm/action-setup@v4
        with:
          version: 9.14.4
          run_install: false

      - name: Setup Node.js 🟢
        uses: actions/setup-node@v4
        with:
          node-version: '22'
          cache: 'pnpm'

      - name: Install Dependencies 🔧
        run: pnpm install --no-frozen-lockfile

      - name: Build Site 🏗️
        run: pnpm run build

      - name: Deploy to Server 🚀
        uses: easingthemes/ssh-deploy@main
        env:
          SSH_PRIVATE_KEY: ${{ secrets.SSH_PRIVATE_KEY }}
          REMOTE_HOST: ${{ secrets.REMOTE_HOST }}
          REMOTE_USER: ${{ secrets.REMOTE_USER }}
          TARGET: ${{ secrets.REMOTE_TARGET }}
          REMOTE_PORT: 22 # 如果你的 SSH 端口不是 22,这里要指定
          ARGS: "-rltgoDzvO --delete"
          SOURCE: "dist/" # Astro 默认生成目录
          EXCLUDE: "/dist/, /node_modules/"

© 版权声明
THE END
喜欢就支持一下吧!
点赞75赞赏 分享