使用 GitHub Actions 將 React TypeScript 項目部署到 GitHub Pages

 

使用 GitHub Actions 將 React TypeScript 項目部署到 GitHub Pages

導言

將 React TypeScript 項目部署到 GitHub Pages 能夠高效地自動化過程，確保您的項目與儲存庫中的最新變更同步。這份教程將指導您如何設置 GitHub Actions 來自動將您的 React TypeScript 項目部署到 GitHub Pages。

前提條件

1. GitHub 帳戶：您需要擁有一個 GitHub 帳戶以及包含您的 React TypeScript 項目的儲存庫。
2. Node.js 和 npm：確保已安裝 Node.js 和 npm 以處理項目依賴性。

分步指南

第一步：準備您的 React 項目

確保您的 React 項目使用 TypeScript 並配置正確構建。在您的 package.json 中，設置 homepage 字段為托管子路徑：

"homepage": "./",

第二步：設置 GitHub Actions

1. 生成提交權杖（Commit Token）：
   • 前往 Settings > Developer Settings > Personal access tokens。
   • 選擇 Generate new token。
   • 為權杖選擇合適的權限，例如儲存庫（repo）訪問。
   • 記下生成的權杖。

2. 將提交權杖添加為密鑰（Secret）：
   • 導航到您的儲存庫設置。
   • 前往 Secrets and variables > Repository secrets > New repository secret。
   • 名稱：COMMIT_TOKEN
   • 密鑰：貼上生成的權杖。

3. 創建工作流文件：

   • 在 GitHub 上您的儲存庫中，前往 Actions 標籤並點擊 “New workflow”。
   • 點擊 “set up a workflow yourself” 以在 .github/workflows 中創建一個新的 YAML 文件。

4. 配置工作流：

   • 用以下配置替換 YAML 文件的內容：

   name: deploy gh-pages
   
   on:
     push:
       branches:
         - main
   
   jobs:
     build:
       name: Build and deploy gh-pages
       env:
         MY_SECRET: ${{ secrets.COMMIT_TOKEN }}
         USER_NAME: githubaction
         USER_EMAIL: githubaction@github.com
         PUBLISH_DIR: ./build
   
       runs-on: ubuntu-latest
   
       strategy:
         matrix:
           node-version: [18.x]
   
       steps:
       - uses: actions/checkout@v1
   
       - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v1
         with:
           node-version: ${{ matrix.node-version }}
   
       - name: npm install
         run: npm install
   
       - name: npm run build
         run: npm run build
   
       - name: Commit files
         run: |
           cd $PUBLISH_DIR
           git init
           git config --local user.name $USER_NAME
           git config --local user.email $USER_EMAIL
           git status
           git remote add origin https://$MY_SECRET@github.com/$GITHUB_REPOSITORY.git
           git checkout -b gh-pages
           git add --all
           git commit -m "deploy to Github pages"
           git push origin gh-pages -f
           echo 🤘 deploy gh-pages complete to $GITHUB_REPOSITORY.git.
   

這個工作流將會在推送到主分支時觸發，安裝依賴項，構建您的項目，將構建成果提交到 gh-pages 分支，然後使用提供的提交權杖進行認證，推送到 GitHub Pages。

第三步：啟用 GitHub Pages

• 進入您的儲存庫設置。
• 定位到“Pages”區域。
• 選擇 gh-pages 分支和 / (root) 文件夾作為您的源。
• 確認您的設置。

結論

按照這些步驟將為您的 React TypeScript 項目設定自動部署到 GitHub Pages，每次對主分支進行提交時都會觸發。這個配置簡化了您的更新流程，並確保了一個流暢且高效的部署管道。

每次提交都會觸發動作，如下圖所示：

請記得在 package.json 中替換 username 和 repo-name 為您實際的 GitHub 用戶名和儲存庫名稱，並根據需要調整工作流 YAML。