vuePress是什么？

VuePress 俺简单介绍下，是国内有名大神的尤雨溪发布的全新基于 vue 静态网站的生成器，内置的有 webpack组件，可以拿来写文档，主要是md格式。做出的感觉就是简约，性能也比较好，你也可以自定义很多的插件。响应式布局，PC端、手机端都能显示，觉得还不错就选它。

类似的建站工具其实有很多，你也许了解一点，譬如 Wordpress，Jekyll, Hexo等，WordPress 这需要买台云服务器才行，太贵哈哈懂的都懂；Jekyll 是 Github-Page 默认支持的，听说操作起来比较复杂，没有用过不做评价了；Hexo 之前一直在用，但觉得花里胡哨的，风格上简洁优雅，组件太多不够轻量。自从遇见 VuePress，嗯，就是它了~

零基础环境准备

git(版本管理)
cmder(可选的命令行工具，自行下载尝试)
这个可选的，我采用git bash;
node(核心)
yarn(npm 包管理的替代)
为什么不使用 npm,vuepress官网推荐（npm部分插件使用时有错误）;
vscode(编辑器)
不用多说，估计大家都有这个;

一本地搭建

快速开始同 VuePress 官网:

1 创建并进入一个新目录


//创建项目文件夹
mkdir ByteGuide && cd ByteGuide

2 进入 ByteGuide 文件夹，使用你喜欢的包管理器进行初始化


//yarn管理器
//npm包管理器
yarn init # npm init(默认yes)

3 把 VuePress 安装为本地依赖


yarn add -D vuepress # npm install -D vuepress

4 初始化项目使用 npm init 或 npm init -y（默认yes）


npm init -y

5 创建属于你的第一篇文档，VuePress 会把 docs 作为文档根目录(/)，那这个 README.md 这个相当于你的主页：


mkdir docs && echo '#Hello VuePress' > docs/README.md

目录结构

在 Myblog 项目文件夹中创建 docs 文件夹，在 docs 中创建 .vuepress 文件夹，在.vuepress中创建 public 文件夹和 config.js 文件，基础项目结构如下所示：


Myblog
├─── docs
│   ├── README.md
│   └── .vuepress
│       ├── public
│       └── config.js
|   |—— notes //放.md格式的文件
└── package.json

二基础配置

1 在 config.js 文件中配置网站标题、描述、主题等信息


module.exports = {title: 'blog',description: '个人网站',base: '/', markdown: {lineNumbers: false // 代码块显示行号},themeConfig: {nav:[ { text: '首页', link:'/' },{text:'阿龙的 'JavaScript 博客',items: [{text: 'Java基础', link: '/accumulate/' },{text: '图解算法', link: '/algorithm/'},{text: '手摸手造一个RPC', link: 'http://dubbo.io/'}    ]}]}
}

2 在 package.json 文件里加两个启动命令


"scripts": {"dev": "vuepress dev docs","build": "vuepress build docs"
}

3 一切就绪本地启动服务器跑起来看看吧


//两种方式启动
yarn docs:dev  # npm run docs:dev

它会在 http://localhost:8080(opens new window) 启动个热加载的开发服务器。

此时界面类似于：

4 添加导航栏
在页首的右上角添加导航栏 items，修改 config.js:


module.exports = {title: '...',description: '...',themeConfig: {nav: [{ text: '首页', link: '/' },{ text: '龙歌的 JavaScript 博客', items: [{ text: 'CSDN', link: 'https://blog.csdn.net/weixin_45817252?type=blog' },{ text: '掘金', link: 'https://juejin.cn/user/1935575059273485' }]}]}
}

效果如下：

更多的配置参考 VuePress 导航栏。

三进阶配置

1 代码块高亮

在 .md 文件中书写代码时，可在 ```后增加 js、html、json等格式类型，代码块即可按照指定类型高亮，这个很简单。

2 也可以自定义容器

代码所示：


::: tip 提示
this is a tip
:::::: warning 注意
this is a tip
:::::: danger 警告
this is a tip
:::

效果：

3 添加侧边栏

现在我们添加一些 md 文档，目前文档的目录如下：


.
├─ docs
│  ├─ README.md
│  └─ .vuepress
│     └─ config.js
|  └─ notes
|     └─ 图解路由协议.md
|     └─ redis对象系统.md
└─ package.json

我们在 config.js 配置如下：


module.exports = {themeConfig: {nav: [...],sidebar: [{title: '以前的文章',path: '/',collapsable: false, // 不折叠children: [{ title: "学前必读", path: "/" }]},{title: "学起来",path: '/notes/图解路由协议',collapsable: false, // 不折叠children: [{ title: "图解路由协议", path: "/notes/图解路由协议" },{ title: "redis对象系统", path: "/notes/redis对象系统" }],}]}
}

对应的效果如下：

4 支持Emoji

代码所示：


:tada: :100: :bamboo: :gift_heart: :fire:

效果：

这里有一份 Emoji 大全 https://www.webfx.com/tools/emoji-cheat-sheet/ 给你参考下用

5 换主题

现在基本的目录和导航功能已经实现，但如果我还想要加载 loading、切换动画、模式切换（暗黑模式）、返回顶部、评论等功能呢，为了简化开发成本，我们先可以直接使用主题插件，这里使用的主题是 vuepress-theme-rec 这个

现在我们安装它


npm install vuepress-theme-reco --save-dev
# or
yarn add vuepress-theme-reco

同样的道理，然后在 config.js 里引用该主题：


module.exports = {// ...theme: 'reco'// ...
}

刷新一下页面，我们会发现一些细节的改变，比如加载时的 loading 动画、以及支持切换暗黑模式：

6 开启目录结构

在原本的主题里，我们发现每篇文章的目录结构出现在左侧：而 vuepress-theme-reco 将原有的侧边栏的中的多级标题移出，生成子侧边栏，放在了页面的右侧，如果你要全局开启，可在页面 config.js 里设置开启：


module.exports = {//...themeConfig: {subSidebar: 'auto'}//...
}

此时效果如下：

7 修改主题颜色

VuePress 基于 Vue，所以主题色用的是 Vue 的绿色，那我想换 VuePress 的主题色呢？

你可以创建一个 .vuepress/styles/palette.styl 文件，文件代码如下：


$accentColor = #3178c6

此时可以发现主题颜色变了：

更多的颜色修改参考 VuePress 的 palette.styl。

8 自定义修改样式

如果你想自定义修改一些 DOM 元素的样式呢？就比如在暗黑模式，我们发现用作强调的文字颜色比较暗淡，在暗黑模式下看不清楚，我想改下这个文字的颜色和背景色呢？

而 VuePress 提供了一种添加额外样式的简便方法。你可以创建一个 .vuepress/styles/index.styl 文件。这是一个 Stylus 文件，但你也可以使用正常的 CSS 语法。

我们在 .vupress 文件夹下创建这个目录，然后创建 index.styl 文件，代码如下：


// 通过检查，查看元素样式声明
.dark .content__default code {background-color: rgba(58,58,92,0.7);color: #fff;
}

此时文字就清晰了很多：

那之前我们想提到去隐藏每篇文章的标题、作者、时间呢，其实也是类似的方式：


.page .page-title {display: none;
}

最后的效果如下：

四部署

我们的博客就算是正式的做好了，接下来我们部署到免费的 Github Pages 上。我们在 Github 上新建一个仓库，这里我取得仓库名为：blog。

对应，我们需要在 config.js 添加一个 base 路径配置：


module.exports = {// 路径名为 "/<REPO>/"base: '/blog/',//...
}

最终的 config.js 文件内容为：


module.exports = {title: 'blog',description: '个人网站',base: '/blog/',theme: 'reco',locales: {'/': {lang: 'zh-CN'}},themeConfig: {// lastUpdated: '上次更新',nav:[{ text: '首页', link:'/' },{text: '阿龙的 JavaScript 博客',items: [{text: '博客搭建', link: '/notes/'},{text: '图解高频算法', link: '/algorithm/'},{text: '手摸手造一个RPC', link: 'http://dubbo.io/'}],}],subSidebar: 'auto',sidebar: [{title: '欢迎学习',path: '/',collapsable: false,children: [{ title: "学前必读", path: "/" }]},{title: "文章",path: '/notes/redis对象系统',collapsable: false,children: [{title: "redis对象系统", path: "./notes/redis对象系统"},{title: "图解路由协议", path: "./notes/图解路由协议"}],}]}
}

然后我们在项目 ByteGuide 目录下建立一个脚本文件：deploy.sh，注意修改一下对应的用户名和仓库名：


#!/usr/bin/env sh# 确保脚本抛出遇到的错误
set -e# 生成静态文件
npm run docs:build# 进入生成的文件夹
cd docs/.vuepress/distgit init
git add -A
git commit -m 'deploy'# 如果发布到 https://<USERNAME>.github.io/<REPO>
git push -f  master:gh-pagescd -

然后命令行切换到 ByteGuide 目录下，执行 sh deploy.sh，就会开始构建，然后提交到远程仓库，注意这里提交到了 gh-pages 分支，我们查看下对应仓库分支的代码：

我们可以在仓库的 Settings -> Pages 中看到最后的地址：

像我最后生成的地址就是 https://mqyqingfeng.github.io/blog/

至此，我们完成了 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/distgit init
git add -A
git commit -m 'deploy'# 如果发布到 https://<USERNAME>.github.io/<REPO>
git push -f git@github.com:Datalong/ByteGuide.git master:gh-pages
git push -f git@gitee.com:Datalong/ByteGuide.git master:gh-pagescd -

当我们执行 sh deploy.sh 的时候，就会自动往两个仓库里推送。

至此，我们实现了 Github 与 Gitee 代码仓库的同步。

唯一不足的地方是每次需要更新博客仓库你都需要手动点击同步，是有点麻烦，下面着重描述下这里，再见。

回顾下

在上面，我们成功的用 VuePress 搭建了博客并部署到 Github Pages 与 Gitee同名仓库里面，并手动同步推送了两个仓库，这还是很麻烦的。能不能实现自动同步仓库之间的文件呢？市面上还真有，这篇是我翻译总结出来 Github Actions 的官方文档，为大家介绍 Github Actions 的同时，也实现下仓库之间的同步操作。

五 GitHub Actions是啥

简单介绍下这个组件，GitHub Actions 是一个持续集成 (Continuous integration)和持续交付的平台，可以做到自动化构建、测试、部署。你可以创建出工作流，构建和测试每一个 pull request（拉取请求）或者部署合并(merge) 后的代码到生产环境里面。

GitHub Actions 可以在你的代码仓库发生某个事件时运行一个工作流。当有人给你的代码仓库新建了一个 issue（问题），你可以跑一个工作流自动的添加合适的标签了，是不是很方便。

GitHub 提供了 Linux、Windows、和 macOS 虚拟机运行你的工作流，当然你也可以自定义自己的运行环境。

GitHub Actions 组件

你可以配置一个 GitHub Actions 工作流（workflow），它会在你的仓库发生某个事件时被触发，就比如一个 pull request 或者一个 issue 被创建的时候。

你的工作流包含了一个或者多个任务，它们可以并行或者串行执行。每一个任务（jobs）都会在它自己的虚拟机运行器（vmare Operator）上，任务可以有一个或者多个步骤，可以运行一个自定义的脚本(script)或者可运行一个动作（action），所谓这个动作（action）说白点就是一个可复用的扩展，用于简化你的工作流,结构上看就像个套娃。

1 Workflows（工作流）

工作流是一个可配置的自动化的程序。创建一个工作流，你需要定义一个 YAML 文件，当你的仓库触发某个事件的时候，工作流自动的跑起来，当然也可以手动触发，或者定义一个时间表。

一个仓库可以创建多个工作流，每一个都会执行不同的步骤，举个例子，一个工作流用于构建和测试 pull request，另外一个用于部署你的应用（APP），再来一个，当有人新建 issue（问题）的时候自动添加一个标签上。

你也可以在一个工作流中引用另外一个工作流，具体查看文档「可复用工作流」。

2 事件（Events）

事件是指仓库触发运行工作流的具体的行为，如你创建一个 pull request（推送请求），新建一个 issue、或者推送一个 commit。你也可以使用时间表触发一个工作流，或者通过请求一个 REST API，再或者手动触发，都是可以的。

事件完整的列表，可以查看文档「触发工作流的事件」。

3 任务（Jobs）

任务是在同一个运行器上执行的一组步骤，就是示意图的白框。一个步骤（steps）要么是一个 shell 脚本（script）要么是一个动作（action）。步骤肯定会顺序执行，并彼此独立。因为每一个步骤都在同一个运行器上被执行，所以你可以从一个步骤（step）传递数据到另一个步骤（step）。

你可以配置一个任务依赖其他任务，默认情况下，任务没有依赖，并行执行的。当一个任务需要另外一个任务的时候，它会等到依赖的任务完成了再执行。

4 动作（Actions）

动作是 GitHub Actions 平台的一个自定义的应用，它会执行一个复杂但是需要频繁重复的作业。使用动作可以减少重复代码。比如一个 action 可以实现从 GitHub 拉取你的 git 仓库，为你的构建环境创建合适的工具链等。

你可以写自己的动作，或者在 GitHub 市场里面去找已经实现好的动作。

工作流中定义的持续集成意思是由很多操作组成，比如说抓取代码、运行测试、登录远程服务器，发布到第三方服务等等。GitHub 都把这些操作就称为 actions。

很多操作在不同项目里面是类似的，完全可以共享的。GitHub团队注意到了这一点，想出了一个很妙的点子，允许每个开发者把每个操作写成独立的脚本文件，存放到代码仓库，使得其他开发者可以引用。

如果你需要某个 action，不必自己写复杂的脚本，直接引用他人写好的 action 即可，整个持续集成过程，就变成了一个 actions 的组合。这就是 GitHub Actions 最特别的地方了。

GitHub 做了一个官方市场，可以搜索到他人提交的 actions。另外，还有一个 awesome actions 的仓库，也可以找到不少 action 如下图。

上面说了，每个 action 就是一个独立脚本，因此可以做成代码仓库，使用 userName/repoName 的语法引用 action。事实上，GitHub 官方的 actions 都放在 github.com/actions 里面。

既然 actions 是代码仓库，当然就有了版本的概念，用户可以引用某个具体版本的 action。下面都是合法的 action 引用，用的就是 Git 的指针概念，详见官方文档。

actions/setup-node@74bc508 # 指向一个 commit
actions/setup-node@v1.0    # 指向一个标签
actions/setup-node@master  # 指向一个分支

5 运行器（vmare Operator）

一个运行器是一个可以运行任务的服务。每一个运行器一次只运行一个单独的任务。GitHub 提供 Ubuntu Linux，Microsoft Windows 和 macOS 运行器，每一个工作流都运行在一个独立新建的虚拟机中。如果说你需要一个不同的操作系统，你可以自定义运行器。具体请查看「自定义运行器」。

6 创建一个工作流

GitHub Actions 使用 YAML 语法定义工作流。每一个工作流具体保存为一个独立的 YAML 文件，目录是 .github/workflows。

现在我们在代码仓库创建一个示例工作流，当代码被推送的时候，肯定会自动执行一系列的命令。在这个示例工作流中，GitHub Actions 会检测出提交的代码，安装依赖，运行 bats -v：

(1) 在你的仓库，首先要创建一个 .github/workflows/ 目录

(2) 在 .github/workflows/ 目录，创建一个文件，名为 learn-github-actions.yml ，添加下面的代码：

name: learn-github-actions
on: [push]
jobs:check-bats-version:runs-on: ubuntu-lateststeps:- uses: actions/checkout@v2- uses: actions/setup-node@v2with:node-version: '14'- run: npm install -g bats- run: bats -v

(3) 提交这些改动，在 windows 本地推送到你的 GitHub 仓库。

你的新 GitHub Actions 工作流文件就会被安装在你的仓库，当有人提交代码的时候，工作流就会自动执行。关于一个任务的执行历史，具体查看「查看工作流活动」章节。

7 理解工作流文件

为了帮助你理解 YAML 语法，这节会解释例子中的每行代码：

name: learn-github-actions

这个你可选，是工作流的名字，会出现在 GitHub 仓库的 Actions 选项栏里。

on: [push]

指定工作流的触发事件。这个例子里，使用是 push 事件，当有人提交了一个代码修改或者合并了一个 pull request ，工作流就会触发。提交到每个分支都会被触发，如果你想在指定分支、路径、标签，需要查看「GitHub Actions 工作流语法」;

jobs:

将运行在 learn-github-actions 工作流的所有任务分组在一起。

check-bats-version:

这个定义了一个名为 check-bats-version 的任务，子键（child key）会定义该任务的属性。

  runs-on: ubuntu-latest

配置任务运行在最新的 Ubuntu Linux 运行器，你看的懂这个。

 steps:

将 check-bats-version 任务下的所有步骤分为一组，嵌套的每一个条目都是一个独立的 action 或者 shell 脚本。

- uses: actions/checkout@v2

uses 关键字指定了这个步骤运行 actions/checkout 动作的 v2 大版本。这是一个可以检出仓库代码到运行器的动作，它允许你运行脚本或者其他动作侵入你的代码（比如说构建或者测试工具）。

- uses: actions/setup-node@v2with:node-version: '14'

这个步骤会使用 actions/setup-node@v2 动作安装指定版本的 Node.js ，自动在你的 PATH 加上 node 和 npm 命令。

- run: npm install -g bats

run 关键字会告诉任务在运行器上执行一个命令。在这个例子中，你正在使用 npm安装 bats 软件测试包。

- run: bats -v

最终，你运行 bats 命令，传一个可以打印软件版本的参数。

8 可视化工作流文件

在这个图表，你可以看到你刚创建的工作流文件，以及这些 GitHub Actions 组件是如何组织的。每一个步骤都会执行一个独立的动作或者脚本文件。任务1 和 2 是运行命令，任务3 和任务4 是运行脚本文件。找到更多预构建的动作，查看「查找和自定义动作」。

9 查看工作流活动

一旦你的工作流开始运行，你可以在 GitHub 看到一个可视化的运行进度图表，查看每一个步骤的执行情况。

在 GitHub.com ，导航至仓库主主页
在你的仓库名下，点击 Actions。

在左侧 sidebar，点击你想查看的工作流

在 Workflow runs，点击你想查看的运行记录的名称：

在 Jobs 或者在可视化图表中，点击你想看到的任务：

查看每一个步骤的结果：

六完成自动同步

我们也可以利用 Github Actions，写一个工作流，在发现 Github 博客仓库的 gh-pages 分支代码更新后，自动同步当前代码到 Gitee 上。

关于 Github Actions 的详细介绍，可以参考阮一峰老师的《GitHub Actions 入门教程》。

详细介绍可以看这里(https://www.ruanyifeng.com/blog/2019/09/getting-started-with-github-actions.html)

为了实现 Gitee 和 Github 的同步，我们需要借助叫 action 的东西，还好业界已经有现成的实现了，这里我采用的是 Hub Mirror Action，其实就在actions市场找的，我们可以看到使用的示例代码：

steps:
- name: Mirror the Github organization repos to Gitee.uses: Yikun/hub-mirror-action@masterwith:src: github/Datalongdst: gitee/Datalongdst_key: ${{ secrets.GITEE_PRIVATE_KEY }}dst_token: ${{ secrets.GITEE_TOKEN }}account_type: org

其中有四个必填项：

src 表示需要被同步的源端账户名，即我们 Github 的账户名，因为我的 Github ID 是 Datalong，所以这里我应该改成 github/Datalong。
dst 表示需要同步到的目的端账户名，即我们 Gitee 的账户名，因为我的 Gitee ID 也是 Datalong，所以这里我应该改成 gitee/Datalong。
dst_key 表示用于在目的端上传代码的私钥，然后将其保存在 Secrets 中。

具体的操作步骤如下：

获取私钥：

cat ~/.ssh/id_rsa

复制你的私钥内容，然后在要同步的 Github 仓库中，选择 “Setting” -> “Secrets” -> “New repository secret”

填入 Secret 内容，Name 命名为 “GITEE_PRIVATE_KEY”，Value 为复制的内容

然后点击 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-lateststeps:- name: Mirror the Github organization repos to Gitee.uses: Yikun/hub-mirror-action@masterwith:src: 'github/mqyqingfeng'dst: 'gitee/mqyqingfeng'dst_key: ${{ secrets.GITEE_PRIVATE_KEY }}dst_token:  ${{ secrets.GITEE_TOKEN }}static_list: "blog"force_update: truedebug: true

这个里面，我们定义了一个名为 syncToGitee 的工作流，指定代码提交到分支 gh-pages 才能触发工作流。

任务下只有一个名为 repo-sync 的任务，运行在 ubuntu-latest, 具体的步骤下，也只有一个名为 Mirror the Github organization repos to Gitee 的步骤，使用了 Yikun/hub-mirror-action@master 动作，而 with 里的内容则是该动作需要的一些参数。

其中，static_list 表示单一仓库同步，force_update 为 true 表示启用 git push -f 强制同步，debug 为 true 表示启用 debug 开关，会显示所有执行命令。

当我们把这样的文件提交到 Github，Github 会自动检测并运行该脚本。但是现在还有几个问题要注意：

因为咱们是提交到 Github 的 gh-pages 分支上，这个文件和目录需要写在 gh-pages 分支，
观察咱们的脚本代码，我们就会发现，每次我们 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:Datalong/blog.git master:gh-pagescd -

此时我们再运行 sh deploy.sh 代码提交到 Github，就可以在仓库的 Actions 中看到运行记录

执行时间大概一分钟左右，Gitee 的代码就会自动同步。

到此这里，我们完成了 Github 代码自动同步 Gitee 的问题

七 Gitee如何部署Pages

在上面，咱们使用 GitHub Actions 解决了 GitHub 代码自动同步 Gitee 的问题，但我们的博客仓库代码同步到 Gitee 后，并不能像 GitHub 一样自动部署 Pages，如果不使用付费的 Gitee Pages Pro 服务，那我们该怎么实现 Gitee 自动部署 Pages 呢？

GitHub Actions

答案还是接着使用 GitHub Actions！你可能会想，Gitee 也有 GitHub Actions 服务吗？ Gitee 也会像 GitHub 一样检测 .github/workflows/ 目录下的 YAML 文件，然后执行吗？

这当然是不可能的啦，Gitee 并不会支持 GitHub 的这套方式，但我们为什么一定要借用 Gitee 的能力呢？我们在 GitHub Actions 中，模拟登陆 Gitee，点击项目的部署按钮，不也是一种实现方式吗？

搜索 Actions

我们接下来去找一些合适的 GitHub Actions，我们可以在 GitHub 的官方市场【1】，或者 awesome actions仓库【2】，再或者直接在 GitHub 搜索比如 gitee pages actions 之类的关键词。

最终，我们决定使用 Gitee Pages Action【4】，查看一下主页的示例代码：

name: Syncon:push:branches: [main]workflow_dispatch:jobs:build:runs-on: ubuntu-lateststeps:- name: Sync to Giteeuses: wearerequired/git-mirror-action@masterenv:# 注意在 Settings->Secrets 配置 GITEE_RSA_PRIVATE_KEYSSH_PRIVATE_KEY: ${{ secrets.GITEE_RSA_PRIVATE_KEY }}with:# 注意替换为你的 GitHub 源仓库地址source-repo: git@github.com:doocs/leetcode.git# 注意替换为你的 Gitee 目标仓库地址destination-repo: git@gitee.com:Doocs/leetcode.git- name: Build Gitee Pagesuses: yanglbme/gitee-pages-action@mainwith:# 注意替换为你的 Gitee 用户名gitee-username: yanglbme# 注意在 Settings->Secrets 配置 GITEE_PASSWORDgitee-password: ${{ secrets.GITEE_PASSWORD }}# 注意替换为你的 Gitee 仓库，仓库名严格区分大小写，请准确填写，否则会出错gitee-repo: doocs/leetcode# 要部署的分支，默认是 master，若是其他分支，则需要指定（指定的分支必须存在）branch: main

我们之前已经实现了 GitHub 代码同步 Gitee，这里我们直接使用后半部分的自动部署 actions，结合上篇的 YAML 文件代码，最终的修改如下：

name: syncToGitee
on:push:branches:- gh-pages
jobs:repo-sync:runs-on: ubuntu-lateststeps:- name: Mirror the Github organization repos to Gitee.uses: Yikun/hub-mirror-action@masterwith:src: 'github/Datalong'dst: 'gitee/Datalong'dst_key: ${{ secrets.GITEE_PRIVATE_KEY }}dst_token:  ${{ secrets.GITEE_TOKEN }}static_list: "blog"force_update: truedebug: true- name: Build Gitee Pagesuses: yanglbme/gitee-pages-action@mainwith:# 注意替换为你的 Gitee 用户名gitee-username: Datalong# 注意在 Settings->Secrets 配置 GITEE_PASSWORDgitee-password: ${{ secrets.GITEE_PASSWORD }}# 注意替换为你的 Gitee 仓库，仓库名严格区分大小写，请准确填写，否则会出错gitee-repo: Datalong/blog# 要部署的分支，默认是 master，若是其他分支，则需要指定（指定的分支必须存在）branch: gh-pages

注意不要忘了在仓库的设置里添加 Secrets，输入 Gitee 的登陆密码，然后保存名为 GITEE_PASSWORD

YAML 文件语法报错
如果 Actions 运行失败并出现了这种错误：

这是因为你的 YAML 语法写的有问题，可能是哪里没有对齐。可以在这个网址[5]校验下你的 YAML 文件，也可以顺便看下阮一峰老师的 YAML 语言教程[6]。

再次运行
修改了代码之后，我们可以再执行一遍 sh deploy.sh，然后在 GitHub 上查看运行情况：

当运行成功，我们再查看 Gitee 的地址，就会发现已经部署为最新的版本了。

至此，实现了 GitHub 和 Gitee 代码的同步与自动部署。

参考资料

【1】github actions官方市场：https://github.com/marketplace?type=actions

【2】awesome actions: https://github.com/sdras/awesome-actions

【3】Gitee Pages Action: https://github.com/marketplace/actions/gitee-pages-action

【4】yaml在线格式校验：https://www.bejson.com/validators/yaml_editor/

【5】yaml语言教程：https://www.ruanyifeng.com/blog/2016/07/yaml.html

系列文章

点击公众号目录地址：https://github.com/Datalong/blog

点击公众号龙哥手记 「加群进阶」, 进龙歌唯一的读者群。

如果有错误或者不严谨的地方，请务必得出指正，非常感谢。如果喜欢或者有所启发，欢迎star, 对作者也是一种鼓励。

跟着龙哥一起掉亿点点秀发吧~, `别忘给我点赞

带你手摸手搭建vuepress站点相关推荐

微服务（三）【手摸手带你搭建Spring Cloud】 Ribbon 什么是负载均衡？spring cloud如何实现负载均衡？ribbon负载均衡有几种策略？Ribbon是什么？
在上一章,我介绍了springcloud的eureka搭建.我们做了服务注册.最后我们还介绍了一些续约,失效剔除等参数配置.已经不需要再通过手动输入ip去访问服务,而是通过中心只需要通过服务名就可以获 ...
手摸手带你写项目----秒杀系统（一）
博客地址: 手摸手带你写项目----秒杀系统(一) 所有文章会第一时间在博客更新! 后面的时间我会手摸手带大家一起写几个实战性的项目.主要希望能应用上之前梳理的那些知识点,同时让没有写过项目的同学对实 ...
每天研究一个产品，阿德老师“手摸手”带你写产品分析报告 |
作为一个产品经理,要高频地去把玩各种最新产品,所以我们想把那些对世界充满好奇心.勇于探索新鲜事物的产品经理都聚在一起.一起深入研究国内外最新/奇产品,一起发现有趣的事情,并把研究心得都整理成文章沉淀下 ...
手摸手，带你用vue撸后台系列一（基础篇） - 掘金
完整项目地址:vue-element-admin 系列文章: 手摸手,带你用 vue 撸后台系列一(基础篇) 手摸手,带你用 vue 撸后台系列二(登录权限篇) 手摸手,带你用 vue 撸后台系 ...
vue 前端显示图片加token_手摸手，带你用vue撸后台系列二(登录权限篇)
完整项目地址:vue-element-admin https://github.com/PanJiaChen/vue-element-admin 前言拖更有点严重,过了半个月才写了第二篇教程.无奈自 ...
《手摸手带你学ClickHouse》之Oracle同步数据到Clickhouse
本文同步发表于我的微信公众号,扫一扫文章底部的二维码或在微信搜索 chaodev 即可关注. 文章目录前文回顾: <手摸手带你学ClickHouse>之安装部署 <手摸手带你学Cl ...
手摸手带你学移动端WEB开发
HTML常用标签总结手摸手带你学CSS HTML5与CSS3知识点总结好好学习,天天向上本文已收录至我的Github仓库DayDayUP:github.com/RobodLee/DayDayUP ...
《手摸手带你学ClickHouse》之安装部署
本文同步发表于我的微信公众号,扫一扫文章底部的二维码或在微信搜索 chaodev 即可关注. 文章目录 1.Clickhouse简介 1.1 简介 1.2 应用场景 1.3 架构 2. ClickHo ...
手摸手带你理解进制字节 ASCII码 Unicode 与字节编码(UTF-8 /16)等(下)
手摸手带你理解进制字节 ASCII码 Unicode 与字节编码(UTF-8 /16)等(上) Unicode 先讲讲这个东西的规则 Unicode 通常(不是所有)用两个字节来表示一个字符 ...

带你手摸手搭建vuepress站点

vuePress是什么？

零基础环境准备

一本地搭建

目录结构

二基础配置

三进阶配置

1 代码块高亮

2 也可以自定义容器

3 添加侧边栏

4 支持Emoji

5 换主题

6 开启目录结构

7 修改主题颜色

8 自定义修改样式

四部署

Gitee 导入仓库

1. 手动同步

2. 推送两个仓库

回顾下

五 GitHub Actions是啥

GitHub Actions 组件

1 Workflows（工作流）

2 事件（Events）

3 任务（Jobs）

4 动作（Actions）

5 运行器（vmare Operator）

6 创建一个工作流

7 理解工作流文件

8 可视化工作流文件

9 查看工作流活动

六完成自动同步

七 Gitee如何部署Pages

GitHub Actions

搜索 Actions

参考资料

系列文章

带你手摸手搭建vuepress站点相关推荐

最新文章

热门文章

带你手摸手搭建vuepress站点

vuePress是什么？

零 基础环境准备

一 本地搭建

目录结构

二 基础配置

三 进阶配置

1 代码块高亮

2 也可以自定义容器

3 添加侧边栏

4 支持Emoji

5 换主题

6 开启目录结构

7 修改主题颜色

8 自定义修改样式

四 部署

Gitee 导入仓库

1. 手动同步

2. 推送两个仓库

回顾下

五 GitHub Actions是啥

GitHub Actions 组件

1 Workflows（工作流）

2 事件（Events）

3 任务（Jobs）

4 动作（Actions）

5 运行器（vmare Operator）

6 创建一个工作流

7 理解工作流文件

8 可视化工作流文件

9 查看工作流活动

六 完成自动同步

七 Gitee如何部署Pages

GitHub Actions

搜索 Actions

参考资料

系列文章

带你手摸手搭建vuepress站点相关推荐

最新文章

热门文章

零基础环境准备

一本地搭建

二基础配置

三进阶配置

四部署

六完成自动同步