Vibe Coding — Stage 2 · 串 AI
M2-2

Vibe Coding 實戰課 — Stage 2 · 串 AI

把 GAS 工具
搬上 GitHub

搬家的過程就是學安全的最好時機

M2-2 3 小時 6 輪循環 安全 + 搬家

按 → 或空白鍵開始

上堂回顧：M1-4 做了什麼

GAS 後端
+
Groq API
+
TG Bot
=
AI 分析工具
現況

工具能用，但 API Key 存在 GAS Script Properties 裡
只有你自己能用，沒有短網址，沒有版本紀錄

GAS 的天花板

每次執行上限 6 分鐘 — 如果任務要跑更久，GAS 撐不住
以後要搬到 GitHub Actions（M3-4 會教），所以先學會在 GitHub 上管密碼

六輪循環，任務驅動學安全

Round 1
案例 + 搬家動機
Round 2
.gitignore + Secrets
Round 3
搬家實作
Round 4
Commit 深化
Round 5
GitHub 協作
Round 6
安全 Checklist

核心任務
把 M1-4 的 GAS AI 分析工具搬到 GitHub Pages 上線
過程中學會 .gitignore、Secrets、commit、協作

ROUND 1 · 0:00–0:15

搬家前
先把門鎖好

GitHub 是公開的，密碼管理是第一步

真實案例：AWS Key 外洩

$12,000
帳單
某開發者把 AWS Key 推到 Public repo
1
推了一個含 AWS Key 的 commit

以為是 private repo，其實是 public

2
機器人 15 分鐘內就掃到

自動化爬蟲 24 小時掃 GitHub 新 commit

3
被拿去開 EC2 挖礦

一覺醒來帳單 $12,000

GitHub 搜尋：API_KEY

講師示範

看去識別截圖與假 repo 搜尋結果
理解外洩樣貌，不接觸疑似可用憑證

13%
GitHub 專案含硬編碼密碼
(GitGuardian 2024)
12.8M
2023 年 GitHub
偵測到的外洩 secret
15 min
從 push 到被
機器人掃到的時間

這不是理論 — 這是每天都在發生的事

你的 M1-4 工具有 API Key

如果要放到 GitHub 上
怎麼不讓 Key 外洩？

Groq API Key

呼叫 AI 模型用
外洩 = 別人用你的額度

TG Bot Token

操控你的 Bot 用
外洩 = 別人控制你的 Bot

GAS URL

公開入口
風險 = 被濫用呼叫

為什麼要搬家

GAS 的限制
  • 每次執行上限 6 分鐘
  • 長時間 AI 分析會超時
  • 沒有版本控制
  • 沒有短網址可分享
GitHub 的優勢
  • GitHub Pages 免費託管
  • Git 版本控制
  • Secrets 密碼管理
  • 以後接 Actions 做自動化
搬家路線

前端 HTML → GitHub Pages
後端 API Proxy → 暫時留在 GAS（Key 不外露）
以後 M3-4 學 GitHub Actions 再搬後端

Round 1 小結

密碼外洩是真的會出事的
搬家前先把門鎖好，再把東西搬進去
先建防線
→
再放東西
→
最後上線

ROUND 2 · 0:15–0:40

.gitignore
+ Secrets

防線先建好，再放東西

Step 1：建新 repo

1
GitHub → New repository

名稱：vibe-coding-tool

2
選 Public + Add README

Public 才能用 GitHub Pages 免費託管

3
建好之後先不要上傳任何程式碼

防線還沒建好，不要急著放東西

重點

Public repo = 全世界看得到
所以接下來的每一步都跟「保護密碼」有關

Step 2：第一步就建 .gitignore

.gitignore
# 敏感檔案
.env
.env.*
*.key
*.pem

# 系統檔
.DS_Store
Thumbs.db
.gitignore = 守門員

列在這裡的檔案，Git 會自動忽略，不會被上傳
第一步就建好，確保敏感檔案永遠不進 repo

順序很重要

錯誤順序

先上傳 .env
再加 .gitignore

.env 已經在 repo 裡了
.gitignore 擋不住已追蹤的檔案

正確順序

先建 .gitignore
再建 .env

.env 從一開始就被忽略
永遠不會進 repo

注意事項

一旦檔案被 commit 過，就算後來加到 .gitignore 也沒用
歷史紀錄裡永遠有那個檔案

Step 3：建 .env（本機用）

.env — 存在你的電腦裡，不會被上傳
GROQ_API_KEY=gsk_xxxxxxxxxx
TG_BOT_TOKEN=123456:ABCdefGHIjklMNO
用途

本機開發時讀取
因為 .gitignore 已經排除，所以不會被上傳到 GitHub

驗證方法

git status 看看 .env 有沒有出現
如果沒出現 = .gitignore 生效了

Step 4：設定 GitHub Secrets

1
repo → Settings → Secrets and variables → Actions

這裡是 GitHub 的雲端保險箱

2
New repository secret

名稱：GROQ_API_KEY / 值：你的 Key

3
再加一個 TG_BOT_TOKEN

存好之後，值會被遮蔽，看不到原文

Secrets = 雲端保險箱

GitHub Actions 執行時才讀取，人看不到值
M3-4 會用到，現在先存好

確認防線到位

V
.gitignore 已建好

包含 .env / .env.* / *.key

V
.env 不在 repo 裡

git status 看不到 .env

V
Secrets 已存好

GROQ_API_KEY + TG_BOT_TOKEN 都看不到值

V
程式碼裡沒有任何密碼

Ctrl+F 搜尋 gsk_ / key / token，確認沒有硬編碼

三層密碼管理

存放方式 位置 用途 安全性
Script Properties GAS 內 GAS 專用 中
.env 本機 IDE 開發用 高（不上傳）
GitHub Secrets repo Settings Actions 用 高
程式碼裡 任何 .js / .html — 零（絕對不行）

不同場景用不同存放方式
唯一的共同規則：程式碼裡絕對不放密碼

注意：Secret 名稱打錯

名稱不一致

Secrets 存：groq_api_key
程式讀：GROQ_API_KEY

大小寫不同 → 讀不到 → 功能壞掉
但錯誤訊息不會告訴你「名稱打錯了」

名稱一致

Secrets 存：GROQ_API_KEY
程式讀：GROQ_API_KEY

全大寫 + 底線分隔 = 業界慣例
存和讀永遠用同一個名稱

慣例

環境變數一律全大寫、底線分隔
GROQ_API_KEY、TG_BOT_TOKEN、DATABASE_URL

Round 2 小結

.gitignore
+
.env
+
Secrets
=
防線完成

防線建好了，可以開始搬家

.gitignore 守本機、Secrets 守雲端、程式碼裡零密碼

ROUND 3 · 0:40–1:05

搬家實作
M1-4 上 GitHub Pages

功能不變，基礎設施升級

搬家後的架構

使用者瀏覽器
→
GitHub Pages
前端 HTML
→
GAS 後端
API Proxy
→
Groq API
架構說明

前端搬到 GitHub Pages，有短網址可以分享
後端仍用 GAS，API Key 在 GAS 裡，前端看不到
GAS URL 是公開入口，不是密碼，不承諾無限制使用
最低防線：配額、簡單使用限制，課後關閉或更換 endpoint

搬家步驟

1
把 M1-4 的前端 HTML 複製到 repo

上傳 index.html 到 vibe-coding-tool repo

2
確認 HTML 裡呼叫的是 GAS 端點

前端 fetch 公開 GAS URL → GAS 帶 Key 呼叫 Groq

3
Settings → Pages → Deploy from main branch

等 1-2 分鐘，拿到 https://你的帳號.github.io/vibe-coding-tool/

4
打開網頁測試 AI 分析功能

功能跟 M1-4 一樣，但現在有短網址了

搬家前逐行檢查

注意事項

M1-4 的 HTML 裡可能殘留 GAS URL 或 API Key
搬家前用 Ctrl+F 搜尋以下關鍵字

搜尋這些關鍵字，確認沒有殘留
gsk_          → Groq API Key 前綴
sk-           → OpenAI Key 前綴
AIza          → Google Key 前綴
Bot           → TG Bot Token
api_key       → 任何 key 變數
password      → 密碼
secret        → 密鑰
原則

搬家 = 不只是複製貼上，要逐行檢查有沒有帶走不該帶的東西

互相用 DevTools 檢查

1
打開同學的 GitHub Pages 網頁

按 F12 開啟 DevTools

2
Sources 頁籤 → 看 HTML / JS 原始碼

搜尋 gsk_ / key / token

3
Network 頁籤 → 觸發 AI 分析

看 request 是送到公開 GAS URL，不是直接呼叫 Groq

驗證結果

在網頁原始碼裡看不到 API Key = 第一層正確
GAS 端點仍要配額、限制與課後關閉

搬家前後對比

搬家前（M1-4）
  • 只有自己能用
  • 沒有短網址
  • 沒有版本紀錄
  • 密碼管理 = 靠記憶
搬家後（M2-2）
  • 任何人能用（有短網址）
  • GitHub Pages 託管
  • Git 版本控制
  • 密碼三層管理

功能完全一樣，但基礎設施升級了
搬家 = 不只是換地方放，是升級整個運作方式

Round 3 小結

搬家 = 升級基礎設施

前端上 GitHub Pages，後端留 GAS 當 Proxy
密碼安全、版本控制、短網址 — 一次到位

ROUND 4 · 1:05–1:25

Commit
是給未來的自己留紀錄

從 M2-1 的基礎再深一層

累積有意義的 Commit

1
修改網頁 → 上傳新版

例如加一個深色模式按鈕

2
寫有意義的 commit message

不要寫「update」，要寫「加上深色模式切換按鈕」

3
再修改 → 再上傳 → 累積 3-4 個 commit

每次改一個功能，寫一個 commit

4
點 Commits 歷史 → 看到每次改了什麼

這就是版本紀錄的價值

Commit message 怎麼寫

沒用的 message

update
fix
test
aaa

一個月後回來看
完全不知道改了什麼

有用的 message

加上深色模式切換按鈕
修正手機版排版溢出
移除殘留的測試 API Key
更新 GAS 端點網址

一個月後回來
每一筆改了什麼一目瞭然

時光機：版本回溯

1
故意把網頁改壞

刪掉一段重要的 HTML，上傳

2
打開 Commits 歷史 → 找到上一個版本

點進去看那個版本的檔案內容

3
把正確的版本內容複製回來

上傳 → 網頁恢復正常

時光機救了我

改壞了不用怕 — 歷史紀錄永遠在
有版本控制 = 永遠能回到過去的任何一個時間點

操作時間

15
分鐘
修改 3 次 → 寫 3 個有意義的 commit → 試一次回溯
修改建議

1. 改標題文字
2. 加一個新區塊
3. 調整配色或字級

Round 4 小結

commit message = 給未來的自己留紀錄
不是寫「update」，要寫「改了什麼」

版本紀錄

每次改了什麼
一目瞭然

版本回溯

改壞了不用怕
隨時回到過去

協作基礎

其他人看你的 commit
就知道你做了什麼

ROUND 5 · 1:25–1:45

GitHub
不只是放程式碼

快速巡覽協作功能，建立認知地圖

Issues：你的便利貼牆

1
打開你的 repo → Issues → New issue

標題寫一個你想加的功能，例如「加上資料匯出功能」

2
可以加標籤（Labels）

enhancement / bug / documentation

Issues 的用途

像便利貼 — 記錄要做的事、發現的問題、想到的點子
公開的 Issues 讓協作者知道專案的方向

Fork：複製別人的專案

1
打開講師的示範 repo → 點 Fork

你的帳號下多了一個完整副本

2
改一個字 → Commit

你改的是你的副本，不影響原始 repo

Fork 的意義

開源世界的運作方式：看到好東西 → Fork → 改 → 提交回去
所有大型開源專案都是這樣協作的

Star + GitHub Profile

Star = 書籤

Star 幾個推薦 repo
以後從 Your stars 快速找回
也是對作者的鼓勵

GitHub Profile = 技術名片

打開你的 GitHub 首頁
別人看到你的 repo、commit 紀錄
這就是你的技術履歷

做得好的 GitHub Profile

README 有自我介紹 + 技術標籤 + 代表作品
contribution graph 有持續的綠色方塊 = 持續在寫程式

GitHub Profile 範例

github.com/你的帳號
你的名字

AI 工具開發者 | Vibe Coding 學員

JavaScript Google Apps Script AI Tools
3 repositories 12 contributions

你的 GitHub Profile 從現在開始建立
每一堂課的作品都是你技術名片上的一筆紀錄

GitHub 功能地圖

Issues

便利貼
記錄待辦

Fork

複製副本
安全修改

Star

書籤收藏
快速找回

Pages

免費託管
短網址上線

Secrets

雲端保險箱
密碼安全

Actions

自動化流水線
M3-4 會教

Pull Request

提交修改請求
以後學

Round 5 小結

GitHub 不只是放程式碼的地方
它是協作平台 + 技術名片 + 部署工具
今天用到的

Pages（託管）+ Secrets（密碼）+ Issues（便利貼）+ Fork（複製）+ Star（書籤）
這五個就覆蓋了日常開發 80% 的 GitHub 操作

ROUND 6 · 1:45–1:55

安全 Checklist
每次上傳前必查

養成習慣比記住知識更重要

安全 Checklist（每次上傳前必查）

1
.gitignore 先建好，包含 .env

防線在東西進來之前就要到位

2
程式碼裡沒有密碼 / Token / Key

Ctrl+F 搜尋 gsk_ / sk- / token / key / password

3
需要密碼的地方用 Secrets 或 .env

程式裡用環境變數讀取，不硬編碼

4
搬家前逐行檢查殘留的 Key

從別的專案複製過來的程式碼最容易殘留

5
上傳前確認一次所有檔案內容

最後一道防線 — 看一眼再按 commit

五道防線的時間軸

建 repo
→
建 .gitignore
→
建 .env
→
寫程式
→
檢查 + Commit
錯誤順序 = 破口

「建 repo → 寫程式 → 上傳 → 才想到要建 .gitignore」
這時候 .env 可能已經被 commit 了，歷史裡永遠有

正確順序 = 零破口

防線在第一步就建好
之後所有操作都在防線保護範圍內

記憶機制更新

存放方式 位置 用途 安全性
Script Properties GAS 內 GAS 專用 中
.env 本機 IDE 開發用 高（不上傳）
GitHub Secrets repo Settings Actions 用 高
程式碼裡 任何 .js / .html — 零（絕對不行）

從 M1-4（只有 Script Properties）到 M2-2（三層管理）
密碼管理能力升級了

六輪回顧

R1 案例 + 搬家動機
R2 .gitignore + Secrets
R3 搬家實作
R4 Commit 深化
R5 GitHub 協作
R6 安全 Checklist

每一輪解決一個問題，疊加一層能力
安全意識不是額外負擔，是搬家過程中自然學到的

M2-2 注意事項總覽

# 常見問題 學到什麼
1 API Key 外洩真實案例 資安是真的會出事
2 先上傳 .env 再加 .gitignore 順序重要，防線先建
3 Secret 名稱打錯 命名一致性
4 M1-4 搬家時殘留 Key 搬家要逐行檢查
5 commit message 寫「update」 寫有意義的紀錄

帶走清單

本堂定位 釐清出邊界與安全的原則

不只學了什麼，是想法怎麼變了
從「程式碼是草稿」→ 程式碼是有邊界的資產

從「搬家好麻煩」
↓
環境決定資產壽命
從「先丟上去再說」
↓
秘密要先被隔離
從「能跑在哪都一樣」
↓
可搬移才算可交付
從「commit 只是存檔」
↓
每次變更都留責任
從「協作就是給權限」
↓
邊界讓合作成立
從「沒出事就安全」
↓
安全是日常紀律

能力累積：M1-4 → M2-2

M1-4 結束時
  • GAS + Groq + TG Bot
  • Key 在 Script Properties
  • 沒有版本控制
  • 只有自己能用
M2-2 結束時
  • GitHub Pages 上線
  • 密碼三層管理
  • Git 版本控制 + 回溯
  • 有短網址分享
  • 安全意識 + Checklist
  • GitHub 協作認知

M2-2 的一句話

搬家的過程就是學安全的最好時機

不是先學安全再搬家
而是在搬家的每一步自然地學會安全

下一堂：M2-3

IDE 入門 + SSH
+ 權限管理

用更強的工具開發
AI 幫你操作，你負責判斷

VS Code + Claude

從網頁 AI 升級到
IDE 內建 AI

終端機 + Git

用指令操作 Git
AI 幫你下指令

SSH + 權限

安全連線遠端
公鑰私鑰原理

M2-2 完

搬家完成
安全到位

你的 AI 工具已經在 GitHub 上線了

GitHub Pages Secrets .gitignore Commit
◈ 章節 ▲