接上一節：從零用VitePress搭建博客教程(6) -– 第三方組件庫的使用和VitePress搭建組件庫文檔 

我們搭建完成vitePress後，那麼接下來就是如何部署到線上伺服器，這裡使用Github Pages，免得自己購買伺服器，當然你也可以自己購買伺服器來部署（比如阿裡雲伺服器）。

在部署之前，我們先簡單瞭解下Github Actions和Github Pages

一、基本概念認識

1、理解Github Actions

中文文檔地址：https://docs.github.com/zh/actions

簡單說，Github Actions就是GitHub官方提供的自動化（CI/CD）服務， 通過它可以完成自動化測試、集成、部署等操作。

它的優勢有：

1. 和GitHub集成更容易
2. 支持復用其他人的基本片段

GitHub Actions的基本概念主要有以下幾個：

workflow （工作流程）：持續集成一次運行的過程就是一個 workflow，一個項目可以有多個workflow。

job （任務）：一個 workflow 由一個或多個 jobs 構成，含義是一次持續集成的運行，可以完成多個任務。

step（步驟）：每個 job 由多個 step 構成，一步步完成，step 下有 name、uses、run、with 等，表示一個 action

action （動作）：每個 step 可以依次執行一個或多個命令（action）。

註意點：
yml配置文件通常存放在項目中的.github/workflows 目錄，每個workflow都是.github/workflows目錄下的一個文件
workflow 文件採用 YAML 格式，文件名可以任意取，但是尾碼統一為 .yml。

如何執行部署的？

簡單說就是，我們通過配置yml文件來執行，當提交代碼到Github倉庫後，就可以自動部署到Github Pages上去。

yml 配置文件一些概念說明

name:  CI
 
on:
  # 手動運行工作流程（workflow_dispatch 事件觸發器配置後可以在actions下手動運行工作流）
  workflow_dispatch:
  push:
    branches: 
      - master
jobs:
  # jobs的id
  build-and-deploy:
    # 指定伺服器的運行環境：最新版本ubuntu
    runs-on: ubuntu-latest
    steps:
      # 使用actions/checkout@v4 庫拉取代碼到 ubuntu 上
      - name: Checkout
        uses: actions/checkout@v4
 
      # 安裝 pnpm
      - name: Install pnpm
        uses: pnpm/action-setup@v2
        with:
          version: 8
 
      # 打包成靜態文件
      - name: Build
        run: pnpm install && pnpm build

我想大家看到上面的配置代碼，基本就知道意思了，這裡也簡單說下

常用的欄位及含義如下：

name :   workflow 的名稱 ， 如果省略該欄位，預設為當前workflow的文件名

on:  指定觸發workflow的條件，通常是一些事件觸發器，比如：push,  workflow_dispatch、pull_request等

steps: 簡單說就是一個步驟的集合（裡面有多個小步驟），從上到下執行，它有幾個相關的選項

1. name：每個小步驟的名稱（可自由定義）。
2. uses：每個小步驟使用的 actions 庫名稱或路徑，Github Actions 允許我們使用別人寫好的 Actions 庫。
3. run:  每個小步驟要執行的 shell 命令。
4. with: 配置actions的額外參數。

2、理解Github Pages

Github Pages簡單說就是可以將我們托管在Github上的項目，免費發佈為對外的公共網頁，免去咱們花錢買伺服器。

我們可以使用 GitHub Pages 來展示一些開源項目、博客等等。

下麵開始說明如何去部署我們的博客站點

二、用Github Actions自動化部署到Github Pages

主要通過以下4個步驟完成部自動化署到

1、在Gtihub上創建倉庫和相關分支

2、配置github pages

3、編寫自動化部署yml文件

4、找到鏈接地址查看博客效果

1、在Gtihub上創建倉庫和相關分支

我們在Github上新建一個倉庫， 這裡我的項目叫vitePress-project。master主分支上提交我們的源代碼。

然後我們再新建一個分支叫deploy-pages，清空裡面的內容，這個分支用於存放pnpm build打包後的代碼。

2、配置Github Pages

到vitePress-project倉庫 -> Settings -> Pages 去設置Pages關聯的分支deploy-pages， 如圖

3、編寫自動化部署配置文件

有兩種方法可以創建自動化部署文件

1、直接去github倉庫/Actions下新建一個自動部署文件ci.yml（ci.yml名字可以自定義），然後修改內容即可

2、手動創建，如下所示

ci.yml配置內容如下

name: GitHub Actions Build and Deploy
 
on:
  # 手動運行工作流程（workflow_dispatch 事件觸發器配置後可以在actions下手動運行工作流）
  workflow_dispatch:
 
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest  #指定伺服器的運行環境：最新版本ubuntu
    steps:
      # 使用actions/checkout@v4 庫拉取代碼到 ubuntu 上
      - name: Checkout
        uses: actions/checkout@v4
        with:
          # 根據網上資料查詢此處可以設置為 false。https://github.com/actions/checkout
          persist-credentials: false
 
      # 安裝 pnpm
      - name: Install pnpm
        uses: pnpm/action-setup@v2
        with:
          version: 8
 
      # 設置node的版本
      - name: Use Node.js
        # 使用 actions/setup-node@v3 庫安裝 nodejs，with 提供了一個參數 node-version 表示要安裝的 nodejs 版本
        uses: actions/setup-node@v3
        with:
          node-version: '18.x'
          cache: 'pnpm'
 
      # 打包成靜態文件
      - name: Build
        run: pnpm install && pnpm build
 
      # 部署到GitHub Pages - 也就是將打包內容發佈到GitHub Pages
      - name: Deploy
        # 使用別人寫好的 actions去部署（將打包文件部署到指定分支上）
        uses: JamesIves/[email protected]
        # 自定義環境變數
        with:
          # 指定倉庫：你要發佈的倉庫路徑名
          repository-name: msyuan/vitePress-project
          # 部署到 deploy-pages 分支，也就是部署後提交到那個分支
          branch: deploy-pages
          # 填寫打包好的目錄名稱路徑，本項目配置在根目錄
          folder: dist

用到的相關插件地址：

https://github.com/actions/checkout

https://github.com/pnpm/action-setup/

https://github.com/actions/setup-node

https://github.com/JamesIves/github-pages-deploy-action

可以看到正在部署中….

4、找到鏈接地址查看博客效果

進入Settings -> Pages會看到博客鏈接地址:

預覽效果：https://msyuan.github.io/vitePress-project/

同時打包後的代碼也正常部署到deploy-pages分支上去了，到此已經完成部署工作

github項目地址：https://github.com/msyuan/vitePress-project

線上預覽效果：https://msyuan.github.io/vitePress-project

原文地址：http://www.qianduan8.com/2072.html