使用 GitHub Actions 部署 GitHub Pages

官方的和我實(shí)際想要實(shí)現(xiàn)的有一點(diǎn)差異,官方的是部署到當(dāng)前倉庫的 GitHub Pages

我這邊原來有一個(gè)網(wǎng)站,這次使用Hexo重新做一個(gè)博客,又新建了一個(gè)代碼倉庫

我想實(shí)現(xiàn)的效果是,往hexo-blog 倉庫提交Markdown內(nèi)容之后自動(dòng)編譯,然后將編譯后的內(nèi)容提交到 wangwen135.github.io這個(gè)倉庫


官方的

先參考一下官方的文檔說明

官方說明文檔:https://hexo.io/zh-cn/docs/github-pages

.github/workflows/pages.yml 文件內(nèi)容如下:

name: Pages

on:
  push:
    branches:
      - main # 當(dāng)推送到 main 分支時(shí)觸發(fā)工作流

jobs:
  build:
    runs-on: ubuntu-latest # 工作運(yùn)行在最新的 Ubuntu 環(huán)境中
    steps:
      - uses: actions/checkout@v4 # 檢出代碼
        with:
          token: ${{ secrets.GITHUB_TOKEN }} # 使用 GitHub token
          submodules: recursive # 如果倉庫依賴子模塊,則遞歸檢出
      - name: Use Node.js 20 # 使用 Node.js 20
        uses: actions/setup-node@v4
        with:
          node-version: "20" # 指定 Node.js 版本為 20
      - name: Cache NPM dependencies # 緩存 NPM 依賴
        uses: actions/cache@v4
        with:
          path: node_modules
          key: ${{ runner.OS }}-npm-cache
          restore-keys: |
            ${{ runner.OS }}-npm-cache
      - name: Install Dependencies # 安裝依賴
        run: npm install
      - name: Build # 構(gòu)建項(xiàng)目
        run: npm run build
      - name: Upload Pages artifact # 上傳構(gòu)建產(chǎn)物
        uses: actions/upload-pages-artifact@v3
        with:
          path: ./public # 指定上傳的路徑
  deploy:
    needs: build # 依賴 build 任務(wù)
    permissions:
      pages: write # 給予 GitHub Pages 寫權(quán)限
      id-token: write # 給予 ID 令牌寫權(quán)限
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest # 工作運(yùn)行在最新的 Ubuntu 環(huán)境中
    steps:
      - name: Deploy to GitHub Pages # 部署到 GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

這個(gè) GitHub Actions 配置文件用于將編譯后的 HTML 文件自動(dòng)部署到當(dāng)前倉庫的 GitHub Pages。
這里加上了一點(diǎn)注釋


修改后的

完整的 GitHub Actions 工作流 YAML 文件

.github/workflows/deploy.yml

name: Deploy to GitHub Pages

# 觸發(fā)條件:當(dāng)推送到 main 分支時(shí)
on:
  push:
    branches:
      - main
  workflow_dispatch: # 允許手動(dòng)觸發(fā)

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      # 檢出 hexo-blog 倉庫的代碼
      - name: Checkout repository
        uses: actions/checkout@v4

      # 設(shè)置 Node.js 環(huán)境
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'

      # 緩存 NPM 依賴
      - name: Cache NPM dependencies
        uses: actions/cache@v4
        with:
          path: ~/.npm
          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-node-

      # 安裝依賴
      - name: Install dependencies
        run: npm install

      # 構(gòu)建 Hexo 網(wǎng)站
      - name: Build Hexo site
        run: npm run build

      # 部署到 GitHub Pages
      - name: Deploy to GitHub Pages
        env:
          ACTIONS_DEPLOY_KEY: ${{ secrets.ACTIONS_DEPLOY_KEY }}
        run: |
          echo "創(chuàng)建 .ssh 目錄"
          mkdir -p ~/.ssh
          echo '寫入部署密鑰到 id_ed25519 文件中'
          echo "${{ secrets.ACTIONS_DEPLOY_KEY }}" > ~/.ssh/id_ed25519
          echo "設(shè)置私鑰文件權(quán)限"
          chmod 600 ~/.ssh/id_ed25519

          cat ~/.ssh/id_ed25519

          echo "添加 GitHub 的 SSH 主機(jī)密鑰到 known_hosts 文件中"
          ssh-keyscan github.com >> ~/.ssh/known_hosts
          
          echo "配置 Git 用戶信息"
          git config --global user.name 'github-actions[bot]'
          git config --global user.email 'github-actions[bot]@users.noreply.github.com'
          
          echo "克隆 wangwen135.github.io 倉庫的 main 分支到 .deploy_repo 目錄"
          git clone --branch main git@github.com:wangwen135/wangwen135.github.io.git .deploy_repo

          echo "切換到 .deploy_repo 目錄"
          cd .deploy_repo

          echo "更新一下代碼"
          git pull

          echo "使用 rsync 將 public 目錄中的內(nèi)容同步到 .deploy_repo 目錄"
          rsync -av --delete --exclude '.git' ../public/ .

          echo "添加所有更改"
          git add .
          echo '提交更改,提交信息為 "Deploy updates"'
          git commit -m "Deploy updates"
          echo "推送更改到遠(yuǎn)程倉庫的 main 分支"
          git push

相關(guān)步驟上面都有注釋

因?yàn)橐褂胓it將文件推送到倉庫wangwen135.github.io 需要配置ssh key,還需要進(jìn)行下面的步驟

配置 Secrets

在 GitHub Actions 中,Secrets 是一種安全存儲(chǔ)和管理敏感信息的方法,例如訪問令牌、API 密鑰、SSH 密鑰等。Secrets 可以在工作流中使用,但不會(huì)在日志中顯示,確保了敏感信息的安全。

設(shè)置步驟

生成 SSH 部署密鑰

在本地機(jī)器上生成 SSH 密鑰對(duì):

ssh-keygen -t ed25519 -C "wangwen135@gmail.com" -f ./id_ed25519

按提示操作,將會(huì)在當(dāng)前執(zhí)行的目錄中生成 id_ed25519 和 id_ed25519.pub 兩個(gè)文件

添加 id_ed25519 到 hexo-blog 的 GitHub Secrets

將生成的私鑰 id_ed25519 的內(nèi)容添加到 hexo-blog 倉庫的 GitHub Secrets 中,步驟如下:

  • 打開 GitHub,進(jìn)入你的 hexo-blog 倉庫。
  • 點(diǎn)擊 "Settings" 選項(xiàng)卡。
  • 在左側(cè)邊欄中,找到并點(diǎn)擊 "Secrets and variables" 下的 "Actions"。
  • 點(diǎn)擊 "New repository secret" 按鈕。
  • 在 "Name" 字段中輸入 ACTIONS_DEPLOY_KEY,在 "Secret" 字段中粘貼 id_ed25519 文件的內(nèi)容。
  • 點(diǎn)擊 "Add secret" 按鈕保存。

添加 id_ed25519.pub 到目標(biāo)倉庫的部署密鑰

將生成的公鑰 id_ed25519.pub 添加到 wangwen135.github.io 倉庫的部署密鑰中,步驟如下:

  • 打開 GitHub,進(jìn)入你的 wangwen135.github.io 倉庫。
  • 點(diǎn)擊 "Settings" 選項(xiàng)卡。
  • 在左側(cè)邊欄中,找到并點(diǎn)擊 "Deploy keys"。
  • 點(diǎn)擊 "Add deploy key" 按鈕。
  • 在 "Title" 字段中輸入一個(gè)描述性的名稱,例如 "GitHub Actions Deploy Key"。
  • 在 "Key" 字段中粘貼 id_ed25519.pub 文件的內(nèi)容。
  • 確保勾選 "Allow write access" 復(fù)選框。
  • 點(diǎn)擊 "Add key" 按鈕保存。
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容