商用網站架設實務

LESSON-28 · 零基礎學生教材

交付 dist/project/e-commerce production artifact 與本機 smoke

交付可直接本機開啟與以靜態 server 驗收的運動器材電商產物，所有 requirement-to-evidence 項目通過；明示 SEO placeholder 同批替換 gate，保留 GAS source／設定說明但不部署 GAS 或網站。

StarterCheckpointSolution

先理解：這堂課解決什麼問題？

六章功能已完成；本堂只整理唯一可部署 production artifact，驗證六頁、商品圖片、購物車、兩種表單、GAS 設定說明、SEO、390px 與鍵盤路徑；六頁 canonical/OG 與 robots/sitemap 先保留一致 placeholder，部署前須同批替換，不建立或更新任何遠端部署。

本堂要完成：交付可直接本機開啟與以靜態 server 驗收的運動器材電商產物，所有 requirement-to-evidence 項目通過；明示 SEO placeholder 同批替換 gate，保留 GAS source／設定說明但不部署 GAS 或網站。

學習邊界：先完成「交付 dist/project/e-commerce production artifact 與本機 smoke」，不提前引入尚未教過的框架或建置工具。

先備知識與操作環境

延續上一章的鐵刻運動電商成果。本章只增加 交付 dist/project/e-commerce production artifact 與本機 smoke 的責任；先開啟 examples/minimal.html，再依 Starter → Checkpoint → Solution 留下檔案、操作、預期與實際證據。

  1. 檔案位置：先找到 dist/project/e-commerce/index.html、products.html、cart.html、checkout.html、order-success.html、contact.html、assets/、apps-script/、robots.txt、sitemap.xml、smoke-test.md，再從本頁的最小實驗開始。
  2. 瀏覽器：開啟最小實驗與階段頁；每次修改後儲存並重新整理。
  3. DevTools：依本堂內容使用 Elements、Styles、Computed、Console 或 Network，記下第一個可觀察證據。
  4. 操作習慣：每次只修改一個檔案或一個責任，先預測、再操作、最後驗收。

先做最小實驗：先看見結果

這不是期末網站，而是一個可以直接看到本堂核心結果的最小實驗。先完成一次操作，再回到檔案和名詞卡對照。

開啟本堂最小實驗

  1. 入口：開啟 examples/minimal.html。
  2. 操作：開啟本章最小實驗，按下執行按鈕，再比對畫面、Elements、Console 與 390px；不得把 local mock 當成真實 Sheet 成功。
  3. 預期：只呈現 L28 在鐵刻運動連續專案新增的責任，且能指出上一章輸入與下一章交付。
  4. 重設：重新整理 examples/minimal.html；本章最小實驗不送正式資料、不部署。

學生練習流程

依序完成每一張卡；目前只聚焦一個步驟，先操作，再用可觀察證據確認結果。

  1. 1

    最小實驗

    先閱讀本頁的問題、檔案地圖、名詞卡與最小例子。
  2. 2

    Step 2

    自己回答互動問答 4 題，再展開解析。
  3. 3

    最小實驗 2

    開啟最小實驗，實際操作一次並記下證據。
  4. 4

    Starter

    把 Starter 複製到自己的工作資料夾，照 3 張微步驟卡逐一完成；每一步都要看到結果再繼續。
  5. 5

    Checkpoint

    前往 Checkpoint，只處理 1 個本堂核心缺口；先預測，再用指定證據驗收。
  6. 6

    Solution

    前往 Solution，先看逐檔差異與修改原因，再決定要不要把完整內容帶回自己的檔案。
  7. 7

    變體驗收

    完成情境變體與獨立挑戰，留下檔案位置、操作、結果與驗收證據，並閱讀下一堂銜接：交付第 23–28 章連續專案、production artifact 與本機驗收紀錄；正式部署須另一次人工授權，並作為明確工作。

檔案地圖：每個位置負責什麼？

先不要急著背檔名；請把檔案位置和責任連起來。你在階段頁會看到同一份檔案的可執行版本。

先學會這些詞

先從名詞、英文與白話意思開始；每次只展開一張名詞卡，再對照正式定義、範例與驗收證據。專業術語、語法、檔案路徑會使用不同樣式。第一次遇到術語時，先回到這裡，不要靠猜。

本堂 12 個詞先選一組，再展開需要的名詞卡；每次只保留目前的學習焦點。

Production artifact

4 個詞
canonical 重建canonical 重建 白話意思：用來理解「canonical 重建」的實務概念。 展開查看正式定義、範例與驗收證據
正式定義
本章將 canonical 重建 定義為可在檔案、畫面或 DevTools 中驗證的技術責任。
什麼時候用
實作 canonical 重建 或排查相關問題時。
最小範例
canonical 重建
可觀察證據
能在專章範例指出 canonical 重建 的操作結果。
容易混淆
只記名稱卻沒有實際操作或驗收證據。
Production artifact rootProduction artifact root 白話意思：用來理解「Production artifact root」的實務概念。 展開查看正式定義、範例與驗收證據
正式定義
本章將 Production artifact root 定義為可在檔案、畫面或 DevTools 中驗證的技術責任。
什麼時候用
實作 Production artifact root 或排查相關問題時。
最小範例
Production artifact root
可觀察證據
能在專章範例指出 Production artifact root 的操作結果。
容易混淆
只記名稱卻沒有實際操作或驗收證據。
六頁與本地 assets六頁與本地 assets 白話意思：用來理解「六頁與本地 assets」的實務概念。 展開查看正式定義、範例與驗收證據
正式定義
本章將 六頁與本地 assets 定義為可在檔案、畫面或 DevTools 中驗證的技術責任。
什麼時候用
實作 六頁與本地 assets 或排查相關問題時。
最小範例
六頁與本地 assets
可觀察證據
能在專章範例指出 六頁與本地 assets 的操作結果。
容易混淆
只記名稱卻沒有實際操作或驗收證據。
GAS source／SETUPGAS source／SETUP 白話意思：用來理解「GAS source／SETUP」的實務概念。 展開查看正式定義、範例與驗收證據
正式定義
本章將 GAS source／SETUP 定義為可在檔案、畫面或 DevTools 中驗證的技術責任。
什麼時候用
實作 GAS source／SETUP 或排查相關問題時。
最小範例
GAS source／SETUP
可觀察證據
能在專章範例指出 GAS source／SETUP 的操作結果。
容易混淆
只記名稱卻沒有實際操作或驗收證據。

SEO 與可用性

4 個詞
SEO placeholder 同批替換SEO placeholder 同批替換 白話意思：用來理解「SEO placeholder 同批替換」的實務概念。 展開查看正式定義、範例與驗收證據
正式定義
本章將 SEO placeholder 同批替換 定義為可在檔案、畫面或 DevTools 中驗證的技術責任。
什麼時候用
實作 SEO placeholder 同批替換 或排查相關問題時。
最小範例
SEO placeholder 同批替換
可觀察證據
能在專章範例指出 SEO placeholder 同批替換 的操作結果。
容易混淆
只記名稱卻沒有實際操作或驗收證據。
responsiveresponsive 白話意思：用來理解「responsive」的實務概念。 展開查看正式定義、範例與驗收證據
正式定義
本章將 responsive 定義為可在檔案、畫面或 DevTools 中驗證的技術責任。
什麼時候用
實作 responsive 或排查相關問題時。
最小範例
responsive
可觀察證據
能在專章範例指出 responsive 的操作結果。
容易混淆
只記名稱卻沒有實際操作或驗收證據。
keyboardkeyboard 白話意思：用來理解「keyboard」的實務概念。 展開查看正式定義、範例與驗收證據
正式定義
本章將 keyboard 定義為可在檔案、畫面或 DevTools 中驗證的技術責任。
什麼時候用
實作 keyboard 或排查相關問題時。
最小範例
keyboard
可觀察證據
能在專章範例指出 keyboard 的操作結果。
容易混淆
只記名稱卻沒有實際操作或驗收證據。
relative pathrelative path 白話意思：用來理解「relative path」的實務概念。 展開查看正式定義、範例與驗收證據
正式定義
本章將 relative path 定義為可在檔案、畫面或 DevTools 中驗證的技術責任。
什麼時候用
實作 relative path 或排查相關問題時。
最小範例
relative path
可觀察證據
能在專章範例指出 relative path 的操作結果。
容易混淆
只記名稱卻沒有實際操作或驗收證據。

本機交付驗收

4 個詞
localhost 六頁 smokelocalhost 六頁 smoke 白話意思：用來理解「localhost 六頁 smoke」的實務概念。 展開查看正式定義、範例與驗收證據
正式定義
本章將 localhost 六頁 smoke 定義為可在檔案、畫面或 DevTools 中驗證的技術責任。
什麼時候用
實作 localhost 六頁 smoke 或排查相關問題時。
最小範例
localhost 六頁 smoke
可觀察證據
能在專章範例指出 localhost 六頁 smoke 的操作結果。
容易混淆
只記名稱卻沒有實際操作或驗收證據。
Console／NetworkConsole／Network 白話意思：用來理解「Console／Network」的實務概念。 展開查看正式定義、範例與驗收證據
正式定義
本章將 Console／Network 定義為可在檔案、畫面或 DevTools 中驗證的技術責任。
什麼時候用
實作 Console／Network 或排查相關問題時。
最小範例
Console／Network
可觀察證據
能在專章範例指出 Console／Network 的操作結果。
容易混淆
只記名稱卻沒有實際操作或驗收證據。
核心購物與聯絡路徑核心購物與聯絡路徑 白話意思：用來理解「核心購物與聯絡路徑」的實務概念。 展開查看正式定義、範例與驗收證據
正式定義
本章將 核心購物與聯絡路徑 定義為可在檔案、畫面或 DevTools 中驗證的技術責任。
什麼時候用
實作 核心購物與聯絡路徑 或排查相關問題時。
最小範例
核心購物與聯絡路徑
可觀察證據
能在專章範例指出 核心購物與聯絡路徑 的操作結果。
容易混淆
只記名稱卻沒有實際操作或驗收證據。
deployment=not-rundeployment=not-run 白話意思：用來理解「deployment=not-run」的實務概念。 展開查看正式定義、範例與驗收證據
正式定義
本章將 deployment=not-run 定義為可在檔案、畫面或 DevTools 中驗證的技術責任。
什麼時候用
實作 deployment=not-run 或排查相關問題時。
最小範例
deployment=not-run
可觀察證據
能在專章範例指出 deployment=not-run 的操作結果。
容易混淆
只記名稱卻沒有實際操作或驗收證據。

最小例子：先看懂，再複製

這段只保留本堂第一個微成果。先預測結果，再逐行讀；完整檔案請開啟下方最小實驗。

​
dist/project/e-commerce/{index.html,products.html,cart.html,checkout.html,order-success.html,contact.html,assets/,apps-script/,robots.txt,sitemap.xml,smoke-test.md}

Live Lab：逐段讀碼與驗證

每一步只回答五件事：為什麼做、改哪裡、會看到什麼、用什麼證據確認、卡住先查什麼。

  1. Step 1

    從 canonical 專案產生唯一 dist/project/e-commerce，包含六頁、assets、apps-script、robots.txt、sitemap.xml 與 smoke-test.md

    目的
    交付根必須自足且可重建，避免只手改 dist 或把上層資料夾誤當網站根。
    修改位置
    dist/project/e-commerce/
    從 canonical 專案產生唯一 dist/project/e-commerce，包含六頁、assets、apps-script、robots.txt、sitemap.xml 與 smoke-test.md
    預期結果
    根目錄直接存在 index.html；六頁與所有本地資源都在 e-commerce 內，沒有 TODO/CHECKPOINT。
    驗收證據
    產物樹、canonical→dist 重建命令、檔案 hash 與 placeholder 搜尋。
    卡住先查
    先從 e-commerce 目錄列出 index.html 與六頁，再執行一次乾淨重建比對。
  2. Step 2

    以同一 placeholder origin 補齊六頁 title/description/canonical/og:url、robots 與 sitemap，並建立部署前同批替換 gate

    目的
    SEO URL 必須成組一致；只改六頁、robots 或 sitemap 的其中一處會產生錯誤公開網址。
    修改位置
    六個 HTML、robots.txt、sitemap.xml
    以同一 placeholder origin 補齊六頁 title/description/canonical/og:url、robots 與 sitemap，並建立部署前同批替換 gate
    預期結果
    六頁 canonical/og:url、robots Sitemap 與 sitemap loc 對應自身路徑且使用同一 placeholder origin；部署前必須同批替換，否則停止部署。
    驗收證據
    View Source、六頁 URL 對照、robots/sitemap URL 集合、replacement gate 與 link checker。
    卡住先查
    先列出 placeholder origin，確認六頁 canonical/OG、robots Sitemap、sitemap loc 都在同一份替換清單。
  3. Step 3

    在 localhost 驗收六頁、商品→購物車→checkout mock→完成頁、聯絡 mock、390px、Tab、Console/Network，並記錄未部署

    目的
    production artifact 只有經核心路徑與環境邊界驗收才可交付。
    修改位置
    smoke-test.md
    在 localhost 驗收六頁、商品→購物車→checkout mock→完成頁、聯絡 mock、390px、Tab、Console/Network，並記錄未部署
    預期結果
    六頁 200、資源零 404、核心操作完成、390px 無水平溢位、鍵盤 focus 清楚、Console 無未處理錯誤；deployment=not-run。
    驗收證據
    smoke-test.md 每列的 URL／操作／預期／實際／結果與未部署聲明。
    卡住先查
    先記錄目前 origin 與 deployment=not-run，再按使用者路徑逐步操作。
  4. Step 4

    把 order-success.html 加回六頁 route 與購物流程 smoke

    目的
    Checkpoint 只修正漏測完成頁的單一驗收缺口。
    修改位置
    smoke-test.md
    把 order-success.html 加回六頁 route 與購物流程 smoke
    預期結果
    routes 由 5/6 變 6/6，checkout mock 能導向訂單編號／狀態頁。
    驗收證據
    order-success.html HTTP 200、導向 URL、訂單編號與狀態文字。
    卡住先查
    從 checkout mock 完成操作開始，確認網址與 order-success.html response。
  5. Step 5

    專章驗收：唯一 Production Artifact 根

    目的
    將概念轉成可重現的實作證據。
    修改位置
    examples/minimal.html 與對應 stage files
    操作 唯一 Production Artifact 根 並記錄結果。
    預期結果
    能展示 唯一 Production Artifact 根 的畫面、DOM、Console 或 Network 證據。
    驗收證據
    檔案位置、操作、預期、實際與重新驗證。
    卡住先查
    只重做一個最小操作並查看第一個錯誤。
  6. Step 6

    專章驗收：六頁與本地資源清單

    目的
    將概念轉成可重現的實作證據。
    修改位置
    examples/minimal.html 與對應 stage files
    操作 六頁與本地資源清單 並記錄結果。
    預期結果
    能展示 六頁與本地資源清單 的畫面、DOM、Console 或 Network 證據。
    驗收證據
    檔案位置、操作、預期、實際與重新驗證。
    卡住先查
    只重做一個最小操作並查看第一個錯誤。
操作層級Live Lab 段落導覽：切換六個實驗步驟

讀碼順序：先找入口，再找被引用的檔案，最後用畫面、DOM、Console、Network 或資料結果驗證。

互動問答

先回答目前這一題，再展開解析；完成後按下一題，讓每一次回答都回到檔案或瀏覽器完成驗證。

Q1概念理解 「canonical 重建」在本堂要解決什麼問題？ 本題線索：canonical 重建；回到名詞卡與 能在專章範例指出 canonical 重建 的操作結果。 展開解析收合解析

白話解析：

用來理解「canonical 重建」的實務概念。 正式來說，本章將 canonical 重建 定義為可在檔案、畫面或 DevTools 中驗證的技術責任。

對照位置：

回到名詞卡「canonical 重建」，再看 能在專章範例指出 canonical 重建 的操作結果。

預期觀察：

你應該能用自己的話說出：實作 canonical 重建 或排查相關問題時。

常見錯誤：

不要只回答「它是canonical 重建」；那是重複名詞，不是說明責任。

立即驗證：

開啟 examples/minimal.html，依序做「開啟本章最小實驗，按下執行按鈕，再比對畫面、Elements、Console 與 390px；不得把 local mock 當成真實 Sheet 成功。」並記下畫面或工具證據。

Q2程式碼閱讀 修改指定規則後，你預測畫面會看到什麼？ 本題線索：dist/project/e-commerce/；要修改：從 canonical 專案產生唯一 dist/project/e-commerce，包含六頁、assets、apps-script、robots.txt、sitemap.xml 與 smoke-test.md；觀察：產物樹、canonical→dist 重建命令、檔案 hash 與 placeholder 搜尋。 展開解析收合解析

白話解析：

先看檔案責任，再預測結果。這一步的目的：交付根必須自足且可重建，避免只手改 dist 或把上層資料夾誤當網站根。

對照位置：

對照 Live Lab Step 1，位置是 dist/project/e-commerce/；範例內容：dist/project/e-commerce/{index.html,products.html,cart.html,checkout.html,order-success.html,contact.html,assets/,apps-script/,robots.txt,sitemap.xml,smoke-test.md}

預期觀察：

根目錄直接存在 index.html；六頁與所有本地資源都在 e-commerce 內，沒有 TODO/CHECKPOINT。

常見錯誤：

如果只改了檔案但沒有結果，先不要重寫全部；先從 e-commerce 目錄列出 index.html 與六頁，再執行一次乾淨重建比對。

立即驗證：

實際操作後檢查 產物樹、canonical→dist 重建命令、檔案 hash 與 placeholder 搜尋。。

Q3概念比較 「canonical 重建」和「Production artifact root」在本堂的責任有什麼不同？ 本題線索：比較 canonical 重建 與 Production artifact root；操作位置：六個 HTML、robots.txt、sitemap.xml 展開解析收合解析

白話解析：

canonical 重建：用來理解「canonical 重建」的實務概念。；Production artifact root：用來理解「Production artifact root」的實務概念。

對照位置：

對照兩張名詞卡的正式定義：本章將 canonical 重建 定義為可在檔案、畫面或 DevTools 中驗證的技術責任。／本章將 Production artifact root 定義為可在檔案、畫面或 DevTools 中驗證的技術責任。

預期觀察：

你應該能指出兩者分別出現在哪個檔案或工具，以及哪一個結果會改變。

常見錯誤：

不要把「改變畫面」當成所有技術的責任；先說清楚誰負責結構、呈現、行為或驗收。

立即驗證：

在 六個 HTML、robots.txt、sitemap.xml 做「以同一 placeholder origin 補齊六頁 title/description/canonical/og:url、robots 與 sitemap，並建立部署前同批替換 gate」，再用 View Source、六頁 URL 對照、robots/sitemap URL 集合、replacement gate 與 link checker。 比較前後差異。

Q4除錯驗收 如果完成操作後結果不對，你會先從哪一個證據開始查？ 本題線索：examples/minimal.html 與對應 stage files；第一個檢查位置：檔案位置、操作、預期、實際與重新驗證。 展開解析收合解析

白話解析：

先描述症狀，再提出一個最小假設。本堂常見錯誤是：只口頭說明完成。

對照位置：

對照最後一段 Live Lab：examples/minimal.html 與對應 stage files；檢查方式：只重做一個最小操作並查看第一個錯誤。

預期觀察：

你要能指出一個具體位置，而不是一次修改很多檔案。

常見錯誤：

不要先清快取、重裝工具或複製 Solution；先查看第一個可觀察錯誤。

立即驗證：

重新操作並留下「症狀、證據、假設、單一修正、結果」五項紀錄。

常見誤解

本堂任務與驗收

交付可直接本機開啟與以靜態 server 驗收的運動器材電商產物，所有 requirement-to-evidence 項目通過；明示 SEO placeholder 同批替換 gate，保留 GAS source／設定說明但不部署 GAS 或網站。

官方延伸閱讀

正式延伸｜自主學習

把「dist/project/e-commerce Production Artifact 與本機 Smoke」拆成 4 個可獨立完成、可重設、可驗證的自主學習 module。

開啟自主學習入口｜4 個獨立 topic

你會怎麼做
  1. 先選一個 topic，讀懂成果、檔案與定位。
  2. 在自己的 Starter 檔案修改一小段。
  3. 重新載入，用畫面、Elements、Computed、Console 或文件留下證據。

建議第一個 topic：唯一 Production Artifact 根。

Learning map

  1. 唯一 Production Artifact 根｜release-check｜files/starter/index.html｜operation=release-manifest 與 result manifest
  2. 六頁與本地資源清單｜release-check｜files/starter/index.html｜count=6、uniqueCount=6、valid=true
  3. SEO 與索引產物｜release-check｜files/starter/index.html｜pageCount=6、placeholderOriginMatch=true、replacementGate=required
  4. 本機 E2E Smoke 與不部署｜release-check｜files/starter/smoke-test.md｜count=8、uniqueCount=8、valid=true