3

VuePress教程之部署到Github Action

 3 years ago
source link: https://www.geekzl.com/vuepress-deploy-github-action.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

VuePress教程之部署到Github Action

最近geekzl打算尝试一下VuePress，据说如果用来做文档体验会很不错，外观和Gitbook有点相似，好处是代码层面具有较大的自由度，也可以顺便加强vue的学习。

主题的选取：vdoing主题

在网上找了一圈vuepress主题，其中vdoing主题让人眼前一亮，就它了。

安装vdoing主题

比如，我打算把代码放在D:\Coding\GitHub下，而我为这点代码创建了代码仓库https://github.com/dbdgs/dbdgs.github.io。于是我打开了git bash, 执行如下的命令:

cd 'D:\Coding\GitHub'

接下来，按vdoing主题的ReadMe进行如下操作:

# clone the project
git clone https://github.com/xugaoyi/vuepress-theme-vdoing.git

# enter the project directory
cd vuepress-theme-vdoing

# install dependency
npm install # or yarn install

# develop
npm run dev # or yarn dev

本地部署，是基于Shell脚本的。

由于我的github账号下已经有一个 yanglr.github.io的仓库了，于是我打算创建一个Organization (dbdgs),

此外，由于是最近才创建的仓库，我的主分支是 main 分支，而不是master，github官方最近有调整。

将build from对应的分支改为gh-pages

我们以vdoing主题的代码仓库中的deploy.sh为基础，根据自己的情况进行一定修改，我这边的代码如下:

deploy.sh

#!/usr/bin/env sh

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

# 生成静态文件
npm run build

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

# Set CNAME for "gh-pages" branch
echo 'dbdgs.cn' > CNAME  # 改成你要绑定的域名

msg='deploy'
[email protected]:dbdgs/dbdgs.github.io  # 按你的代码仓库信息进行修改

git init
git add -A
git commit -m "${msg}"
git push -f $githubUrl master:gh-pages # 推送到github

cd - # 退回开始所在目录
rm -rf docs/.vuepress/dist

注: 这段代码中的 git push -f $githubUrl master:gh-pages # 推送到github, 其中的master我试着改成main，发现无效，就改回master了，本地执行这个bash脚本是可以的，只是github action运行时无效。另外，main分支下不要加CNAME文件。

当改完代码后，在git bash中执行 ./deploy.sh即可~

使用Github Action部署

  1. 按作者给的文档 GitHub Actions 实现自动部署静态博客 进行操作
  2. 用代码仓库 https://github.com/dbdgs/dbdgs.github.io 的创建人账户创建 Access Token，并记录最后生成的值 **************************************** (40位，含字母和数字)。
  1. 给代码仓库 https://github.com/dbdgs/dbdgs.github.io 加一个名字为ACCESS_TOKEN的secret值

需要注意的是：这一步中给Access Token设置的值需要和第二步得到的token值一致，否则会出现下面的问题:

本地 deploy.bash 脚本可以正常 push 代码，但运行 github action 时会出现以下错误:

remote: Invalid username or password.
fatal: Authentication failed for 'https://github.com/dbdgs/dbdgs.github.io/'
npm ERR! code ELIFECYCLE
npm ERR! errno 128
npm ERR! [email protected] deploy: `bash deploy.sh`
npm ERR! Exit status 128
npm ERR! 
npm ERR! Failed at the [email protected] deploy script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/runner/.npm/_logs/2020-11-24T15_38_27_493Z-debug.log
Error: Process completed with exit code 128.

解决方法已经说过了，就是给第3步中Access Token设置的值需要和第二步得到的token值一致。

分享我的 ci.yml配置文件

除了上一部分中的解决办法以外，还有其他更简单的办法，就是基于现成的Github Action来使用。

比如，我的vuepress项目给Github Action用的yaml文件如下:

https://github.com/dbdgs/dbdgs.github.io/blob/main/.github/workflows/ci.yml

name: CI

# 在main分支发生push事件时触发，已由master改为main。
on: 
  push:
    branches:
      - main

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v2 # If you're using actions/checkout@v2 - must set persist-credentials to false in most cases for the deployment to work correctly.
        with:
          persist-credentials: false

      - name: Install and Build
        run: |
          yarn install
          yarn run build
      - name: Deploy
        uses: JamesIves/github-pages-deploy-action@releases/v3
        with:
          GITHUB_TOKEN: ${{ secrets.ACCESS_TOKEN }}
          BRANCH: gh-pages # The branch the action should deploy to.
          FOLDER: docs/.vuepress/dist # The folder the action should deploy.
          BUILD_SCRIPT: npm install && npm run build && cd docs/.vuepress/dist && echo 'dbdgs.cn' > CNAME && cd -

这次就酱紫咯，希望玩vuepress的小伙伴一切顺利哈~

5 / 5 ( 4

votes )


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK