第八章：點亮知識中樞（三）：突破雲端，GitHub Pages 正式登陸與 App 化

全自動編譯發布，網頁躍升專屬 App 與圖文捷徑

我們已經在 StackBlitz 成功啟動前端裝甲。現在必須將暫存代碼轉移到永久基地，發布為全世界都能存取的正式網址。Vite 框架無法直接讀取，必須經過打包編譯。我們將透過 GitHub Actions 讓雲端機器人代勞。

第一關：將最新代碼推送至 GitHub 倉庫

由於先前已在 StackBlitz 連動過 GitHub，現在只需將剛完成的主程式與設定檔更新至雲端倉庫。

1. 開啟版本控制：點擊 StackBlitz 左側選單的 GitHub 圖示。
2. 填寫更新說明 (極度重要)：在 Commit message 欄位中，務必輸入任何文字說明 (例如填寫 update 或 deploy)。若欄位留白直接點擊，系統將判定上傳失敗。
3. 確認上傳：輸入文字後，點擊 Commit and push 按鈕。看到綠色成功提示後，最新代碼已安全轉移。

第二關：啟動 GitHub Actions 自動發布

請開啟新的瀏覽器分頁，登入 GitHub 帳號，進入該專案頁面。

1. 進入設定：點擊畫面右上方 Settings (齒輪圖示)。
2. 尋找 Pages：在左側選單區塊找到並點擊 Pages。
3. 切換發布模式：在畫面中央找到 Build and deployment 區塊。將 Source 下拉選單的值修改為 GitHub Actions。
4. 建立編譯劇本：
5. • 回到專案主頁面 (點擊左上角專案名稱)。
   • 點擊 Add file，選擇 Create new file。
   • 在檔名欄位精準輸入：.github/workflows/deploy.yml
   • 在下方空白處貼上這段編譯劇本代碼：

name: Deploy
on:
  push:
    branches: ["main"]
permissions:
  contents: read
  pages: write
  id-token: write
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm install
      - run: npm run build
      - uses: actions/upload-pages-artifact@v3
        with:
          path: ./dist
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    needs: build
    runs-on: ubuntu-latest
    steps:
      - id: deployment
        uses: actions/deploy-pages@v4

1. 在 Commit message 欄位中，務必輸入任何文字說明 (例如填寫 update 或 deploy)。若欄位留白直接點擊，系統將判定上傳失敗。
2. 確認上傳：輸入文字後，點擊 Commit and push 按鈕。看到綠色成功提示後，最新代碼已安全轉移。
3. 觀察編譯進度：點擊畫面上方 Actions 分頁。剛剛儲存劇本的動作會立刻觸發排程。你會看到名為 Deploy 的工作正在執行，旁邊有黃色圓圈轉動。等待約 2 分鐘，黃色圓圈變成綠色打勾即代表發布成功。

第三關：回馬槍！更新 LIFF 通道

拿到正式網址後，必須讓 LINE 伺服器認可新基地。

1. 登入 LINE Developers，進入 LINE Login 頻道。
2. 點擊 LIFF 分頁，點擊想修改的 LIFF 應用程式進入設定，並按下 Edit。
3. 找到 Endpoint URL 欄位。將原本暫填的 https://localhost 刪除，完整貼上剛剛拿到的 GitHub Pages 正式網址。
4. 按下 Update 儲存設定。

第四關：打造專屬入口 (圖文選單綁定)

為了讓操作更直覺，我們可以在 LINE 聊天室建立捷徑，點擊按鈕即可瞬間喚醒系統。

步驟一：獲取專屬 LIFF URL

1. 登入 LINE Developers，進入你的 LINE Login 頻道。
2. 點擊上方 LIFF 分頁。
3. 在你建立的 LIFF 應用程式列表中，找到 LIFF URL 欄位。
4. 點擊旁邊的複製圖示，直接取得完整網址 (格式為 https://liff.line.me/你的LIFF_ID)。

步驟二：綁定至官方帳號

1. 登入 LINE Official Account Manager (官方帳號管理後台)。
2. 在左側選單找到「圖文選單」，點擊建立。
3. 設定顯示期間、選擇版型並上傳底圖。
4. 在動作類型選擇「連結」。
5. 將剛剛複製的 LIFF URL 完整貼入網址欄位。(極度重要：切勿填寫 GitHub 網址，務必使用 liff.line.me 開頭的網址，才能成功觸發 LINE 內部登入機制)。
6. 儲存並發布。

第五關：行動裝置 App 化 (PWA 安裝)

前端裝甲內建的 PWA 技術能讓網頁如同原生 App 般存在於手機桌面。

1. 外部瀏覽器開啟：在手機 LINE 聊天室點擊剛剛設定好的圖文選單。開啟後，點擊畫面系統選單，選擇「在預設瀏覽器開啟」(iOS 必須使用 Safari，Android 必須使用 Chrome)。
2. 加入主畫面：
3. • iOS 使用者：點擊 Safari 下方分享圖示，點選「加入主畫面」。
   • Android 使用者：點擊 Chrome 右上角選單，選擇「安裝應用程式」或「加到主畫面」。
3. 完成部署：回到手機桌面，你會看到專屬的智能資訊牆圖示。點擊它，系統將以全螢幕模式獨立運作。

恭喜完成極限開發任務。現在手機首頁與 LINE 聊天室都已具備專屬的數位系統。資料在 LINE、Google 試算表與 App 間達成完全即時同步。

第九章預告：駕馭 AI 協作，全端系統的無限進化

數位資訊牆已經正式上線。接下來面臨的挑戰是如何依照實際需求持續擴充功能。

下一章將正式進Ai階協作領域。將探討如何指使 AI 工具接手後續的程式碼修改。從前端介面調整到後端 GAS 邏輯重構，我將陪同你建立專屬的「個人開發規範」，並讓 AI 將此規範寫入記憶深處作為未來開發的最高準則。

透過建立標準化的提問結構，同時強制要求 AI 於每次修改後產出《AI 開發循環自檢報告》，你將學會如何穩健地擴增系統，確保每次更新皆精準到位且不引發系統崩潰。準備好讓 AI 成為你專屬工程師。