Github-Pages自動部署VuePress專案

性感的小肥貓發表於2021-08-17
GithubVue

這是我參與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_EMAIL和secrets.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也會更新到最新。

相關文章