實作教材 / HTML · CSS · JAVASCRIPT

把我的第一個網站
發布到網路上

從註冊帳號開始，完成網站發布、分享與日常維護。依左側章節操作，也可直接跳到需要的步驟。

開啟實作範例下載範例 ZIP

離線可閱讀｜官方連結需連網｜操作圖為流程示意，非實際後台截圖

01認識 Cloudflare Pages

把電腦裡的網頁放上網路，讓別人用網址開啟。

本教材以純 HTML、CSS、JavaScript 靜態網站為範例。您可以發布課程介紹、學習資源、作品展示及在瀏覽器執行的互動練習。

名詞意思
網頁一個頁面，例如 index.html。
網站多個網頁、圖片與其他檔案組成的整體。
代管由服務商儲存並提供網站檔案。
部署 Deployment把一個版本發布到服務上。
專案 ProjectCloudflare 裡管理一個網站及其部署紀錄的單位。

先認識兩個入口

管理後台 dash.cloudflare.com：登入後新增、更新、刪除網站。
正式網站 https://你的專案名稱.pages.dev/：提供訪客閱讀，不是管理頁面。

免費方案與範圍

本課程使用 Pages 的免費靜態網站功能與 pages.dev 網址，不必先購買自訂網域。額外的付費產品、自訂網域註冊及後端功能有各自條件，請以官方方案及限制為準。

靜態網頁本身不會把全班成績自動存進中央資料庫。瀏覽器的 localStorage 只屬於該裝置與瀏覽器；集中保存、登入權限與資料庫需要另外設計。

完成檢查　能說明「管理後台」與「正式網站」的用途。

官方參考：Pages 概覽

02註冊與登入

  1. 開啟 Cloudflare 註冊頁。已有帳號者直接登入，不需為每個網站重辦帳號。
  2. 輸入可收信的 Email 與密碼，依畫面完成驗證，按 Create Account（建立帳號）。
  3. 到信箱找到驗證信，點選驗證連結。找不到時先查垃圾郵件，再由後台重寄。
  4. 回到 管理後台登入；若有多個帳戶，選擇要放網站的帳戶。
  5. 找到 Workers & Pages。如果首次登入出現加入網域的引導，可回到帳戶首頁找此入口；本範例使用 pages.dev，不需要購買網域。
  6. 將管理後台加入書籤，命名為「Cloudflare 網站管理」。
操作流程示意｜非後台截圖
01建立帳號02驗證 Email03登入後台04Workers & Pages

完成檢查　能登出後重新登入，並找到 Workers & Pages。

官方參考：建立帳號

03介面中文化

A. Cloudflare 後台語言

  1. 登入後台，點選使用者圖示，進入 My Profile / Profile（我的個人資料）。
  2. 開啟 Settings（設定）→ Language（語言）。
  3. 從目前提供的選單選擇中文；若提供繁體中文，就選繁體中文。選取後後台會自動更新語言。
  4. 若沒有繁體中文、部分頁面仍是英文，可使用下方瀏覽器翻譯方法。

B. Chrome 瀏覽器翻譯

在頁面空白處按滑鼠右鍵，找「翻譯成中文」或使用網址列的翻譯圖示；於翻譯選單選取中文（繁體）。不同版本的位置與名稱可能稍有差異。若翻譯造成按鈕名稱難辨識，切回原文並對照下表。

英文教材中的中文說明
Workers & PagesWorkers 與 Pages
Create application建立應用程式
Get started開始使用
Drag and drop your files拖放檔案
Deploy site / Save and Deploy部署網站／儲存並部署
Create a new deployment建立新部署
Production / Preview正式環境／預覽環境
Deployments / Settings部署紀錄／設定
Rollback to this deployment還原至此部署
Delete project刪除專案

完成檢查　能找到語言設定，並辨認 Create a new deployment。

官方參考：個人資料設定

04上傳前整理檔案

先解壓縮本教學包，再開啟 examples/my-first-website/index.html。

範例首頁標題為「我的第一個網站」，包含第二個頁面、樣式、互動程式及圖片，所有資源都放在本機資料夾，不需要安裝套件。

相對於範例資料夾的路徑用途上傳
index.html首頁；檔名大小寫須一致保留
about.html關於這個網站保留
style.css兩個頁面共用的外觀保留
script.js首頁按鈕互動保留
images/banner.png首頁配圖保留
電腦上的備份 ZIP、草稿、原始設計檔不屬於公開網站必需資源另存，不要混入

正確的 ZIP 結構

打開要上傳的 ZIP，第一層就應看到 index.html、style.css 等內容；不要再多包一層同名資料夾。本教材已附 可直接上傳的範例 ZIP。

自行打包時：進入 my-first-website 資料夾，全選裡面的檔案與 images 資料夾，再使用 Windows 的壓縮 ZIP 功能。不要只壓縮首頁。

路徑與檔名

範例使用 images/banner.png 這類相對路徑。不要寫成 C:\Users\你的名字\圖片.png。建議資源檔名採英文小寫、數字與連字號，並保持引用與實際檔名完全一致。

完成檢查　本機首頁、第二頁、圖片與按鈕皆可正常使用；ZIP 第一層有 index.html。

05新增與發布網站

  1. 登入後台，進入 Workers & Pages，選 Create application（建立應用程式）。
  2. 進入 Pages 的建立流程；依目前介面選 Get started → Drag and drop your files。若同時看到 Workers 與 Pages，確認自己使用的是 Pages 路徑。
  3. 輸入專案名稱，例如 my-first-website-class01。名稱被使用時改成自己的英數字組合；頁面內的中文標題仍是「我的第一個網站」。
  4. 拖入本包內的 downloads/my-first-website.zip，或直接拖入 examples/my-first-website 資料夾。
  5. 確認檔案上傳成功，按 Deploy site 或 Save and Deploy，等待成功提示。
  6. 開啟後台提供的 https://你的專案名稱.pages.dev/，測試首頁、圖片、第二頁與按鈕。記下實際網址，不要直接套用本教材的示意網址。
操作流程示意｜非後台截圖
01Pages 建立流程02命名與上傳03部署成功04開啟正式網址

要再做第二個網站？

回到 Workers & Pages，再建立另一個 Pages 專案並使用不同名稱。每個專案分別上傳、更新與管理。

上傳整套教材

若您想把這套教材也放上網路，請另建一個專案。將本教學包內的 index.html、assets、examples、downloads 等內容一起上傳；首頁應位於上傳內容根目錄。

完成檢查　另一台手機能透過正式網址看到「我的第一個網站」。

官方參考：直接上傳

06網址與分享

網址類型用途
dash.cloudflare.com網站管理；不要拿它當教材網址分享。
你的專案名稱.pages.dev穩定的正式網址；在同一專案更新正式版本後，通常仍用此網址。
含部署識別碼的網址對應特定部署，用於檢查版本；不要與正式網址混淆。
  1. 在專案裡找到正式的 pages.dev 網址，複製後在新分頁開啟。
  2. 以瀏覽器書籤保存網址，書籤名稱可寫「我的第一個網站」。
  3. 將正式網址貼到課程平台、訊息或教材。
  4. 需要 QR Code 時，可在 Chrome 頁面選單找「建立 QR code／QR 圖碼」（可能位於投放、儲存及分享選單），下載後加入教材；若版本沒有此功能，使用學校核可的 QR Code 工具輸入正式網址。
  5. 用手機相機掃描 QR Code，確認連到正確網站；旋轉螢幕並測試按鈕與連結。

完成檢查　分享的是正式網站，QR Code 掃描後可正常閱讀。

官方參考：預覽部署

07維護網站

7-1 修改內容與重新發布

  1. 先備份整個網站資料夾，例如 我的第一個網站_20260923_修改前.zip，備份放在上傳資料夾之外。
  2. 用 VS Code 或文字編輯器開啟 index.html，把「歡迎來到我的第一個網站！」改為自己的介紹。保持 UTF-8 編碼，存檔。
  3. 在電腦重新開啟首頁，確認文字、圖片及第二頁正常。
  4. 回到原 Pages 專案，按 Create a new deployment；要更新大家看到的內容時選 Production。
  5. 上傳完整的新版本資料夾或 ZIP，完成部署後檢查正式網址。若只是試版可選 Preview，它不會直接替換正式網站。

7-2 移除某個頁面或圖片

例如不需要 about.html：先在本機刪除它，再移除首頁連往該頁的連結，確認沒有其他引用，最後上傳完整新版本。若圖片仍被 HTML 或 CSS 引用，就應先修改引用再刪圖。

新正式版本移除檔案，不代表歷史部署中的副本也消失。若目的是讓舊資料不能再被存取，還要檢查並處理歷史部署。

7-3 還原上一個正常版本

  1. 進入專案的 Deployments，從 All deployments 找到先前成功的正式部署。
  2. 開啟該筆的三點選單，選 Rollback to this deployment，核對目標後確認。
  3. 重新開啟正式網址檢查。預覽部署不能作為正式版本的還原目標。
  4. 同步整理本機檔案：線上還原不會自動還原電腦上的檔案，後續請以正確備份繼續修改。

官方參考：還原部署

7-4 刪除歷史部署

在部署清單確認要移除的紀錄，檢查該筆操作選單是否提供刪除。若介面未提供，官方支援以 Wrangler 刪除指定部署：

npx wrangler pages deployment delete <DEPLOYMENT_ID> --project-name <PROJECT_NAME>

此為進階管理，需要 Node.js、Wrangler 與帳號登入，請由管理者處理，不要直接貼上示意值執行。分支最新部署有刪除限制；遇到限制時依官方文件處理，勿改成刪除整個專案。

官方參考：歷史部署與存取

7-5 刪除整個網站

  1. 先備份本機完整資料，並確認目前選到的專案名稱。
  2. 進入 Workers & Pages → 該 Pages 專案 → Settings → Delete project。
  3. 閱讀確認訊息，依畫面要求輸入名稱或確認刪除。整個專案及網站會被移除，原網址將不能再提供原網站。
  4. 課堂建議只刪除另外建立的練習專案；正式教學網站保留。

完成檢查　完成一次更新並驗證正式網址；能區分刪檔、刪部署、刪專案。

官方參考：刪除專案

官方參考：已知問題

08常見問題與課堂實作

現象先檢查什麼處理方向
首頁 404 或空白ZIP 第一層是否有 index.html確認沒有多包一層資料夾；查看瀏覽器主控台錯誤。
圖片或樣式不見檔名大小寫、相對路徑、是否漏傳保留完整資料夾結構後重新部署。
更新後還是舊畫面是否發布到 Production、是否開了舊部署網址回正式網址，Windows Chrome 可按 Ctrl+F5，或用無痕視窗確認。
找不到網站專案是否登入正確帳號與帳戶回 Workers & Pages，不是在網域清單找。
上傳失敗檔案數、單檔大小與畫面提示後台拖放上限 1,000 個檔案，單檔 25 MiB；大型影音另行安排。
本機可看，上線不能用是否引用電腦磁碟路徑改用網站內相對路徑，確認資源都有上傳。
JSON 本機讀取失敗是否以 file:// 開啟並使用 fetch需使用本機 HTTP 伺服器或上線測試；本教材範例不使用 fetch。
成績沒有集中保存是否只有前端程式與 localStorage另行設計後端儲存或匯出／匯入流程。

官方參考：直接上傳限制

課堂任務：從上線到更新

建議時間約 60–90 分鐘，可依註冊與網路狀況調整。

核取方塊供當次課堂檢查，不作為成績紀錄；重新開啟後不保證保留。

交件內容

繳交正式網址、更新前後畫面，以及修改後的完整網站 ZIP。教師確認首頁、圖片、連結、互動與手機閱讀狀況。

進階附錄：GitHub 自動部署

經常改版時，可把網站原始碼放到 GitHub，另建 Git 整合的 Pages 專案，授權指定儲存庫並設定正式分支。後續推送更新即可觸發部署。一般純 HTML 專案不需前端框架建置，但輸出目錄仍須指向實際網站檔案。

Direct Upload 專案不能直接切換成 Git 整合；需要另建專案。Git 整合專案也不能直接使用後台拖放上傳，請先選定課程採用的方式。

官方參考：Git 整合

官方參考：純 HTML 部署

完成檢查　能獨立完成「修改 → 測試 → 上傳 → 確認」。