AI創造工作坊

文科視角的AI應用開發入門

第 4 週：應用程式部署與自動化

Haowen Jiang

工具重點：GitHub Pages, GitHub Actions
應用焦點：自動化部署與公開你的作品

學習如何將你的專案自動部署到網頁，並用 Actions 實現自動化流程

課程地圖(更新)

第 4 週主題

應用程式部署與自動化

• 應用焦點：
  • GitHub Pages：一鍵部署靜態網站
  • GitHub Actions：自動化流程、持續整合(CI)、持續部署(CD)

讓你的作品不只停留在本地，直接向全世界發佈！

學習目標

• 理解 GitHub Pages 的部署流程
  → 學會將靜態網站/作品發佈到網路
• 掌握 GitHub Actions 的自動化原理
  → 學會設計自動化腳本，提升開發效率
• 實作自動部署與版本管理
  → 讓每次更新都能自動發佈

什麼是 GitHub Pages？

• GitHub Pages 是 GitHub 提供的免費靜態網站託管服務
• 只要把 HTML/CSS/JS 放在指定分支或資料夾，就能自動生成公開網頁
• 適合作品集、教學網頁、簡易應用程式

官方說明：GitHub Pages

什麼是 GitHub Actions？

• GitHub Actions 是 GitHub 的自動化工作流程服務
• 可以根據事件（如 push、pull request）自動執行腳本
• 常見用途：自動測試、建置、部署、格式檢查

官方說明：GitHub Actions

本週活動大綱

1. 設定 GitHub Pages 發佈你的作品
2. 編輯 .github/workflows 目錄下的 Actions 工作流程
3. 提交程式碼，觀察自動部署流程
4. 分享你的公開作品（網站或應用程式）連結

01複製課程資料

1. 註冊GitHub帳號（另有教育版，申請教學影片，學生大禮包）
2. Fork 課程資料repository

02新增分支

1. 進入你的GitHub repository
2. 點選「Code」頁籤
3. 點選「Branch: main」下拉選單
4. 輸入新分支名稱（如：deploy），並按下 Enter 鍵

03進入開發環境

1. 進入GitHub Codespaces頁面
2. 創建一個新的 Codespace
   • 選擇剛剛 Fork 的 repository
   • 選擇剛剛新增的分支名稱（如：deploy）
   • 選擇 2-core 機器類型
   • 點擊 Create codespace

04新增一個檔名為my_deck_marp.md的簡報

• 當前目錄下檔名為*_marp.md的檔案都是簡報

.
├── git_basics_marp.md
├── markdown_basics_marp.md
├── w1_deck_marp.md
├── w2_deck_marp.md
├── w3_deck_marp.md
├── w3_deck_marp.md
└── my_deck_marp.md (這個是你要新增的檔案！)

05 在 Codespaces 與 repository 同步檔案

• 點選左側的「Source Control」圖示
• 輸入變更的說明（如：Add my_deck_marp.md）
• 點選「 Commit」按鈕
• 點選「...」按鈕，選擇「Push」將變更推送到 GitHub
• 回到你的 GitHub repository 網頁，確認變更已經反映在你的 repository 中

06 GitHub Pages 設定步驟

1. 進入你的 repository
2. 點選「Settings」→「Pages」
3. 選擇要發佈的分支（如：gh-pages）與資料夾（如：當前目錄/）
4. 儲存設定，取得網頁基本網址（以我的 repository 為例是：https://howard-haowen.github.io/genai_workshop）

07 把修改合併到主分支

1. 回到你的 GitHub repository 網頁
2. 點選「Pull requests」頁籤
3. 點選「New pull request」按鈕
4. 選擇 base branch 為 main，compare branch 為你剛剛新增的分支（如：deploy）
5. 點選「Create pull request」按鈕
6. 輸入標題與描述，然後點選「Create pull request」按鈕
7. 點選「Merge pull request」按鈕，然後點選「Confirm merge」按鈕
8. 查看新增的頁面是否成功發佈（以我的 repository 為例是：https://howard-haowen.github.io/genai_workshop/my_deck_marp.html）

08 GitHub Actions 設定步驟

1. 在 Codespaces 修改工作流程腳本deploy.yml(腳本位置為.github/workflows/deploy.yml，讓AI幫你，參考範例deployQnA.md)
2. 提交並推送到 GitHub
3. 把修改合併到主分支（參考上頁步驟）
4. 查看 Actions 頁面，確認工作流程執行狀態
5. 到 GitHub Pages 基本網址加上/apps（以我的 repository 為例是：https://howard-haowen.github.io/genai_workshop/apps），查看你的應用程式是否成功發佈

下一步：把AI搬回家使用，免費又安全！

1. 安裝 Ollama
2. 下載開源模型（如IBM的granite3.3）
3. 下載VS Code
4. 在GitHub Copilot設定中，選擇Manage Models，然後先後選擇Ollama、granite-3.3

課程連結

• GitHub網站
• GitHub Codespaces
• 課程資料repository
• 提詞範例庫

AI平台

• GitHub Copilot
• Microsoft Copilot
• Google Gemini

推薦VS Code擴充套件 (本課程)

推薦VS Code擴充套件 (一般寫作)