前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >[原创]VuePress教程之部署到Github Action

[原创]VuePress教程之部署到Github Action

作者头像
极客中心
发布2021-01-21 15:53:36
2.8K0
发布2021-01-21 15:53:36
举报
文章被收录于专栏:极客中心

VuePress教程之部署到Github Action

本文阅读重点 <

1 VuePress教程之部署到Github Action

1.1 主题的选取:vdoing主题

1.2 安装vdoing主题

1.3 本地部署

1.4 使用Github Action部署

1.5 分享我的 ci.yml配置文件

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

主题的选取:vdoing主题

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

安装vdoing主题

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

代码语言:javascript
复制
cd 'D:\Coding\GitHub'

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

代码语言:javascript
复制
# 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

代码语言:javascript
复制
#!/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'
githubUrl=git@github.com: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 时会出现以下错误:

代码语言:javascript
复制
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! theme-vdoing-blog@1.0.0 deploy: `bash deploy.sh`
npm ERR! Exit status 128
npm ERR! 
npm ERR! Failed at the theme-vdoing-blog@1.0.0 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

代码语言:javascript
复制
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 )

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020-12-3 2,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • VuePress教程之部署到Github Action
    • 主题的选取:vdoing主题
      • 安装vdoing主题
        • 本地部署
          • 使用Github Action部署
            • 分享我的 ci.yml配置文件
            领券
            问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档