如何配置 VitePress 自动部署到服务器中
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
配置:
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 文件做了以下几件事情:
- 触发条件: 当推送到
main
分支时,触发部署。 - 安装 Node.js: 安装 Node.js 版本
23.9.0
。 - 安装依赖: 使用
npm install
安装依赖。 - 构建 VitePress: 使用
npm run build
构建站点。 - 清理服务器旧文件: 删除服务器上旧的文件。
- 部署到服务器: 将构建后的文件通过 SCP 上传到服务器。
第二步:配置 GitHub Secrets
登录 GitHub 后,进入你的仓库设置页面。
在页面右上角点击 Settings(设置)选项卡。
在左侧菜单中点击 Secrets,进入 Secrets 管理页面。
点击右上角的 New repository secret 按钮,添加以下几个 Secrets:
- SERVER_HOST: 你的服务器 IP 或域名。
- SERVER_USER: 你的服务器用户名(如
root
)。 - SERVER_PASSWORD: 你的服务器密码。
第三步:测试
最后,我们需要测试我们的 workflow。
git commit -m "Update VitePress"
git push origin main
如果一切正常,你应该能够在 GitHub Actions 中看到你的 workflow 正在运行。
总结
感谢 GitHub! 每个月 2000 分钟的免费额度,对于我这种小博客来说绰绰有余了。但是,我的博客有点大,上传的时间比较久~大概需要5分钟。
恭喜!你已经成功配置了 GitHub Actions 来部署 VitePress 到服务器。
如果你有任何问题,请随时联系我。