阅读 164

Github-Pages自动部署VuePress项目

这是我参与8月更文挑战的第17天,活动详情查看:8月更文挑战

前言

首先要准备好你的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 "zchaoGe"
         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://zchaoGe:${{ secrets.ACCESS_TOKEN }}@github.com/zchaoGe/blog.git master:gh-pages         
复制代码

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

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

二. 创建GIT_EMAIL和ACCESS_TOKEN

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

pages4

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

pages5

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

创建一个有 repo 权限的 GitHub Token

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,
}
复制代码

执行Actions

执行前,一定要确保以上步骤没有遗漏。还有要保证仓库是最新的代码,因为你修改过config.js配置文件了。

pages9

如果执行过程中报错了,先排错,再重新执行。成功就是绿色的勾勾。

最后一步:更改Github Pages的分支为gh-pages

pages10

访问Github Pages,成功!

以后我们只需推送代码到Github仓库就可以了,Actions会自动执行,Github Pages也会更新到最新。

文章分类
前端
文章标签