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:CodingGitHub下,而我為這點代碼創建了代碼倉庫https://github.com/dbdgs/dbdgs.github.io。于是我打開了git bash, 執行如下的命令:

cd 'D:CodingGitHub'

接下來,按vdoing主題的ReadMe進行如下操作:

# clone the projectgit clone https://github.com/xugaoyi/vuepress-theme-vdoing.git# enter the project directorycd vuepress-theme-vdoing# install dependencynpm install # or yarn install# developnpm 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" branchecho 'dbdgs.cn' > CNAME  # 改成你要綁定的域名msg='deploy'githubUrl=git@github.com:dbdgs/dbdgs.github.io  # 按你的代碼倉庫信息進行修改git initgit add -Agit commit -m "${msg}"git push -f $githubUrl master:gh-pages # 推送到githubcd - # 退回開始所在目錄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 ELIFECYCLEnpm ERR! errno 128npm ERR! theme-vdoing-blog@1.0.0 deploy: `bash deploy.sh`npm ERR! Exit status 128npm 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.logError: 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:      - mainjobs:  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 -

只需:

• 給代碼倉庫 https://github.com/dbdgs/dbdgs.github.io 加一個名字為ACCESS_TOKEN的secret值
• 將該yaml文件放在該代碼倉庫中的位置: 根目錄 -> .github -> workflows 即可~

這次就醬紫咯,希望玩vuepress的小伙伴一切順利哈~

5 / 5 ( 4 votes )