AdityaPratamaS18/網站建置技能

網站建置技能：程序

此技能根據一份簡報為一個客戶建立一個網站。每個客戶都有一份經過核准的計畫、一個程式碼庫和一個檢查腳本。核准的計畫控制著路由、標題、描述、標題和網站地圖。

在本文件中，<技能目錄> 是包含此檔案的資料夾，而 <客戶資料夾> 是此客戶的資料夾。如果使用者沒有資料夾命名慣例，請使用 clients/<客戶>/。

初步要求

1. 閱讀該客戶的筆記（如果有的話）。用 2 到 3 行向使用者說明適用的規則。
2. 找到簡報、公司簡介、標誌和照片。
3. 確保 Node.js、Python 3 和 rsync 可用。

警告：如果簡報未提供某項事實，請不要在網站上放置該事實。捏造的證書、客戶名稱、數字或推薦評論對客戶來說是法律和信任風險。

第一階段：事實

1. 閱讀 references/brief-intake.md。
2. 完整閱讀每個來源檔案。
3. 撰寫 <客戶資料夾>/site-brief/facts.md。
4. 如果客戶有現有網站，請爬取該網站。記錄每個 URL 以用於重新導向對應。
5. 如果缺少事實，則撰寫 <客戶資料夾>/site-brief/questions-for-client.md。

閘門 1. 向使用者顯示事實摘要和缺失項目清單。等待使用者回覆。只有在使用者同意的情況下，才能繼續處理缺失項目。需要缺失事實的頁面將被排除在計畫之外，或者該頁面將不包含該事實。

第二階段：站點規劃

1. 閱讀 references/site-plan.md。
2. 為客戶的市場進行關鍵字研究。
3. 將 <技能目錄>/assets/site-plan.template.json 複製到 <客戶資料夾>/site-brief/site-plan.json。
4. 為每個頁面填寫一個條目。
5. 將規劃與提案（如果有的話）進行比較。範圍內的每個項目都必須有一個頁面或功能。範圍內的表單需要 server 託管或約定的替代方案。
6. 執行規劃閘門。修正每個 FAIL。

python3 <技能目錄>/scripts/site_gate.py plan <客戶資料夾>/site-brief/site-plan.json

閘門 2. 向使用者顯示一個包含以下欄位的表格：URL、主要關鍵字、月搜尋量、標題。同時說明託管選擇。等待使用者核准。然後將核准資訊寫入規劃中，作為 "approved_by" 和 "approved_on"。如果缺少這些欄位，建置閘門將會失敗。

第三階段：脚手架

1. 選擇資料夾 <客戶資料夾>/website/。
2. 執行脚手架腳本。該腳本可以處理路徑中的空格和大寫字母。

bash <技能目錄>/scripts/scaffold.sh "<客戶資料夾>/website" static

3. 僅當規劃需要伺服器功能時，才使用 server 代替 static（請參閱 references/launch.md）。
4. 將已核准的 site-plan.json 複製到 src/lib/site-plan.json。
5. 將 src/lib/site.ts 中的每個 __FILL 值替換為事實表中的值。
6. 閱讀 node_modules/next/dist/docs/01-app/ 中有關後設資料、圖片、字型和靜態匯出的指南。

注意：Next.js 在主版本之間會發生變化。node_modules 中的指南與已安裝的版本相符。您的訓練資料則不然。

第四階段：設計方向

1. 閱讀 references/design-and-copy.md。
2. 從標誌中提取顏色和字型標記。將它們放入 globals.css 中。
3. 從標誌建立 public/logo.webp、public/og.webp（1200 x 630 像素）和 src/app/icon.png。
4. 僅建置頁首、頁尾和首頁。
5. 啟動預覽。對於靜態網站，在建置後使用 npx serve out -l 3210。對於伺服器端網站，使用 npm run dev。
6. 在瀏覽器中開啟 http://127.0.0.1:3210。檢查 375、768 和 1280 像素寬度下的頁面。

注意：嵌入式瀏覽器可能會對 localhost 返回 HTTP 431 錯誤。使用 127.0.0.1 位址則不會有此問題。

閘門 3. 向使用者顯示首頁。等待使用者核准設計。所有其他頁面都將使用此設計。

注意：在閘門 3 之前不要建立其他頁面。後期的設計變更會導致所有頁面都需要遷移。

第五階段：頁面

1. 閱讀 references/seo-build-spec.md。
2. 將內容放入 src/lib/ 中的型別資料檔案中（例如 services.ts）。保持頁面檔案精簡。
3. 對於重複的頁面類型，使用一個包含 generateStaticParams 的動態路由。
4. 使用 pageMetadata() 和 getPage() 從規劃中取得每個標題、描述和 H1。
5. 以買家為目標對象，使用客戶的語調撰寫文案。僅使用 facts.md 中的事實。
6. 按照規格中的說明添加內部連結。
7. 建置網站。

npm run build

8. 執行建置閘門。從根源修正每個 FAIL。不要為了通過而修改閘門。

python3 <技能目錄>/scripts/site_gate.py build <客戶資料夾>/website

9. 執行 npx tsc --noEmit 和 npm run lint。

第六階段：審查

1. 在瀏覽器中檢查每種頁面類型在 375、768 和 1280 像素寬度下的顯示情況。
2. 檢查每個行動呼籲（CTA）：電話、WhatsApp、電子郵件和表單。
3. 如果使用者要求，將頁面文案整理成一份文件給客戶。遵循 references/design-and-copy.md。
4. 僅在使用者指示時才部署預覽。預覽建置不可被索引。

閘門 4. 向使用者提供預覽 URL 和閘門結果。等待使用者核准上線。

第七階段：上線

1. 閱讀 references/launch.md。
2. 使用 SITE_INDEXABLE=1 進行建置。
3. 使用 --release 參數執行建置閘門。閘門必須通過。
4. 執行 references/launch.md 中的上線步驟。

警告：未經當前會話核准，請勿連接網域或推送至正式環境。即時網域會影響客戶的業務。

結案

1. 向使用者提供仍需客戶進行的操作清單。
2. 將路徑、決策和經驗教訓記錄在該客戶的筆記中。
3. 告訴使用者該網站已準備好進行 SEO 內容作業。

固定規則

規則	原因
每個服務一個 URL	單頁網站無法為服務提供可用於排名的 URL
每個 URL 一個主要關鍵字	兩個頁面針對同一個關鍵字會互相競爭
規劃是標題和路由的唯一來源	閘門會將建置的 HTML 與規劃進行比較
不使用動畫統計計數器	HTML 在腳本執行前會顯示 0
閘門是腳本	腳本能捕捉到的每個錯誤，都是先經過人為檢查的

參考資料

檔案	在哪個階段閱讀
references/brief-intake.md	第一階段
references/site-plan.md	第二階段
references/design-and-copy.md	第四階段和第六階段
references/seo-build-spec.md	第五階段
references/launch.md	第二階段（託管）和第七階段