提供 HTML
從你的 server 提供真實的網頁
⏱ 預估 ~10 分鐘
01 · 讀一讀
目前你的 server 回了純文字跟 JSON。但你拜訪真實網站時，你看到的是有樣式的頁面，有標題、圖片、版面 — 不是原始文字。
那是因為真實 web server 提供 HTML 檔。HTML 是瀏覽器理解、用來顯示豐富格式化內容的語言。
與其把 HTML 寫在 JavaScript 程式碼裡面（很快會變得髒亂），我們會把 HTML 檔放在特別的資料夾，叫 Express 自動提供。這叫提供靜態檔案 — 不依請求改變的檔案，就照原樣送出去。
重點整理
- 靜態檔案直接提供，不做任何處理
- public/ 資料夾是公開可被瀏覽器存取的檔案的慣例
- Express 一行程式碼就能提供整個靜態檔資料夾
- 這就是真實網站提供 CSS、圖片、HTML 頁的方式
02 · 真機練習
先在你的專案資料夾裡建一個 public 目錄。你的靜態檔（HTML、CSS、圖片）會住在這。
mkdir public
03 · 真機練習
在 public 資料夾裡建一個 index.html 檔。可以用文字編輯器建 — 存成你專案目錄裡的 public/index.html。 這會是你 server 的首頁。
<!DOCTYPE html>
<html>
<head>
<title>My First Server</title>
<style>
body { font-family: sans-serif; max-width: 600px; margin: 50px auto; }
h1 { color: #333; }
</style>
</head>
<body>
<h1>Welcome to My Server</h1>
<p>This page is being served by Node.js and Express.</p>
<p>I built this myself.</p>
</body>
</html>04 · 選擇題
為什麼我們把 HTML 檔放在 public/ 資料夾，不是寫在 JavaScript 程式碼裡？
- JavaScript 不能包含 HTML 字串
- 讓東西有條理 — HTML 檔就照原樣提供，不需要處理
- public/ 資料夾比較快，因為用不同的 server
- 瀏覽器只能讀名字叫 'public' 的資料夾
05 · 真機練習
現在叫 Express 提供 public 資料夾裡的檔。打開 app.js，在 const app = express(); 那行後面、所有 app.get() routes 前面加這行。 這一行讓 public/ 資料夾裡的每個檔都能透過你的 server 拿到。
app.use(express.static('public'));06 · 真機練習
停掉你的 server(Ctrl+C)再重啟，然後在瀏覽器拜訪 http://localhost:3000。 不是純文字「Hello, World！」，你現在應該看到一個有樣式的 HTML 頁，有標題跟段落。那就是你的 index.html 在被提供！
node app.js
http://localhost:3000
07 · 填空
要從叫 'public' 的資料夾提供靜態檔，加這個 middleware:app.use(express._____('public'))
⚠ 完整互動體驗需要 JavaScript。請啟用 JavaScript 後重新整理。
※ 本站為獨立繁中教學專案，非 Anthropic 官方產品。Claude™ 為 Anthropic, PBC 商標。