一個課程專案如果還需要老師、評審、隊友或招募方先下載 ZIP、找到正確資料夾、安裝依賴，再猜哪個檔案能開啟頁面，那它還不算真正適合繳交。
很多學生專案更好的交付方式，是一個能直接開啟的連結。
這不代表每個作業都需要完整的雲端架構。大學課程、bootcamp、hackathon、作品集練習裡，有很多專案本身就是靜態的，或可以 build 成靜態檔案：HTML、CSS、JavaScript、Vite、React、Vue、Astro、小型瀏覽器遊戲、UI 練習、landing page、dashboard、作品集實驗。只要瀏覽器可以直接執行最終檔案，不需要額外的 server process，它通常就適合靜態託管。
學生專案託管需要解決什麼
目標不是單純把檔案放到網路上。真正要解決的是，別人能不能順利開啟並理解這個專案。
| 需求 | 實際含義 |
|---|---|
| 容易開啟 | 評審點 URL，而不是下載 ZIP。 |
| 資源完整 | CSS、圖片、字型、JavaScript、JSON 和 build 產生的資料夾都能從公開 URL 載入。 |
| 能離開自己的電腦測試 | 手機、另一台電腦或另一個瀏覽器也能開啟。 |
| 繳交脈絡清楚 | 首頁說明這個專案是什麼、該看哪裡。 |
| 可放進作品集 | 同一個連結可以放到履歷、作品集、GitHub README 或實習申請裡。 |
| 出錯後能恢復 | 新版本上傳壞了，可以替換或 rollback，而不是重新解釋一個新連結。 |
「在我電腦上能跑」不夠。繳交給別人看的專案，必須在別人的環境裡也能開啟。
哪些專案適合靜態託管
如果最終成果是瀏覽器能直接載入的一組檔案，就很適合靜態託管。
| 專案類型 | 通常上傳什麼 | 注意點 |
|---|---|---|
| HTML/CSS 作業 | 包含 index.html 的資料夾 | 圖片、字型、CSS 資料夾也要一起上傳。 |
| JavaScript 練習 | 包含 HTML、JS、CSS 和資源的資料夾 | 適合計算機、小遊戲、quiz、todo app、圖表和 UI 練習。 |
| Vite 專案 | npm run build 後的 dist | 如果目標是公開連結，不要上傳 src。 |
| React 專案 | build 輸出資料夾 | 公開連結應該服務編譯後的靜態檔案。 |
| Vue 專案 | build 後的 dist | 發佈後要檢查路由和資源路徑。 |
| 靜態作品集 | 作品集資料夾或 build 輸出 | 不要只放截圖，最好加專案說明。 |
| Hackathon frontend | 靜態 build 輸出 | 如果 demo 依賴 API 或 backend，需要另外託管。 |
靜態託管不會執行 PHP、Java、Python、Ruby、資料庫伺服器、背景工作或認證服務。你可以把 frontend 靜態發佈出來，但 backend 和 database 要放在其他地方執行。
為什麼很多人先想到 GitHub Pages
很多課程本來就使用 GitHub，所以 GitHub Pages 很自然。GitHub Pages 是從 repository 發佈 HTML、CSS 和 JavaScript 的靜態站點託管服務。對於程式碼已經整理在 repo 裡的開發專案，它確實合適。
但 repository-first 不一定永遠是最快的繳交方式：
- 專案來自下載模板、AI 生成匯出或設計工具資料夾。
- 你需要先繳交連結，之後再整理 repo。
- 第一次 demo 更看重能開啟的結果，而不是 commit history。
- 最終發佈資料夾是 build 後產生的，跟 source 資料夾不是同一個東西。
- 小組成員需要發佈專案，但不一定是 repository owner。
Cloudflare Pages 也提供 Direct Upload，用於上傳預先 build 好的資源或本機電腦上的資料夾。Firebase Hosting 則主打 web app 的快速安全託管。這說明市場裡一直存在這種需求：先拿到可開啟的公開連結，再決定要不要引入更完整的工程流程。
適合作業繳交的流程
用最小流程產出一個可信連結。
- 在本機完成專案。
- 找到真正要發佈的資料夾。
- 上傳完整資料夾或 ZIP。
- 用無痕視窗開啟產生的 HTTPS 連結。
- 在手機或另一個瀏覽器再測一次。
- 把連結填到作業繳交表單裡。
- 如果專案值得展示，之後繼續放到作品集裡。
第二步最容易出錯。很多學生專案壞掉，不是因為平台問題，而是上傳了錯誤資料夾。
| 技術棧 | 通常發佈 | 通常不要發佈 |
|---|---|---|
| HTML/CSS/JS | 包含 index.html 的資料夾 | 只有 index.html，沒有資源檔 |
| Vite | dist | src, node_modules |
| React static build | build 或 framework 輸出 | 未 build 的 source 資料夾 |
| Vue | dist | 只有原始碼的 project root |
| Astro | dist | build 前的 content/source 資料夾 |
| Next static export | out | 需要 Node process 的應用 |
不確定時，找那個包含 index.html 和編譯後資源的資料夾。上傳前先用靜態預覽開啟一次。
首頁應該寫什麼
專案連結開啟後，評審不應該靠猜。
在首頁前面放一段短說明：
| 欄位 | 範例 |
|---|---|
| 專案名 | Weather Dashboard |
| 課程或活動 | Frontend final project, 2026 |
| 技術棧 | HTML, CSS, JavaScript, OpenWeather API |
| 建議測試 | 搜尋城市、切換單位、檢查 RWD |
| 已知限制 | demo API key 有 rate limit；沒有帳號系統 |
這能幫助老師檢查正確功能，也能幫助實習招募方快速理解專案，而不是先讀完整 repo。
繳交前常見錯誤
很多公開連結壞掉，原因都很基本。
| 現象 | 常見原因 | 處理方式 |
|---|---|---|
| 首頁 404 | index.html 不在發佈 root | 上傳直接包含 index.html 的資料夾。 |
| CSS 不載入 | 使用了本機路徑或絕對路徑 | 改用相對路徑，並上傳 CSS 資料夾。 |
| 圖片本機能顯示，線上不顯示 | 圖片資料夾沒上傳，或大小寫不一致 | 上傳所有資源，檢查 Logo.png 和 logo.png。 |
| 按鈕沒反應 | JavaScript 檔案沒找到 | 在公開 URL 開啟 devtools，看失敗的 request。 |
| React/Vue 路由 404 | 靜態路由沒有處理 | 根據專案需要使用 hash routing 或 fallback。 |
| API 呼叫失敗 | backend 沒部署、CORS 被擋，或程式裡還寫著 localhost | 把 localhost 換成真實 API URL，並單獨託管 backend。 |
最快的測試方法很簡單：用一台從沒看過本機檔案的裝置開啟公開連結。
如果專案有 backend
有些作業不是純靜態專案。它們會用 Express、Flask、Django、Spring Boot、PHP、Firebase、Supabase、database 或登入系統。
這種情況要把層次分清楚：
| 層 | 應該放在哪裡 |
|---|---|
| 靜態 frontend | DeployPages 或其他 static host |
| API server | backend host、serverless platform 或課程指定環境 |
| Database | managed database 或學校環境 |
| Secret | backend environment variables，不能放在公開 frontend 檔案裡 |
不要把 .env、private key、database credential、老師提供的 secret 上傳到公開靜態網站。frontend 檔案裡的內容，瀏覽器都能看到。
讓連結適合放進作品集
課程作業如果整理得好，可以成為作品證明。
在課程之外分享前，建議補上：
- 這個專案解決什麼問題，以及你的做法。
- 哪些部分是你自己完成的。
- 只有在有幫助時才放截圖。
- 如果 repo 已經整理好，可以放 source code 連結。
- 說明 demo data、關閉的功能或 API 限制。
- 如果它成為主作品集的一部分，再加 custom domain。
沒必要把課程作業包裝成成熟 SaaS。具體、誠實的說明更可信。
DeployPages 適合放在哪一步
DeployPages 適合「我現在需要一個能開啟的 HTTPS 連結」的階段。
你可以從瀏覽器上傳靜態資料夾、ZIP、HTML 專案、frontend build 輸出、AI 生成頁面、PDF、小型遊戲、履歷頁或作品集實驗。專案變重要後，同一條路徑可以繼續加入 custom domains、analytics、password protection、rollback 和 CLI deploys。
學生專案可以從 student hosting 開始。如果只是 HTML 檔案或小資料夾，HTML deployment guide 更直接。履歷和作品集可以繼續看 resume hosting 和 portfolio hosting。
繳交前檢查清單
在 Moodle、Canvas、Google Classroom、郵件或表單裡貼上 URL 前，先確認：
index.html或靜態 entry point 在發佈 root。- CSS、JavaScript、圖片、字型、JSON 和產生資源都已包含。
- 連結能在無痕視窗開啟。
- 連結能在手機上開啟。
- 首頁解釋了專案、課程、技術棧和檢查重點。
- 公開檔案裡沒有 secret、token、private data 或個人文件。
- backend 依賴已經說明，並且單獨託管。
- 繳交的是最終公開 URL，不是本機路徑或 dashboard URL。
這個短清單能避免很多 deadline 前最浪費時間的問題。