通过GithubAction将内容部署到vps

创建Action文件

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

参考文档

# 标题
name: GitHub Actions 部署 vitepress 博客
# 触发时机:表示推送master分支时触发
on:
  push:
    branches:
      - master
# 设置时区
env:
  TZ: Asia/Shanghai
# 任务列表
jobs:
  build-and-deploy:
    # 运行环境
    runs-on: ubuntu-latest
    # 步骤
    steps:
    # 步骤1:安装Node.js
    - name: Setup Node.js
      uses: actions/setup-node@v4
      with:
        node-version: 20
    # 步骤2:检出代码
    - name: Checkout
      uses: actions/checkout@v4
      with:
        # 保留 Git 信息
        fetch-depth: 0
    # 步骤3:安装yarn
    - name: Install yarn
      run: npm install -g yarn
    # 步骤n:删除node_modules,替换或更新包时使用
    # - name: Delete node_modules
    #   run: rm -fr node_modules
    # 步骤4:安装依赖
    - name: Install dependencies
      run: yarn install
    # 步骤5:删除cache和dist
    - name: Clean up cache and dist
      run: |
        rm -rf Docs/.vitepress/cache
        rm -rf Docs/.vitepress/dist
    # 步骤6:构建VitePress
    - name: Build VitePress
      run: yarn run build
    # 步骤7:部署到Github Pages
    # - name: Deploy to Github Pages
    #   uses: peaceiris/actions-gh-pages@v3
    #   with:
    #     github_token: ${{ secrets.VITEPRESS_BLOG_TOKEN }} # 自定义的action环境变量
    #     publish_dir: .vitepress/dist # 指定部署目录
    #     publish_branch: gh-pages # 指定部署分支
    #     dotfiles: true # 允许使用.gitignore文件
    # 步骤8: scp部署到 vps
    - name: Deploy to VPS
      uses: appleboy/scp-action@master
      with:
        host: ${{ secrets.SERVER_HOST }} # 服务器地址
        username: ${{ secrets.SERVER_USER }} # 服务器用户名
        port: ${{ secrets.SERVER_PORT }} # 服务器端口
        key: ${{ secrets.SERVER_SSH_KEY }} # 服务器SSH 密钥
        # password: ${{ secrets.SERVER_USER_PASSWORD }} # 服务器用户密码
        strip_components: 2 # 跳过指定目录
        source: 'Docs/.vitepress/dist' # 源目录
        target: ${{ secrets.SERVER_TARGET }} # 目标目录

配置 Action 环境变量

1. 右上角头像 => Settings => Developer Settings => Personal access tokens => Tokens(classic) => Generate new token

vitepress_blog_token

::: warning 注意 存储生成的 token ，请妥善保管，永远只出现一次。 :::

仓库添加环境变量

1. 打开仓库主页 => Settings => Secrets and variables => Actions => New repository secret => 填入变量名和 token

2. 推送本地代码，github action 检测到 ci.yml 文件，自动触发部署，将编译后的 dist 部署到 gh-pages 分支

配置github pages

1. 打开仓库主页 => Settings => Pages => Source => 选择 gh-pages 分支 => Save

github_pages

配置action scp 部署到vps

1. 登录 vps ，生成 SSH 秘钥

   # 生成ssh秘钥
   ssh-keygen -t rsa -b 4096 -C "github-actions-node"
   # 将公钥复制到服务器的authorized_keys文件中
   cat /root/.ssh/id_rsa.pub >> /root/.ssh/authorized_keys

2. 配置 Actions Secrets

   # 打印私钥，复制粘贴到github action环境变量中，命名为SSH_KEY
   cat /root/.ssh/id_rsa

参考

1. GitHub Actions 入门教程

2. Github 管理个人访问令牌

3. 通过 Github Action 将 GitHub 上的内容部署到 VPS

4. 使用 GitHub Actions 在代码更新时自动部署代码到 VPS

5. vitepress项目使用github的action自动部署到github-pages中

6. 使用Github Actions自动部署Golang应用到VPS服务器

7. 使用 GitHub Actions 部署 Next.js 项目到 VPS