本站部署

# 本站部署

# 前言

VuePress 官方提供了很多平台的部署实现，具体看这里 (opens new window)。

本站目前是部署到 GitHub Pages 并同步部署到 Gitee Pages 上。

# GitHub Pages

GitHub Pages (opens new window) 是一个静态站点托管服务，可用于托管个人的静态网站。很多人用它来搭建私人博客，省去了购买服务器、域名等等一系列复杂的操作。

GitHub Pages Sites (opens new window) 有三种类型：

用户站点 user：
- 要发布用户站点，必须创建一个名为 <username>.github.io 的用户仓库
- 用户站点的默认发布源是仓库的默认分支 main/master 根目录
- 通过 https://<username>.github.io/ 访问
组织站点 organization：
- 要发布组织站点，必须创建一个名为 <organization>.github.io 的组织仓库
- 组织站点的默认发布源是仓库的默认分支 main/master 根目录
- 通过 https://<organization>.github.io/ 访问
项目站点 project：
- 要发布项目站点，仓库名字可以随便取，比如 blog
- 项目站点的默认发布源是 gh pages 分支根目录
- 通过 https://<username>.github.io/<REPO>/ 或 https://<organization>.github.io/<REPO>/ 访问。比如：https://<username>.github.io/blog

在此之前，你需要在 docs/.vuepress/config.js 中设置正确的 base:

如果你打算发布到 https://<USERNAME>.github.io/，则无需配置 base，因为 base 默认即是 "/"。
如果你打算发布到 https://<USERNAME>.github.io/<REPO>/（也就是说你的仓库在 https://github.com/<USERNAME>/<REPO>），则将 base 设置为 "/<REPO>/"。

本站是单独部署在 https://github.com/foreverRuns/blog 仓库的 gh-pages 分支上，所以设置为 base: '/blog/'

为什么不部署到代码仓库 https://github.com/foreverRuns/vuepress-vdoing-blog 的 gh-pages 分支上？
因为后面可能代码或文档由于某些原因可能会将仓库变为私有，由于开启 GitHub Pages 的仓库需要公开，部署到 blog 仓库上就不受影响。

# 创建代码仓库

没有 Github 账号的，点击这里 (opens new window) 去注册

右上角 +，选择 New repository 新建一个仓库存放代码

githubNewRep

本地使用 git 管理项目

进入项目根目录 vuepress-vdoing-blog

# 初始化
git init
# 修改默认主分支名称，跟 github 仓库一样
git branch -m master main
# 添加远程仓库地址
git remote add origin https://github.com/foreverRuns/vuepress-vdoing-blog.git
# 拉取远程仓库，同步到本地 (因为创建仓库时我们添加了 LICENSE 跟 README.md，如果创建的是空仓库不需要先 pull)
git pull origin main

1
2
3
4
5
6
7
8

提示

现在 github 仓库默认主分支更改为 main，本地 git init 初始化默认主分支为 master。看这里

提交代码到远程github仓库

创建 .gitignore 文件，写上不需要上传到远程仓库的文件

node_modules
yarn.lock
.vscode
docs/.vuepress/dist

1
2
3
4

提交代码

# 把项目的所有文件添加到本地仓库
git add -A
# 填写本次提交的描述
git commit -m 'init'
# 将本地仓库推送到远程仓库, 如果创建的远程仓库是空仓库，第一次提交时需要创建并提交 git push -u origin main
git push origin main

1
2
3
4
5
6

提交出错看这里

Support for password authentication was removed on August 13, 2021. Please use a personal access token instead.
Github 现在需要使用 token 认证，教程看这里。
设置 token 拥有的权限时候，勾上 repo 跟 workflow，因为后面远程部署用到 github action，需要 workflow 权限。

# 创建部署仓库

右上角 +，选择 New repository 新建仓库 blog 用于存放构建打包后的代码，即将博客部署到该仓库下。仓库名称即为 docs/.vuepress/config.js 中 base 设置的值
进入该仓库，点击左上角的 main 分支下拉按钮，在输入框中输入 gh-pages，点击下面生成的 Create branch: gh-pages from main 创建 gh-pages 分支

githubBlog1

然后仓库上面 Settings/Pages/ 下：

githubBlog3

提示

gh-pages 分支根目录是 项目站点即 project 类型 的默认发布源，所以上面设置默认就设置好了。如果在分支发布，则需要在上面 Pages 设置下选择对应的分支。

构建打包，生成静态文件，默认生成在 docs/.vuepress/dist 下。

yarn build

npm run build

// Make sure to add code blocks to your code group

进入打包的目录 docs/.vuepress/dist，将生成的文件推送到部署仓库的 gh-pages 分支下

cd docs/.vuepress/dist
git init 
git add -A
git commit -m '手动部署'
git push -f git@github.com:foreverRuns/blog.git master:gh-pages

1
2
3
4
5

解释一下 git push -f git@github.com:foreverRuns/blog.git master:gh-pages :

-f 是 --force的缩写，强制覆盖远程仓库。注意：-f 有风险，master/main 主分支上请谨慎使用
git@github.com:foreverRuns/blog.git 是你的仓库地址，可以是 HTTPS/SSH 地址，记不住的可以直接在你的仓库右边绿色的 Code 按钮下复制
master:gh-pages 是将本地 master 分支推送到远程 gh-pages 分支。这里为什么是 master 而不是 main，因为上面 git init 初始化默认分支就是 master

githubBlog2

推送成功后，你就将你的网站部署到了 https://<USERNAME>.github.io/<REPO>/ 上，本站是 https://foreverRuns.github.io/blog/。

Github 只要更新了 gh-pages 分支内容，就会立刻自动重新部署，所以访问页面是最新的。

# 本地手动部署

到这里，已经是部署成功了，但是每次修改代码或者更新你的博客文章时，都需要重新打包构建，并执行上面命令去手动部署，这很繁琐。

需要频繁执行一系列命令时，可以将其写到 bash 脚本中，通过执行脚本去执行一系列命令。不懂 bash 的，看这里 (opens new window)。

在项目根目录新建 deploy.sh 部署脚本：

#!/usr/bin/env sh

# 确保脚本抛出遇到的错误
set -e

# 生成静态文件
yarn build

# 进入生成的文件夹
cd docs/.vuepress/dist

# 设置变量
msg='本地手动部署'  #yarn deploy
githubUrl=https://github.com/foreverRuns/blog

# 本地部署
git init 
git add -A
git commit -m "${msg}"
git push -f $githubUrl master:gh-pages # 将本地master分支 推送到远程 blog 仓库下的 gh-pages 分支

# 退回开始所在目录
cd -

# 删除打包目录
rm -rf docs/.vuepress/dist

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

执行该脚本需要支持 bash 命令的窗口，Windows 终端无法执行

在项目根目录右键，选择 Git Bash Here 打开 Git Bash 窗口，输入：

bash deploy.sh

即可通过脚本一键部署

将该命令写到 package.json 中的 scripts 中统一管理

"scripts": {
  "dev": "vuepress dev docs",
  "build": "vuepress build docs",
  "deploy": "bash deploy.sh",
},

1
2
3
4
5

这样，执行以下命令就可以实现一键部署

yarn deploy

# 远程自动部署

到这里，我们只需要执行 yarn deploy 就可以实现一键部署了，但是当你想在远程仓库在线更新博客时，需要本地先 pull 拉取远程代码，然后再本地打包部署，相当麻烦。

我们使用 GitHub Actions 可以实现在修改完代码或者更新博客，把代码 push 到代码仓库后，在远程自动执行上面脚本去部署。

GitHub Actions (opens new window) 是 GitHub 的持续集成服务 (opens new window)，不了解的先移步本站 GitHub Actions 入门教程。

# 配置 ACCESS_TOKEN

首先需要申请一个 personal access token，怎么申请看这里，设置权限时勾上 workflow。
这个 token 用于远程部署提交代码时的权限验证，就像本地第一次提交代码时也需要设置 token 一样。
由于 token 的私密性，不应该直接放在脚本中，我们可以放到 代码仓库 的 Settings/secrets/actions 下，通过环境变量去获取 token，具体如下：

githubSecrets1

点击上面的 New repository secret

githubSecrets2

提示

token 的名字设置为 ACCESS_TOKEN，那么我们在脚本中就可以通过

${{ secrets.ACCESS_TOKEN }}

来获取该 token，官方 secrets 说明文档 (opens new window)

# 配置 action 脚本

在项目根目录下，新建 .github/workflows 目录，必须这个名字，因为 GitHub Actions 就是这么规定的，只要该目录下有 .yml 脚本就会去自动执行
在 .github/workflows 目录下新建 ci.yml 脚本，脚本名字可以自定义

name: CI

# 触发条件
on:
  # 在master分支发生push事件时触发。
  push:
    branches:
      - main
      - mater
  # 支持手动，方便测试 (在github仓库的action下对应的action开启了Runs workflow 按钮)
  workflow_dispatch:

env: # 设置环境变量
  TZ: Asia/Shanghai # 时区（设置时区可使页面中的`最近更新时间`使用时区时间）

jobs: # 工作流
  build: # 自定义名称
    runs-on: ubuntu-latest # 运行在最新的ubuntu虚拟机环境

    strategy:
      matrix:
        node-version: [14.x]

    steps:
      - name: Checkout # 步骤1 拉取代码
        uses: actions/checkout@v2 # 使用的动作。格式：userName/repoName。作用：检出仓库，获取源码。 官方actions库：https://github.com/actions
        with:
          # Number of commits to fetch. 0 indicates all history for all branches and tags.
          # Default: 1
          fetch-depth: 0 # 0 表示获取所有分支和标签的所有 Commit 记录。 (文章底部的 `最近更新时间` 对应该文章的 commit 提交时间，没有设置这个会出现问题)
          
      - name: Use Node.js ${{ matrix.node-version }} # 步骤2
        uses: actions/setup-node@v1 # 作用：安装nodejs
        with:
          node-version: ${{ matrix.node-version }} # 版本

      - name: run deploy.sh # 步骤3
        env: # 设置环境变量
          GITHUB_TOKEN: ${{ secrets.ACCESS_TOKEN }} # toKen私密变量 (在 仓库/Settings/Secrets/Actions/ 下， New repository secret 创建)
        run: yarn && yarn deploy # 安装依赖，执行deploy.sh


      # 步骤3 （只需要github action自动部署, 不需要本地部署的可以使用这个步骤）
      # - name: Install and Build # npm install npm run build
      #   run: |
      #     yarn
      #     yarn build
      #     # cd docs/.vuepress/dist
      #     # echo 'xxx.com' > CNAME
      #     # cd -
      # - name: Deploy
      #   uses: JamesIves/github-pages-deploy-action@v4.2.2 # V4 开始不需要添加 token ，如果添加会报 128 错误。 https://github.com/JamesIves/github-pages-deploy-action
      #   with:
      #     branch: gh-pages # The branch the action should deploy to.
      #     folder: docs/.vuepress/dist # The folder the action should deploy.
      #     # This option defaults to the repository scoped GitHub Token.
      #     # 2021年8月13日开始，GitHub不再支持密码验证解决方案，需要使用token登录
      #     # JamesIves/github-pages-deploy-action v4 版本默认使用仓库登录的token
      #     # 如果你只是部署到本仓库的gh-pages下，不需要再提供token了，如果添加会报 128 错误
      #     # 如果你需要部署到其他仓库，只需要提供 access token
      #     token: ${{ secrets.ACCESS_TOKEN }}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

看不懂脚本的, 移步本站 GitHub Actions 入门教程。

这个脚本文件会在 master 或者 main 分支发生 push 事件时触发，运行环境是 ubuntu-latest，工作步骤为：

拉取仓库源码
安装 nodejs，因为打包项目要用到 nodejs
把 token 设置到环境变量，安装项目依赖，并运行 deploy.sh 脚本，进行打包及部署

提示

如果你不需要本地脚本手动部署, 可以将上面的的 步骤三 屏蔽掉, 打开最下面已经屏蔽的 步骤三, 这样就可以实现远程自动部署了, 也就不需要 deploy.sh 脚本了

# 修改 deploy.sh 脚本

修改在项目根目录下的 deploy.sh 部署脚本

#!/usr/bin/env sh

# 确保脚本抛出遇到的错误
set -e

# 生成静态文件
yarn build

# 进入生成的文件夹
cd docs/.vuepress/dist

# 如果发布到自定义域名，请使用，不填则使用 GitHub 自带的 <username>.github.io
# echo 'www.example.com' > CNAME

if [ -z "$GITHUB_TOKEN" ]; then
  msg='本地手动部署'  # 本地 yarn deploy
  githubUrl=https://github.com/foreverRuns/blog
else
  msg='GitHub Actions 自动部署'
  githubUrl=https://foreverRuns:${GITHUB_TOKEN}@github.com/foreverRuns/blog.git
  # Omit --global to set the identity only in this repository.
  git config --global user.name "foreverRuns"
  git config --global user.email "894xxxx40@qq.com"
fi
git init 
git add -A
git commit -m "${msg}"
git push -f $githubUrl master:gh-pages # 将 master 分支 推送到 blog 仓库下的 gh-pages分支

# 退回开始所在目录
cd -
# 删除打包项目
rm -rf docs/.vuepress/dist

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

这个脚本现在执行过程是这样的：

先运行打包命令，生成 docs/.vuepress/dist 文件
判断环境变量 GITHUB_TOKEN 是否存在，存在则是本地 yarn deploy 手动执行脚本，否则是远程 Github Actions 通过执行 ci.yml 脚本自动执行
根据结果设置相应的变量
将打包后的文件推送到对应仓库的 gh-pages 分支下

至此，我们就可以实现本地 push 代码到 github 仓库的 main 分支后，远程自动部署了

可以在 github 仓库的 Actions 选项下查看部署日志。

githubActionLog

由于在国内 GitHub 不稳定，网速很慢🐌，经常连不上🐛，着急的时候真抓狂💥。接下来我们将同步部署到访问速度更快的 Gitee Pages。

# Gitee Pages

Gitee Pages 是一个免费的静态网页托管服务，在国内它的访问速度很快，很多人使用它来托管博客、项目官网等静态网页。但它不像 GitHub Pages 那样，一提交代码就能自动更新 Pages，因为 Gitee 的自动部署属于 Gitee Pages Pro 的服务。

但我们可以通过 Gitee Pages Action (opens new window) 来实现 Gitee Pages 的自动部署。

注：首次需要手动登录 Gitee ，进入项目 服务 下的 Gitee Pages，手动点击 启动 进行 Gitee Pages 服务的部署。

没有 Gitee 账号的，点击这里 (opens new window) 先去注册。

点击查看提示

Gitee Pages 不会一提交代码就能自动更新 Pages，需要手动去更新。自动部署属于 Gitee Pages Pro 的服务，99/年。如果你开通了，或者你不介意自己去更新，按照下面的部署更简单。

参考上面 Github Pages / 远程自动部署：

Gitee 账号下 设置/私人令牌/+生成新令牌 创建 Gitee 私人令牌，配置名字为 GITEE_ACCESS_TOKEN 的 secrets 到 github代码仓库 的 Settings/secrets/actions 下。
ci.yml 中设置 GITEE_TOKEN 环境变量：

...
- name: run deploy.sh # 步骤3
  env: # 设置环境变量
    GITHUB_TOKEN: ${{ secrets.ACCESS_TOKEN }}
    GITEE_TOKEN: ${{ secrets.GITEE_ACCESS_TOKEN }}
  run: yarn && yarn deploy

1
2
3
4
5
6

在 deploy.sh 中 # 退回开始所在目录 cd - 之前新增：

# deploy to gitee
# echo 'www.example.com' > CNAME

if [ -z "$GITEE_ACCESS_TOKEN" ]; then
  giteeUrl=https://gitee.com/runss11/blog.git
else
  giteeUrl=https://runss11:${GITEE_ACCESS_TOKEN}@gitee.com/runss11/blog.git
fi
 
git add -A
git commit -m "${msg}"
git push -f $giteeUrl master # 推送到 gitee 仓库的 master 下

1
2
3
4
5
6
7
8
9
10
11
12

# 同步并部署到Gitee

# 新建 Gitee 仓库

giteeNewRep1

# 产生 SSH Key

打开 Git Bash 查看是否生成过 SSH 密钥。

ls ~/.ssh # 查看是否存在 id_rsa  id_rsa.pub

没有则需要产生新的 SSH 密钥对，Git Bash 输入：

ssh-keygen -t rsa -C "youremail@example.com" # 替换你绑定gitee的邮箱

sshkey

一直回车就好，不要设置密码

查看生成的密钥对：

cd  ~/.ssh 
ls # 
cat id_rsa.pub # 查看公钥数据
cat id_rsa # 查看私钥数据

1
2
3
4

sshkey1

id_rsa.pub 为RSA公钥，id_rsa 为RSA私钥。非对称密钥，一个用于加密，另外一个用于解密。

# 配置 SSH Key

复制公钥 id_rsa.pub 数据，在 Github 账户的 Settings/SSH and GPG keys 下添加 SSH 公钥。点这里过去 (opens new window)

githubAddSSHkey

同样，在 Gitee 账户的 设置/安全设置/SSH公钥 下添加 SSH 公钥。点这里过去 (opens new window)

giteeAddSSHkey

测试配置是否成功

ssh -T git@github.com
ssh -T git@gitee.com

1
2

sshkey2

# 配置 Github Secrets

参考上面 Github Pages / 远程自动部署下的配置 ACCESS_TOKEN 步骤，在 Github 代码仓库 即 vuepress-vdoing-blog 仓库 的 Settings/secrets/actions 下配置如下 Secrets：

githubSecrets4

GITEE_PASSWORD 为你的 Gitee 密码
SSH_RSA_PRIVATE_KEY 为 id_rsa 私钥数据

# 配置 action 脚本

在 .github/workflows 目录下新建 gitee.yml 脚本，脚本名字可以自定义

name: gitee

on:
  # 在 'ci.yml' workflow 完成之后运行
  workflow_run:
    workflows: [ci]
    types:
      - completed
  # 支持手动，方便测试 (在github仓库的 action 下对应的 action 开启了 Runs workflow 按钮)
  workflow_dispatch:

jobs: # 工作流
  ci-success: # 自定义名称, ci.yml 运行成功时才会执行
    runs-on: ubuntu-latest # 运行在最新的ubuntu虚拟机环境
    if: ${{ github.event.workflow_run.conclusion == 'success' }} # 失败时执行是 'failure'
    steps:
      - name: Mirror To Gitee # 步骤1：将 GitHub 仓库同步到 Gitee 仓库
        uses: wearerequired/git-mirror-action@master
        env:
          SSH_PRIVATE_KEY: ${{ secrets.SSH_RSA_PRIVATE_KEY }} # id_rsa 私钥
        with: # source-repo 同步到 destination-repo
          source-repo: 'git@github.com:foreverRuns/blog.git' # Github 仓库地址
          destination-repo: 'git@gitee.com:runss11/blog.git' # Gitee 仓库地址

      - name: Build Gitee Pages # 步骤2：自动部署到 Gitee Pages
        uses: yanglbme/gitee-pages-action@master
        with:
          # Gitee 用户名
          gitee-username: RunSS11
          # 在Settings/Secrets/Actions/New repository secret/ 新建 GITEE_PASSWORD，存放你的 Gitee 帐户密码
          gitee-password: ${{ secrets.GITEE_PASSWORD }}
          #  Gitee 仓库地址，（地址仅需后缀，即 https://gitee.com/<username>/xxx 的 <username>/xxx 即可）
          gitee-repo: runss11/blog
          # 要部署的分支，默认是 master，若是其他分支，则需要指定（指定的分支必须存在）
          branch: gh-pages
          # 要部署的分支上的目录
          # directory:
          # 是否强制使用 HTTPS, 默认true
          # https: true

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

脚本中用到的 secrets.SSH_RSA_PRIVATE_KEY 、 secrets.GITEE_PASSWORD 就是上面配置的环境变量

先使用 wearerequired/git-mirror-action (opens new window) 将 GitHub 仓库同步到 Gitee 仓库，再使用 yanglbme/gitee-pages-action (opens new window) 实现 Gitee Pages 的自动部署。

如果一切配置正常，并成功触发 Gitee Pages Action ，Gitee Pages Action 会打印出成功的结果，并且我们会在 Gitee 公众号收到一条登录通知。这是 Gitee Pages Action 程序帮我们登录到 Gitee 官网，并为我们点击了仓库 Gitee Pages 服务的 更新 部署按钮。

至此，我们只要在本地 push 代码到 github 仓库的 main 分支，就会在远程自动部署到 Github Pages 和 Gitee Pages 上

部署日志： githubActionLog1

注意：首次需要手动登录 Gitee ，进入项目 服务 下的 Gitee Pages，手动点击 启动 进行 Gitee Pages 服务的部署。启动后变为 更新 按钮，我们通过上面的 gitee-pages-action 去实现后续的自动更新。

giteePages

# 错误及解决方案

Error: Rebuild page error, status code: xxx

Gitee Pages 未初始化，第一次需要手动部署。在部署仓库的 服务/Gitee Pages 下，手动点击 启动 按钮。
如果启动过，有可能是更新 Pages 时状态码异常，请尝试再次触发 Action 执行。

其他问题自行查看官方文档 (opens new window)，拉到最后的 错误及解决方案。

# 同步项目源码到Gitee

将 GitHub 上的项目源码同步到 Gitee 仓库下，如果你不需要可以跳过这一步骤。

giteeNewRep

配置 Github Secrets

在 Github 代码仓库 即 vuepress-vdoing-blog 仓库 的 Settings/secrets/actions 下，新建名称为 SSH_RSA_PRIVATE_KEY 的 secret，内容为 id_rsa 私钥数据。

由于我们在上面的 Gitee Pages / 同步并部署到Gitee 下的 配置 Github Secrets 步骤已经配置过 SSH_RSA_PRIVATE_KEY，这里就不需要再配置了。

githubSecrets

修改 .github/workflows/gitee.yml 脚本：

name: gitee

on:
  # 在 'ci.yml' workflow 完成之后运行
  workflow_run:
    workflows: [ci]
    types:
      - completed
  # 支持手动，方便测试 (在github仓库的 action 下对应的 action 开启了 Runs workflow 按钮)
  workflow_dispatch:

jobs: # 工作流
  ci-success: # 自定义名称, ci.yml 运行成功时才会执行
    runs-on: ubuntu-latest # 运行在最新的ubuntu虚拟机环境
    if: ${{ github.event.workflow_run.conclusion == 'success' }} # 失败时执行是 'failure'
    steps:
      - name: Mirror To Gitee # 步骤1：将 GitHub 仓库同步到 Gitee 仓库
        uses: wearerequired/git-mirror-action@master
        env:
          SSH_PRIVATE_KEY: ${{ secrets.SSH_RSA_PRIVATE_KEY }} # id_rsa 私钥
        with: # source-repo 同步到 destination-repo
          source-repo: 'git@github.com:foreverRuns/vuepress-vdoing-blog.git' # Github 仓库地址
          destination-repo: 'git@gitee.com:runss11/vuepress-vdoing-blog.git' # Gitee 仓库地址

      - name: Mirror To Gitee # 步骤2：将 GitHub 仓库同步到 Gitee 仓库
        uses: wearerequired/git-mirror-action@master
        env:
          SSH_PRIVATE_KEY: ${{ secrets.SSH_RSA_PRIVATE_KEY }} # id_rsa 私钥
        with: # source-repo 同步到 destination-repo
          source-repo: 'git@github.com:foreverRuns/blog.git' # Github 仓库地址
          destination-repo: 'git@gitee.com:runss11/blog.git' # Gitee 仓库地址

      - name: Build Gitee Pages # 步骤3：自动部署到 Gitee Pages
        uses: yanglbme/gitee-pages-action@master
        with:
          # Gitee 用户名
          gitee-username: RunSS11
          # 在Settings/Secrets/Actions/New repository secret/ 新建 GITEE_PASSWORD，存放你的 Gitee 帐户密码
          gitee-password: ${{ secrets.GITEE_PASSWORD }}
          #  Gitee 仓库地址，（地址仅需后缀，即 https://gitee.com/<username>/xxx 的 <username>/xxx 即可）
          gitee-repo: runss11/blog
          # 要部署的分支，默认是 master，若是其他分支，则需要指定（指定的分支必须存在）
          branch: gh-pages
          # 要部署的分支上的目录
          # directory:
          # 是否强制使用 HTTPS, 默认true
          # https: true

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

# 私密数据

在本站评论的搭建中，不管是 Gitalk 的 Client ID 和 Client secret，还是 Valine 的 AppID 和 AppKey，都属于私密数据，不应该直接写在配置中。

# 本地获取

docs/.vuepress/config 下新建 secrets.js，根据自己使用的评论系统配置

module.exports = {
  // gitalk
  // clientID: 'Your own clientID',
  // clientSecret: 'Your own clientSecret',

  // valine
  appId: 'Your own appId', // 替换为你的appId，如：kSuWQbsktacrorUwyB5jrkkW-gzGjcHsz
  appKey: 'Your own appKey', // 替换为你的appKey，如：8vbYX017fTIKYmljkjr506P6
}

1
2
3
4
5
6
7
8
9

修改插件配置 docs/.vuepress/config/plugins.js，根据自己使用的评论系统配置

// const { clientID, clientSecret } = require('./secrets.js')
const { appId, appKey } = require('./secrets.js')

module.exports = {
  plugins: [
    ...,  // 其他插件配置
    [
      'vuepress-plugin-comment',
      // {
      //   choosen: 'gitalk',
      //   options: {
      //     clientID,
      //     clientSecret,
      //     repo: 'gitalk-comment-blog', // GitHub 仓库
      //     owner: 'foreverRuns', // GitHub仓库所有者
      //     admin: ['foreverRuns'], // 对仓库有写权限的人
      //     // distractionFreeMode: true,
      //     pagerDirection: 'last', // 'first'正序 | 'last'倒序
      //     id: '<%- (frontmatter.permalink || frontmatter.to.path).slice(-16) %>', //  页面的唯一标识,长度不能超过50
      //     title: '「评论」<%- frontmatter.title %>', // GitHub issue 的标题
      //     labels: ['Gitalk', 'Comment'], // GitHub issue 的标签
      //     body: '页面：<%- window.location.origin + (frontmatter.to.path || window.location.pathname) %>', // GitHub issue 的内容
      //   },
      // },
      {
        // 具体参数请看官网：https://valine.js.org/
        choosen: 'valine',
        options: {
          el: '#valine-vuepress-comment',
          appId, // ES6 语法，相当于 appId: appId
          appKey,
          path: '<%- frontmatter.commentid || frontmatter.permalink %>',
          placeholder: '评论点啥 ~~~', // 评论框占位提示符
          avatar: 'monsterid', // 小怪物头像. 目前非自定义头像有7种默认值可选: https://valine.js.org/avatar.html
          pageSize: 10, // 评论列表分页，每页条数
          visitor: true, // 文章访问量统计
          recordIP: false, // 是否记录评论者 IP 地址
          enableQQ: true, // 是否启用昵称框自动获取 QQ 昵称和 QQ 头像, 默认关闭
        }
      }
    ]
  ]
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

根目录下 .gitignore 文件中，忽略 docs/.vuepress/config/secrets.js 文件，不上传到 GitHub 仓库中

// .gitignore
node_modules
yarn.lock
.vscode
docs/.vuepress/dist
docs/.vuepress/config/secrets.js

1
2
3
4
5
6

至此，本地运行 yarn dev，或者本地手动部署 yarn deploy 时，私密数据从 secrets.js 中获取。由于该文件只存在于本地中，不会上传到远程仓库中，不会泄露比较安全。

# 远程获取

Github Actions 自动部署时，由于不存在 secrets.js，在 Github 服务器构建打包时会出错，我们需要在打包之前动态生成 secrets.js 配置文件

将 Gitalk 的 Client ID、Client secret，或者 Valine 的 AppID、AppKey 配置到 Github 代码仓库中的 Secrets 下，根据自己使用的评论系统配置。

githubSecrets3

修改 .github/workflows/ci.yml 文件，新增设置私密数据环境变量

name: CI

# 触发条件
on:
  # 在master分支发生push事件时触发。
  push:
    branches:
      - main
      - mater
  # 支持手动，方便测试 (在github仓库的action下对应的action开启了Runs workflow 按钮)
  workflow_dispatch:

env: # 设置环境变量
  TZ: Asia/Shanghai # 时区（设置时区可使页面中的`最近更新时间`使用时区时间）

jobs: # 工作流
  build: # 自定义名称
    runs-on: ubuntu-latest # 运行在最新的ubuntu虚拟机环境

    strategy:
      matrix:
        node-version: [14.x]

    steps:
      - name: Checkout # 步骤1 拉取代码
        uses: actions/checkout@v2 # 使用的动作。格式：userName/repoName。作用：检出仓库，获取源码。 官方actions库：https://github.com/actions
        with:
          # Number of commits to fetch. 0 indicates all history for all branches and tags.
          # Default: 1
          fetch-depth: 0 # 0 表示获取所有分支和标签的所有 Commit 记录。 (文章底部的 `最近更新时间` 对应该文章的 commit 提交时间，没有设置这个会出现问题)

      - name: Use Node.js ${{ matrix.node-version }} # 步骤2
        uses: actions/setup-node@v1 # 作用：安装nodejs
        with:
          node-version: ${{ matrix.node-version }} # 版本

      - name: run deploy.sh # 步骤3
        env: # 设置环境变量
          GITHUB_TOKEN: ${{ secrets.ACCESS_TOKEN }} # toKen私密变量 (在 仓库/Settings/Secrets/Actions/ 下， New repository secret 创建)
          VALINE_APPID: ${{ secrets.VALINE_APPID }}
          VALINE_APPKEY: ${{ secrets.VALINE_APPKEY }}
        run: yarn && yarn deploy # 安装依赖，执行deploy.sh

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

修改根目录的部署脚本 deploy.sh，新增在 Github Actions 自动部署时动态生成 secrets.js 私密数据文件

#!/usr/bin/env sh

# 确保脚本抛出遇到的错误
set -e

# 如果是 github action 自动部署，动态生成 secret.js
if [ "$GITHUB_TOKEN" ]; then
  echo "module.exports = {
    // clientID: '${GITALK_CLIENTID}',
    // clientSecret: '${GITALK_CLIENTSECRET}',
    appId: '${VALINE_APPID}',
    appKey: '${VALINE_APPKEY}'
  }" > docs/.vuepress/config/secrets.js
fi

# 生成静态文件
yarn build

# 进入生成的文件夹
cd docs/.vuepress/dist

# 如果发布到自定义域名，请使用，不填则使用 GitHub 自带的 <username>.github.io
# echo 'www.example.com' > CNAME

if [ -z "$GITHUB_TOKEN" ]; then
  msg='本地手动部署'  # 本地 yarn deploy
  githubUrl=https://github.com/foreverRuns/blog
else
  msg='GitHub Actions 自动部署'
  githubUrl=https://foreverRuns:${GITHUB_TOKEN}@github.com/foreverRuns/blog.git
  # Omit --global to set the identity only in this repository.
  git config --global user.name "foreverRuns"
  git config --global user.email "894xxxx40@qq.com"
fi
git init 
git add -A
git commit -m "${msg}"
git push -f $githubUrl master:gh-pages # 将 master 分支 推送到 blog 仓库下的 gh-pages分支

# 退回开始所在目录
cd -
# 删除打包项目
rm -rf docs/.vuepress/dist

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

至此，在本地运行 yarn dev，或者本地手动部署 yarn deploy 时，私密数据从 secrets.js 中获取，在远程 Github Actions 自动部署时，私密数据是从环境变量中获取的，从而保证了私密数据的安全性。

# 自定义域名

# 申请域名

申请域名可以去阿里云，腾讯云等，下面以腾讯云为例：

前往腾讯云域名注册 (opens new window)，搜索并找到你想要可用的域名，然后👉买它。
进入控制台/产品监控/域名管理 (opens new window)，域名列表中选择刚才的域名解析：

ymjx

进入域名解析页面，点击 添加记录 添加解析记录。

主机记录：@，表示直接解析主域名 runss.top，选择 www 就是 www.runss.top
记录类型：CNAME，表示将域名指向另一个域名地址，与其保持相同解析，如 https://www.dnspod.cn，选择 A 就是将域名指向一个 IPv4 地址
解析线路：默认
记录值：若选择 CNAME，则在此填写要指向的域名地址，如你的 Github Pages 地址：userName.github.io，不包括仓库名称；若选择 A，则在此填写服务器 IP 地址
权重：空着，表示负载均衡权重默认为均等负载
TTL：600，默认值即可
确定

ymjx1

申请SSL证书

记录添加成功后，在记录的 SSL 选项悬浮鼠标，选择 免费申请，然后选择 个人用户版本 免费申请。

ymjx2

提交申请之后腾讯云会自动帮你添加一条解析记录，等一会就会审核通过。

# GitHub Pages 自定义域名

CNAME 记录应该始终指向 <user>.github.io 或 <organization>.github.io，不包括仓库名称。
在配置 用户或组织站点 的自定义域后，自定义域名 将替换该账户下所有开通 Pages 但 未配置自定义域 网站 URL 的 <user>.github.io 或 <organization>.github.io 部分。
例如，你的 用户站点 的自定义域名为 www.example.com，并且你拥有一个 未自定义域名的 项目网站，该网站从名为 blog 的仓库发布，则该仓库的 GitHub Pages 网站将在 www.example.com/blog 上发布。
更详细的说明看这里 (opens new window)

提示

用户站点：指的是名为 <username>.github.io 的用户仓库

基于上面的说明：

点击查看

如果你直接在部署仓库 blog 下配置自定义域 www.example.com，然后直接通过 www.example.com 访问，在这里样式会出现问题，需要在 docs/.vuepress/config.js 中将 base 配置为 '/'，才可正常访问。但是这样访问之前的 https://<username>.github.io/blog 和 https://<username>.gitee.io/blog 会出样式问题。
如果你创建过用户站点，即存在 <username>.github.io 的用户仓库，那么你可以直接为这个仓库配置自定义域 www.example.com，那么你就能通过 www.example.com/blog 正常访问到你的博客网站了。

修改部署仓库 blog 为 <username>.github.io，即改成用户站点。
在项目根目录下的 deploy.sh 脚本，配置自定义域。

echo 'runss.top' > CNAME # // 域名替换成你的

docs/.vuepress/config.js 中，将 base 屏蔽或者配置为 '/'。

提交代码部署成功后就可以通过自定义域名访问了。本站：https://runss.top (opens new window)
并且可以通过 自定义域名/仓库名称 来访问该账户下所有开通 Pages 但 未配置自定义域 的站点。如：https://runss.top/vip (opens new window)

提示

配置自定义域时，如果是在 Github 仓库下手动配置：
githubPages 其实也是在仓库下生成 CNAME 文件，如果 deploy.sh 脚本不自动生成 CNAME 文件，下次自动部署强制推送就会把仓库配置的 CNAME 文件删除了，所以自定义域会失效。

点击查看

配置 @ 和 www 两个解析记录：

ymjx3

然后自定义域配置为 wwww 记录:

echo 'www.runss.top' > CNAME # // 域名替换成你的

那么访问 https://runss.top (opens new window) 就会被重定向到 https://www.runss.top (opens new window)，两者都可以访问到本站。

由于更改了 base，那么之前部署到 Gitee 的仓库地址也需要修改，否则会出现样式丢失问题。

giteeName

这样就可以通过 https://<username>.gitee.io 正常访问了，本站：https://runss11.gitee.io (opens new window)

修改了 Gitee 部署仓库地址也要记得修改 gitee.yml 中的地址

# Gitee Pages 自定义域名

Gitee Pages 自定义域名功能需要开通 Gitee Pages Pro 才支持，具体看官方文档 (opens new window)。

# SEO 优化

参考这里 (opens new window)

# 百度推送

前往百度搜索资源平台/原百度站长 (opens new window)
添加站点，然后验证，百度提供了三种验证方式，本站使用 CNAME 解析验证

baidu

验证通过后在 普通收录/资源提交/API提交/curl推送示例 下获取命令

baidu1

然后看这里 (opens new window)

编辑此页

#本站 #VuePress #GitHub

上次更新: 2023/02/02, 14:58:40

← 本站评论本站管理→