Leelaa-Blog

切换主题

扫码开始移动端阅读

如何配置 VitePress 自动部署到服务器中

共
848
字
需要≈
4.24
分钟
VitePress
web

2025年3月8号，我已经将博客从 Vercel 迁移到了阿里云的服务器，备案也从腾讯迁移到阿里，但不得不说，杭州这个城市的互联网办事效率真的高，一天就完成了迁移。

不过，首先遇到的问题是，我没有了自动部署，没有了 Vercel 的边缘函数，没有了很多服务。但是，为了更好的用户体验，我还是要迁移（毕竟服务器买了，如果不用，岂不是太浪费了）。

最让人心烦的莫过于 CI/CD，熟悉我的朋友都知道，我的博客是使用 VitePress 的。也就是说，现在我写博客的流程变得非常长：写一篇文章，运行命令生成短链，生成文章信息，生成 SEO 信息，接着还要 Git 提交到 GitHub，然后编译，最后打开服务器，上传文件。这个过程真的很麻烦，于是我决定搞个 CI/CD。

说到 CI/CD（持续集成持续部署），我们首先想到的是 Jenkins，我也尝试了一下。但是没有试完，就被朋友劝退了，因为我的服务器配置太低，运行时会卡死。

听人劝吃饱饭，所以我放弃了 Jenkins，转向了 GitHub Actions。

于是，我开始了我的 VitePress 自动部署到服务器之旅。

第一步：配置 GitHub Actions ​

接下来，我们需要在 GitHub Actions 中创建一个 workflow 文件。以下是完整的 deploy.yml 配置：

yaml
name: Deploy VitePress

on:
  push:
    branches:
      - master

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

    steps:
      - name: Checkout repository
        uses: actions/checkout@v4
        with:
          fetch-depth: 0

      - name: Set up Node.js 23.9.0
        uses: actions/setup-node@v4
        with:
          node-version: '23.9.0'

      - name: Install dependencies with npm
        run: npm install

      - name: Build VitePress
        run: npm run build

      - name: Install sshpass
        run: sudo apt-get install -y sshpass

      - name: Clean old files on Server
        run: |
          sshpass -p "${{ secrets.SERVER_PASSWORD }}" ssh -o StrictHostKeyChecking=no ${{ secrets.SERVER_USER }}@${{ secrets.SERVER_HOST }} "rm -rf /www/wwwroot/blog/*"
          echo "Old files deleted."

      - name: Deploy to Server
        run: |
          sshpass -p "${{ secrets.SERVER_PASSWORD }}" scp -o StrictHostKeyChecking=no -r .vitepress/dist/* ${{ secrets.SERVER_USER }}@${{ secrets.SERVER_HOST }}:/www/wwwroot/blog
          echo "Deployment completed."

这个 workflow 文件做了以下几件事情：

  1. 触发条件: 当推送到 main 分支时，触发部署。
  2. 安装 Node.js: 安装 Node.js 版本 23.9.0。
  3. 安装依赖: 使用 npm install 安装依赖。
  4. 构建 VitePress: 使用 npm run build 构建站点。
  5. 清理服务器旧文件: 删除服务器上旧的文件。
  6. 部署到服务器: 将构建后的文件通过 SCP 上传到服务器。

第二步：配置 GitHub Secrets ​

登录 GitHub 后，进入你的仓库设置页面。

  1. 在页面右上角点击 Settings（设置）选项卡。

  2. 在左侧菜单中点击 Secrets，进入 Secrets 管理页面。

  3. 点击右上角的 New repository secret 按钮，添加以下几个 Secrets：

    • SERVER_HOST: 你的服务器 IP 或域名。
    • SERVER_USER: 你的服务器用户名（如 root）。
    • SERVER_PASSWORD: 你的服务器密码。

第三步：测试 ​

最后，我们需要测试我们的 workflow。

bash
git commit -m "Update VitePress"
git push origin main

如果一切正常，你应该能够在 GitHub Actions 中看到你的 workflow 正在运行。

总结 ​

感谢 GitHub! 每个月 2000 分钟的免费额度，对于我这种小博客来说绰绰有余了。但是，我的博客有点大，上传的时间比较久~大概需要5分钟。

恭喜！你已经成功配置了 GitHub Actions 来部署 VitePress 到服务器。

如果你有任何问题，请随时联系我。

上次更新: