第 6 部分

活動上架成網頁

把做好的活動放到自己的網站，學生掃 QR Code 就能用。

這一頁你要做貼上指令 6-A 整理資料夾 → 用自己的帳號上傳 → 用手機打開確認
你需要第 5 部分的活動資料夾；你自己的網站空間帳號
做完你會得到一個屬於你的活動網址
第 6 部分

用最簡單的方式，把活動變成學生的網站

Agent 幫你整理與檢查，上傳與發布由你用自己的帳號完成。不需要自己架伺服器，也不需要學 Git。

這個工作坊的做法：GitHub 保存，Cloudflare Pages 分享

想長期維護，建議用這個組合：GitHub 保存版本，Cloudflare Pages 提供 HTTPS 網址。兩者連接後，推送更新就會自動重新部署；學員只需開網站，不必有 GitHub 帳號。

  1. 請 Agent 整理網站原始檔與可發布的 dist 資料夾；音檔也要放進去，備份與登入資料不要放入。
  2. 用自己的 GitHub 帳號建立倉庫，讓 Agent 提交、推送。原始碼可放私人倉庫，發布後的網站仍是公開網址。
  3. 登入 Cloudflare，進入「Workers & Pages」→ 建立應用程式 → Pages → 連接 Git，選取剛才的倉庫。若出現 GitHub 授權，由你本人確認要開放的倉庫。
  4. 這份純 HTML 網站：框架選 None，建置指令填 exit 0，輸出目錄填 dist，正式分支選 main，然後部署。
  5. 拿到 pages.dev 網址後，用手機開啟各頁，特別試聽男女聲與逐句播放。之後修改並推送 GitHub，Cloudflare 就會更新同一個正式網址。

Cloudflare 官方：GitHub 連接與自動部署。介面名稱可能調整，以實際畫面為準。

第一次試做，也可以直接上傳

只想快速取得活動網址，可以用下面兩種方式，不必先學 Git。

方式 1：Netlify Drop（建議）方式 2：Google 協作平台（Google Sites）進階：GitHub Pages
適合遊戲網頁、朗讀網頁（含音檔）、整個資料夾只有一個 HTML 檔的小遊戲想長期維護、會用 Git 的老師
怎麼做把資料夾、.zip 檔或單一 index.html，直接拖到 Netlify Drop 頁面，馬上得到網址用 Google 帳號登入，新增網站，插入「嵌入」→「嵌入程式碼」，貼上 HTML申請帳號、建立倉庫、上傳、開啟 Pages，步驟較多
要申請什麼不用 Git。頁面可能會請你登入或註冊 Netlify 才能保留網站（以當時頁面提示為準）學生本來就有 Google 帳號，不用另外申請GitHub 帳號
注意網址預設是公開的；可以到後台改網站名稱多個檔案（例如朗讀網頁的音檔）不好放，只適合單一檔案不建議第一次使用
簡單的選法：要放整個資料夾或有音檔，用 Netlify Drop；只有一個 HTML 檔、又想留在 Google 帳號裡，用 Google 協作平台。這兩種做法，作者都沒有在每一台電腦上測過，介面可能改版，以你當時看到的畫面為準。

做法（Netlify Drop）

  1. 貼上「指令 6-A」，讓 Agent 把網站整理成一個資料夾（入口是 index.html），另外壓縮成 .zip 檔，並檢查有沒有金鑰、密碼或個資。
  2. 打開 Netlify Drop，把資料夾、.zip 檔或單一 index.html 拖進去。
  3. 依畫面提示完成（如果要求登入或註冊，用你自己的帳號）。拿到網址後，用手機實際打開，玩一次、聽一次。
  4. 確認沒問題，再做成 QR Code 發給學生。要改內容，就把新的資料夾再拖一次。

做法（Google 協作平台，只有單一 HTML 檔時）

  1. 用你的 Google 帳號登入 Google 協作平台，新增一個網站。
  2. 在頁面裡選「插入」→「嵌入」→「嵌入程式碼」，把遊戲的 HTML 全文貼進去，按「插入」。
  3. 按「發布」，設成學生可以看到。用手機打開網址，玩一次。
音檔、多個檔案的網頁，不適合用這個方式；請用 Netlify Drop。
指令 6-A｜整理成可上傳的網站資料夾
遊戲或朗讀網頁完成後貼上。


  
公開網址任何人都能打開。上傳前請確認：資料夾裡沒有學生名單、金鑰、密碼；課文與詞表若來自出版教材，要確認有權分享，或改成自編內容。


  
完成標準