Build 和 Deploy的方法 - 3dw/auto20-next GitHub Wiki

20240705 Summary:

1. Running yarn build followed by yarn deploy will automatically deploy to the gh-pages branch, as it is configured in the GitHub Pages settings page. This will update https://we.alearn.org.tw/.

2. Directly pushing the rebuilt code to https://github.com/3dw/auto20-next will update https://auto20-next.pages.dev/#/.

使用 Yarn 來重新編譯並發佈專案到 Cloudflare Pages，可以按照以下步驟操作：

1. Fork 專案 首先，將該專案 fork 到你的 GitHub 帳戶，這樣你可以在自己的帳戶下進行更改。

2. Clone 專案 將 fork 的專案 clone 到你的本地開發環境。

   git clone https://github.com/你的帳號/auto20-next.git
   cd auto20-next
   

3. 安裝依賴 確保你已經安裝了 Yarn，然後在專案根目錄執行以下命令來安裝依賴：

   yarn install
   

4. 編譯專案 使用以下命令來編譯專案：

   yarn build
   

5. 設定 GitHub Pages 將編譯後的檔案發佈到 GitHub Pages 需要將 dist 文件夾內容推送到 gh-pages 分支。你可以使用 gh-pages npm 包來自動化這個過程。 先安裝 gh-pages：

   yarn add gh-pages --dev
   

6. 設定發佈腳本 在 package.json 中新增以下腳本：

   "scripts": {
     "predeploy": "yarn build",
     "deploy": "gh-pages -d dist"
   }
   

7. 發佈到 GitHub Pages 執行以下命令來發佈你的專案：

   yarn deploy
   

8. 確認 GitHub Pages 設定 前往 GitHub 專案的設定頁面，找到 GitHub Pages 部分，確認 source 已設置為 gh-pages 分支。

9. 使用 Cloudflare Pages 發佈 如果你希望將專案發佈到 https://auto20-next.pages.dev/，可以使用 Cloudflare Pages：

   • 登入 Cloudflare Pages
   • 點擊 Create a project
   • 選擇你的 GitHub 專案，並連結到 Cloudflare Pages
   • 設定 Build 命令為 yarn build，以及 Build 輸出目錄為 dist
   • 完成設定後，Cloudflare Pages 會自動從 GitHub 獲取專案並發佈到 pages.dev 網址

完成以上步驟後，你的專案應該會被編譯並發佈到 https://auto20-next.pages.dev/。