一篇教你程式碼同步 Github 和 Gitee

冴羽發表於2021-12-21
GithubGitee

前言

在上篇《一篇帶你用 VuePress + Github Pages 搭建部落格》，我們成功的用 VuePress 搭建了部落格並部署到 Github Pages，但由於 Github 的訪問問題，我們可以選擇把倉庫部署到 Gitee 一份，利用 Gitee 的 Pages 服務再生成一份靜態網站用於備用。

Gitee 匯入倉庫

上篇我們已經在 Github 建立了部落格倉庫，現在我們在 Gitee 繫結 Github 賬號後，選擇倉庫匯入：

倉庫建立後，問題也來了，即我們一份本地倉庫，如何保證 Github 和 Gitee 倉庫程式碼的同步呢？

1. 手動同步

在 Gitee 的專案主頁，提供了同步的按鈕，你只用點一下，即可與 Github 同步更新，但是注意這裡的同步功能預設是強制同步。

有點麻煩的是，我們需要在推送到 Github 後，再到 Gitee 專案主頁手動點選一下。

2. 推送兩個倉庫

除此之外，我們也可以在 sh 指令碼檔案裡，直接推送到兩個倉庫地址上，我們修改一下上篇的指令碼：

#!/usr/bin/env sh

# 確保指令碼丟擲遇到的錯誤
set -e

# 生成靜態檔案
npm run docs:build

# 進入生成的資料夾
cd docs/.vuepress/dist

git init
git add -A
git commit -m 'deploy'

# 如果釋出到 https://<USERNAME>.github.io/<REPO>
git push -f git@github.com:mqyqingfeng/learn-typescript.git master:gh-pages
git push -f git@gitee.com:mqyqingfeng/learn-typescript.git master:gh-pages

cd -

當我們執行 sh deploy.sh 的時候，就會自動往兩個倉庫裡推送。

3. Github Actions 自動同步

我們也可以利用 Github Actions，寫一個工作流，在發現 Github 部落格倉庫的 gh-pages 分支程式碼更新後，自動同步當前程式碼到 Gitee 上。

關於 Github Actions 的介紹，可以參考阮一峰老師的 《GitHub Actions 入門教程》。

為了實現 Gitee 和 Github 的同步，我們需要藉助一個 action，還好業界已經有現成的實現了，這裡我採用的是 Hub Mirror Action，我們可以看到使用的示例程式碼：

steps:
- name: Mirror the Github organization repos to Gitee.
  uses: Yikun/hub-mirror-action@master
  with:
    src: github/kunpengcompute
    dst: gitee/kunpengcompute
    dst_key: ${{ secrets.GITEE_PRIVATE_KEY }}
    dst_token: ${{ secrets.GITEE_TOKEN }}
    account_type: org

其中有四個必填項：

  • src 表示需要被同步的源端賬戶名，即我們 Github 的賬戶名，因為我的 Github ID 是 mqyqingfeng，所以這裡我應該改成 github/mqyqingfeng。
  • dst 表示需要同步到的目的端賬戶名，即我們 Gitee 的賬戶名，因為我的 Gitee ID 也是 mqyqingfeng，所以這裡我應該改成 gitee/mqyqingfeng。
  • dst_key 表示用於在目的端上傳程式碼的私鑰，然後將其儲存在 Secrets 中。

具體的操作步驟如下：

獲取私鑰：

cat ~/.ssh/id_rsa

複製私鑰內容，然後在要同步的 Github 倉庫中，選擇 "Setting" -> "Secrets" -> "New repository secret"

填入 Secret 內容，Name 命名為 "GITEE_PRIVATE_KEY"，Value 為複製的內容[
](https://lovelijunyi.gitee.io/...)

然後點選 Add secret 即可。

  • dst_token 建立倉庫的API tokens， 用於自動建立不存在的倉庫。這裡我們從 Gitee 上獲取，具體地址為 https://gitee.com/profile/personal_access_tokens。生成並複製 Token，然後同樣的步驟，儲存在 Github 的 Secrets 中，Name 為 "GITEE_TOKEN"

那麼我們就可以在倉庫建立的根目錄下，建立目錄 .github/workflows ，然後建立一個名為syncToGitee.yml 的檔案：

name: syncToGitee
on:
  push:
    branches:
      - gh-pages
jobs:
  repo-sync:
    runs-on: ubuntu-latest
    steps:
      - name: Mirror the Github organization repos to Gitee.
        uses: Yikun/hub-mirror-action@master
        with:
          src: 'github/mqyqingfeng'
          dst: 'gitee/mqyqingfeng'
          dst_key: ${{ secrets.GITEE_PRIVATE_KEY }}
          dst_token:  ${{ secrets.GITEE_TOKEN }}
          static_list: "learn-typescript"
          force_update: true
                debug: true

其中，static_list 表示單一倉庫同步，force_update 為 true 表示啟用 git push -f 強制同步，debug 為 true 表示啟用 debug 開關，會顯示所有執行命令。

當我們把這樣的檔案提交到 Github，Github 會自動檢測並執行該指令碼。但是現在還有幾個問題要注意：

  1. 因為我們是提交到 Github 的 gh-pages 分支上，這個檔案和目錄需要寫在 gh-pages 分支
  2. 觀察我們的指令碼程式碼，我們就會發現，每次我們 sh deploy.sh 的時候，都是編譯程式碼到 dist 目錄，然後重新 git init ，最後強制提交。所以我們在專案的根目錄建立 .github/woorkflows/syncToGitee.yml 並沒有什麼用，一來提交的是 dist 目錄裡的程式碼，二是每次還都會清空重新編譯生成程式碼提交。

為此，我們可以在指令碼里新增程式碼，每次編譯完後，再拷貝外層的 .github/woorkflows/syncToGitee.yml 到 dist 目錄裡，再提交到 Github 上。

所以我們依然在專案根目錄新增目錄和檔案，此時的檔案結構如下：

.
├─ docs
│  ├─ README.md
│  └─ .vuepress
│     └─ config.js
└─ .github
│  └─ workflows
│            └─ syncToGitee.yml
└─ package.json
└─ deploy.sh

指令碼檔案程式碼如下：

#!/usr/bin/env sh

# 確保指令碼丟擲遇到的錯誤
set -e

# 生成靜態檔案
npm run docs:build

# 進入生成的資料夾
cd docs/.vuepress/dist

# 拷貝目錄和檔案
cp -r ../../../.github ./

git init
git add -A
git commit -m 'deploy'

# 如果釋出到 https://<USERNAME>.github.io/<REPO>
git push -f git@github.com:mqyqingfeng/learn-typescript.git master:gh-pages

cd -

此時我們再執行 sh deploy.sh 程式碼提交到 Github，就可以在倉庫的 Actions 中看到執行記錄：

執行時間大概一分鐘左右，Gitee 的程式碼就會自動同步。

至此，我們實現了 Github 與 Gitee 程式碼倉庫的同步。

系列文章

系列文章目錄地址：https://github.com/mqyqingfeng/Blog

微信：「mqyqingfeng」，加我進冴羽唯一的讀者群。

如果有錯誤或者不嚴謹的地方，請務必給予指正，十分感謝。如果喜歡或者 有所啟發，歡迎 star，對作者也是一種鼓勵。

相關文章