Github-Pages自动部署

# 前言

首先要准备好你的vuepress项目，才能说部署是吧。其实手动部署也不是不可以，只是你推送了代码之后，到了GitHub Pages那边你还得再操作一遍。所以还是搞个自动部署GitHub Pages方便一点

# 开启Github Pages

先开启Github Pages，先放着。

pages8

这里默认是主分支(master)，保存之后肯定是行不通的，得把后面的步骤做完！

# 步骤

# 一. 创建Actions

1、在博客仓库的Actions选择New workflow

pages1

2、选择Deno第一个就行

pages2

3、可以自定义名字

pages3

4、文件中写入以下代码

name: vuepress-deploy # 这里的名字就是你刚刚自定义那个文件的名字
on:
  push:
    branches:
      - master      
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node: ['lts/fermium']
    steps:
      - name: Checkout
        uses: actions/checkout@main
        with:
          ref: 'master'
          persist-credentials: false
          fetch-depth: 0
        env:
          TZ: Asia/Shanghai
      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@main
        with:
          node-version:  ${{ matrix.node }}
      - name: Install dependencies
        run: npm install
      - name: Build VuePress
        run: npm run build
      - name: Deploy to Pages
        env:
         TZ: Asia/Shanghai
        run: |
         cd docs/.vuepress/dist
         git config --global init.defaultBranch master
         git init
         git config user.name "Chubby-Duner"
         git config user.email "${{ secrets.GIT_EMAIL }}"
         git add .
         git commit -m "Deploying to gh-pages from @ $GITHUB_SHA in $(date +"%Y年%m月%d日 %T %Z")"
         git push -f https://Chubby-Duner:${{ secrets.ACCESS_TOKEN }}@github.com/Chubby-Duner/blog.git master:gh-pages

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

这里我们需要注意一下后面git操作的部分

重点

其中使用到了secrets.GIT_EMAIL和secrets.ACCESS_TOKEN。接下来我们去创建这两个东西

# 二. 创建GIT_EMAIL和ACCESS_TOKEN

在仓库中选择Setting，然后选择Serect，然后新建

pages4

Name填写GIT_EMAIL（当然名字可以自定义），value填入你提交git的邮箱，然后添加

pages5

提示

这里我们先去生成一个token，然后再倒回去创建Serect

创建一个有 repo 权限的 GitHub Token (opens new window)

pages6

这里我们填完名称和勾选上repo和workflow选项之后呢，然后直接点击 Generate token 按钮，即可生成一个token，如下图：

token

注意那个英文的意思是：

确保立即复制您的个人访问令牌。你将无法再看到它！那万一没了重新生成一个就行。

提示

到这我们token已经生成完毕，回去新建Serect。填入token的时候注意不要填多空格，不然后面部署会报错的。

pages7

# 修改配置文件

这里修改一下配置文件.vuepress/config.js，新增base配置

module.exports = {
  // base: '/', // 格式：'/<仓库名>/'， 默认'/'
  base: '/blog/',


  theme: 'vdoing', // 使用npm包主题
  // theme: require.resolve('../../theme-vdoing'), // 使用本地主题

  title: "标题",
  description: '描述',
  markdown: {
    lineNumbers: true, // 代码行号
  },

  head,
  plugins,
  themeConfig,
}