初學者靜態網站開發技能 (bkit-codex)

初學者 (新手) 技能

為初學者和非開發者提供的靜態網頁開發指南。

動作

動作	描述	範例
init	專案初始化	$starter init my-portfolio
guide	顯示開發指南	$starter guide
help	初學者幫助	$starter help

init (專案初始化)

1. 建立專案目錄結構 (HTML/CSS/JS 或 Next.js)
2. 產生 package.json (選擇 Next.js 時)
3. 建立 AGENTS.md (指定 Level: Starter)
4. 建立 docs/ 資料夾結構 (用於 PDCA 文件)
5. 初始化 .pdca-status.json

guide (開發指南)

• 分析當前專案狀態
• 建議適合 Starter 等級的下一步動作
• 專注於 Phase 1-3 的管道指南 (1 -> 2 -> 3 -> 6 -> 9)

help (初學者幫助)

• 解釋 HTML/CSS/JS 基本概念
• 回答常見問題
• 提供範例程式碼

目標受眾

• 初次學習程式設計的人
• 想建立簡單網站的人
• 需要作品集網站的人

技術棧

選項 A：純 HTML/CSS/JS (適合完全新手)

HTML5        -> 網頁結構
CSS3         -> 樣式設計
JavaScript   -> 動態功能 (可選)

選項 B：Next.js (使用框架)

Next.js 14+  -> 基於 React 的框架
Tailwind CSS -> 工具類 CSS
TypeScript   -> 型別安全 (可選)

語言等級指南

建議：僅使用 Tier 1 語言 (Python, TypeScript, JavaScript)

等級	是否允許	原因
Tier 1	是	完整的 AI 支援，最佳化 Vibe Coding
Tier 2	限制使用	考慮改用 Dynamic 等級
Tier 3-4	否	升級至 Dynamic/Enterprise

專案結構

選項 A：HTML/CSS/JS

project/
├── index.html          # 主頁
├── about.html          # 關於頁面
├── css/
│   └── style.css       # 樣式
├── js/
│   └── main.js         # JavaScript
├── images/             # 圖片檔案
├── docs/               # PDCA 文件
│   ├── 01-plan/
│   └── 02-design/
└── README.md

選項 B：Next.js

project/
├── src/
│   ├── app/
│   │   ├── layout.tsx      # 共同佈局
│   │   ├── page.tsx        # 主頁
│   │   └── about/
│   │       └── page.tsx    # 關於頁面
│   └── components/         # 可重複使用的元件
├── public/                 # 靜態檔案
├── docs/                   # PDCA 文件
├── package.json
├── tailwind.config.js
└── README.md

核心概念

HTML (網頁結構)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的網站</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header>頁首</header>
    <main>主要內容</main>
    <footer>頁尾</footer>
</body>
</html>

CSS (樣式設計)

body {
    font-family: 'Inter', sans-serif;
    margin: 0;
    padding: 0;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

@media (max-width: 768px) {
    .container { padding: 10px; }
}

Next.js App Router

// app/page.tsx
export default function Home() {
  return (
    <main className="container mx-auto p-4">
      <h1 className="text-3xl font-bold">歡迎！</h1>
    </main>
  );
}

部署方式

GitHub Pages (免費)

1. 建立 GitHub 儲存庫
2. 推送程式碼
3. Settings -> Pages -> Source: main 分支
4. 透過 https://username.github.io/repo-name 存取

Vercel (推薦給 Next.js)

1. 在 vercel.com 註冊 (GitHub 整合)
2. 「New Project」-> 選擇儲存庫
3. 點擊「Deploy」

限制

• 沒有登入/註冊功能 (需要伺服器)
• 沒有資料儲存功能 (需要資料庫)
• 沒有管理頁面 (需要後端)
• 沒有金流功能 (需要後端)

何時升級

如果您需要以下功能，請升級至 Dynamic 等級 ($dynamic)：

• 登入功能
• 資料儲存
• 管理頁面
• 使用者通訊功能

管道流程 (Starter)

Phase 1 -> 2 -> 3 -> 6(靜態) -> 9

跳過 API (Phase 4)、設計系統 (Phase 5 可選)，僅在 Phase 7 進行 SEO。

常見錯誤

錯誤	解決方案
圖片無法顯示	檢查路徑 (./images/photo.jpg)
CSS 未套用	檢查 link 標籤的路徑
頁面導航無效	檢查 href 路徑 (./about.html)
行動裝置上排版錯亂	檢查 <meta name="viewport"> 標籤