3.2 建立前端專案：HTML/CSS/JavaScript 到 Astro / React 首選框架#

demo-static/
├── index.html
├── styles.css
└── app.js

<!-- index.html -->
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Hello Pages</title>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <h1>我的第一個 Cloudflare Pages 網站</h1>
  <p id="clock"></p>
  <button id="btn">點我</button>
  <script src="app.js"></script>
</body>
</html>

/* styles.css */
body { font-family: system-ui, sans-serif; max-width: 42rem; margin: 3rem auto; }

// app.js —— 唯一的互動「島」，就一個小時鐘
document.querySelector('#btn').addEventListener('click', () => alert('哈囉！'));
setInterval(() => {
  document.querySelector('#clock').textContent =
    '現在時間：' + new Date().toLocaleTimeString('zh-TW');
}, 1000);

npm run dev     → 本機開發伺服器（改檔即時重載）
npm run build   → 編譯出 dist/ 靜態檔 ← 這就是要部署的東西
npm run preview → 本機預覽 build 結果

# 路 A：Astro（本書主線）
npm create astro@latest demo-pages -- --template blog --no-install --no-git

# 路 B：React + Vite
npm create vite@latest demo-pages -- --template react-ts

demo-pages/
├── astro.config.mjs        ← 建置設定：輸出模式、整合
├── package.json
├── public/                 ← 原封不動複製到 dist/ 的靜態資產
│   └── favicon.svg
└── src/
    ├── pages/              ← 檔案即路由（file-based routing）
    │   └── index.astro
    ├── layouts/            ← 頁面外框
    ├── components/         ← 可重用元件（島）
    └── content/            ← Markdown 文章（資料即內容）

// astro.config.mjs
import { defineConfig } from 'astro/config';

export default defineConfig({
  // 部署子路徑情境用；Pages 的 *.pages.dev 直接用預設即可
  // 動態資料一率走 API（第 4 章 Pages Functions），前端保持 SSG
});

---
// src/pages/index.astro —— 「---」之間的程式在**建置時**跑完，不留 JS 給瀏覽器
import Layout from '../layouts/Layout.astro';
const posts = [
  { slug: 'hello-cloudflare', title: 'Hello, Cloudflare!' },
  { slug: 'jamstack', title: ' Jamstack 是什麼' },
];
---
<Layout title="首頁">
  <h1>邊緣上的部落格</h1>
  <ul>
    {posts.map((p) => (
      <li><a href={`/posts/${p.slug}/`}>{p.title}</a></li>
    ))}
  </ul>
</Layout>

---
// src/layouts/Layout.astro
const { title = 'Demo' } = Astro.props;
---
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>{title}</title>
</head>
<body>
  <header><a href="/">🏠 回首頁</a></header>
  <main><slot /></main>
</body>
</html>

npm install            # 安裝依賴（node_modules/ —— 永遠不進 Git）
npm run dev            # http://localhost:4321
npm run build          # 產出 dist/ ，裡面是 .html + 少量 .js
npm run preview        # 本機預覽 dist/

npm create vite@latest demo-react -- --template react-ts
cd demo-react && npm install && npm run dev   # http://localhost:5173

demo-react/
├── vite.config.ts
├── index.html               ← 唯一入口（SPA shell）
└── src/
    ├── main.tsx             ← 掛載 React 樹的起點
    ├── App.tsx              ← 根元件：UI = f(state)（4.1 節主題）
    └── components/          ← 元件目錄

node_modules/
dist/
.env
.env.*

git init && git add . && git commit -m "chore: init demo-pages"