Preface
In the previous article "An Article Takes You to Build a Blog with VuePress + Github Pages" , we successfully built a blog with VuePress and deployed it to Github Pages, but due to Github access issues, we can choose to deploy the warehouse to Gitee. , Use Gitee's Pages service to generate a static website for backup .
Gitee import warehouse
In the previous article, we have created a blog warehouse on Github, and now we bind a Github account on Gitee, and select the warehouse to import:
After the warehouse was established, the question also came, that is, how do we ensure the synchronization of the Github and Gitee warehouse code for a local warehouse?
1. Manual synchronization
On the project homepage of Gitee, a synchronization button is provided. You can synchronize updates with Github with just one click, but note that the synchronization function here is mandatory synchronization by default.
The trouble is that we need to manually click on the Gitee project homepage after pushing to Github.
2. Push two warehouses
In addition, we can also directly push to the two warehouse addresses in the sh script file. Let's modify the script in the previous article:
#!/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 -
When we execute sh deploy.sh
, it will automatically push to the two warehouses.
3. Github Actions are automatically synced
We can also use Github Actions to write a workflow. After discovering that the gh-pages branch code of the Github blog warehouse has been updated, it will automatically synchronize the current code to Gitee.
For an introduction to Github Actions, you can refer to Teacher Yifeng's 161c0623e74b22 "GitHub Actions Getting Started Tutorial" .
In order to realize the synchronization between Gitee and Github, we need to use an action. Fortunately, the industry already has a ready-made implementation. Here I use Hub Mirror Action . We can see the sample code used:
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
There are four required items:
src
represents the source account name that needs to be synchronized, that is, our Github account name. Because my Github ID is mqyqingfeng, I should change it togithub/mqyqingfeng
.dst
indicates the name of the destination account that needs to be synchronized, that is, our Gitee account name. Because my Gitee ID is also mqyqingfeng, I should change it togitee/mqyqingfeng
.dst_key
represents the private key used to upload the code at the destination, and then save it in Secrets.
The specific steps are as follows:
Get the private key:
cat ~/.ssh/id_rsa
Copy the content of the private key, and then in the Github repository to be synchronized, select "Setting" -> "Secrets" -> "New repository secret"
Fill in the Secret content, Name is "GITEE_PRIVATE_KEY", Value is the copied content [
](https://lovelijunyi.gitee.io/posts/6b66.html)
Then click Add secret
.
- dst_token API tokens for creating warehouses, used to automatically create warehouses that do not exist. Here we get it from Gitee, the specific address is https://gitee.com/profile/personal_access_tokens . Generate and copy the Token, and then save it in Github Secrets in the same steps, the Name is "GITEE_TOKEN"
.github/workflows
in the root directory created by the warehouse, and then create a file named 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
Among them, static_list
means a single warehouse synchronization, force_update
is true
means to enable git push -f
forced synchronization, debug
is true
means to enable debug
switch, will display all execution commands.
When we submit such a file to Github, Github will automatically detect and run the script. But there are still a few issues to be aware of:
- Because we are submitting to the gh-pages branch of Github, this file and directory need to be written in the gh-pages branch
- Observing our script code, we will find that every time we
sh deploy.sh
, we compile the code to the dist directory, then re-git init, and finally compulsively submit..github/woorkflows/syncToGitee.yml
create 061c0623e74d91 in the root directory of the project. One is to submit the code in the dist directory, and the other is that it will be emptied and recompiled every time the generated code is submitted.
To this end, we can add code to the script, and after each compilation, copy the outer .github/woorkflows/syncToGitee.yml
to the dist directory, and then submit it to Github.
So we still add directories and files to the project root directory. The file structure at this time is as follows:
.
├─ docs
│ ├─ README.md
│ └─ .vuepress
│ └─ config.js
└─ .github
│ └─ workflows
│ └─ syncToGitee.yml
└─ package.json
└─ deploy.sh
The script file code is as follows:
#!/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 -
At this point, we run the sh deploy.sh
code and submit it to Github, and you can see the running record in the Actions of the warehouse:
The execution time is about one minute, and Gitee's code will be automatically synchronized.
So far, we have achieved synchronization between Github and Gitee code repositories.
Series of articles
Series article directory address: https://github.com/mqyqingfeng/Blog
WeChat: "mqyqingfeng", add me to the only reader group in Hongyu.
If there is an error or not rigorous, please correct me, thank you very much. If you like or have some inspiration, star is welcome, which is also an encouragement to the author.
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。