Skip to content
扫码开始移动端阅读

如何配置 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 到服务器。

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

上次更新: