GitHub Actions同步当前项目到一个新仓库

技术 JS/TS
1

首先说下场景，最近又捣鼓升级了一下Git个人网站的vuepress版本，弄完之后就想在提交代码的时候把构建的资源再提交到一个新的Git仓库；

以前都是手动执行打包部署的node脚本，发布构建的资源到指定分支，最后用action自动更新，这次就想再简化一下流程，提交代码的时候直接就执行这些操作。

The initial version

因为平时项目里面也用到了husky，就先想着我再加一个hooks的监听执行命令就ok了，

在.husky文件夹里创建一个pre-push文件，

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
npm run publish # 执行package.json里面的打包命令；
# "publish": "node publish"，用node执行publish.js，在publish.js中执行shell文件

最终就是运行这个shell文件的内容


#!/usr/bin/env sh

确保脚本抛出遇到的错误


set -e


生成静态文件


npm run build


进入生成的文件夹


cd .vuepress/dist


git init

git add -A

git commit -m ‘deploy’


如果发布到 https://.github.io/


git push -f 需要提交的git仓库ssh路径 master:gh-pages


cd -

做完上面这些，想要的效果也能达到了，但是因为整个构建的过程是在本地执行，就非常的耗时，

可以想象一下，每次push代码，就要弹出来一个运行任务的黑色窗口，执行完了之后才能完成整个push操作，

Final version

之前是GitHub和Gitee都整了个GitPage，最近Gitee那边的挂了一直没好，直接就all in Github了，

1. 生成SSH密钥

因为使用提交代码的SSH密钥会提示重复，所以这还得再重新生成，执行下面的命令，

ssh-keygen -t rsa -b 4096 -C "your_email@example.com"

执行之后会提示你输入文件保存路径和文件名。我设置的名字是id_rsa_github_action，所以密钥对会保存在 ~/.ssh/id_rsa_github_action（私钥）和 ~/.ssh/id_rsa_github_action.pub（公钥），

2. 目标仓库添加公钥

打开id_rsa_github_action.pub文件，复制公钥内容，

进入目标Git仓库的GitHub页面，转到"Settings" -> "Deploy keys"。

点击"Add deploy key"按钮，粘贴公钥，并勾选"Allow write access"。

3. 源仓库添加私钥

打开id_rsa_github_action文件，复制私钥，

进入源代码仓库的GitHub页面，转到"Settings" -> "Secrets and variables" -> "Actions"。

点击"New repository secret"按钮，创建一个名为SSH_PRIVATE_KEY密钥，并将私钥内容粘贴进去。

4. 配置GitHub Actions工作流

创建.github/workflows/deploy.yml文件，添加下面内容：

name: Deploy VuePress Site

on:

push:

branches:

- main  # 监听触发部署的分支


jobs:

build-and-deploy:

runs-on: ubuntu-latest


steps:
- name: Checkout repository
  uses: actions/checkout@v2
  
- name: Set up Node.js
  uses: actions/setup-node@v2
  with:
    node-version: '20'  # 指定Node版本

- name: Install dependencies
  run: npm install

- name: Build VuePress site
  run: npm run build  # 构建

- name: Deploy to another Git repository
  env:
    DEPLOY_REPO: git@github.com:yourusername/yournewrepo.git  # 替换为你的目标仓库地址
    DEPLOY_BRANCH: gh-pages  # 目标仓库分支
    SSH_PRIVATE_KEY: ${{ secrets.SSH_PRIVATE_KEY }}

  run: |
    mkdir -p ~/.ssh
    echo "${SSH_PRIVATE_KEY}" > ~/.ssh/id_rsa
    chmod 600 ~/.ssh/id_rsa
    ssh-keyscan github.com >> ~/.ssh/known_hosts
    git config --global user.name "github-actions[bot]"
    git config --global user.email "github-actions[bot]@users.noreply.github.com"
    cd .vuepress/dist  # 源仓库需要提交出去的代码文件夹
    git init
    git remote add origin $DEPLOY_REPO
    git checkout -b $DEPLOY_BRANCH
    git add .
    git commit -m "Deploy VuePress site"
    git push --force origin $DEPLOY_BRANCH

现在就可以在源仓库设置的分支中提交代码了，actions在监听到提交之后就自动运行工作流，

总结

还踩了挺多坑的，开始不知道是要设置Deploy keys，设置了半天的secret，各种私钥密钥的尝试，一直都是报错没有权限，提示Error: The deploy step encountered an error: The process '/usr/bin/git' failed with exit code 128,

最终的效果就是，在提交源仓库代码的时候，会触发Git Actions执行打包操作，完成之后会提交代码到目标仓库，目标仓库触发Git Actions更新Git Page。

这是一个从 https://juejin.cn/post/7369019487624544267 下的原始话题分离的讨论话题