摘要
這篇文章一步步教剛接觸 VS Code 與 Node.js 的初學者快速在 macOS 上建立本機網頁開發環境。先安裝 Node.js 20+ 與 VS Code，接著建立一個專案資料夾並使用 npm 初始化，再透過安裝 http-server 或 Live Server 外掛啟動本地伺服器，模擬伺服器環境，然後新增一個 index.html 測試網頁，確認能在瀏覽器成功顯示內容。
主要流程
Node.js 與 VS Code 安裝 → 建立專案 → npm 初始化 → http-server 啟動 → Live Server → 測試 index.html → 專案結構
補充
http-server 與 Live Server 可以快速展示 HTML 網頁，但若要進一步使用前端框架（例如 React、Vue、Svelte），或需要更進階的模組打包工具（像 Vite、Webpack），就需要額外學習不同的建置流程。
在任意位置建立資料夾，例如：procrastinator-mvp，這將作為專案的根目錄。
在 VS Code 上方工具列，點選 Terminal → New Terminal。
終端機會出現在下方。
在終端機輸入以下指令：
# 建立一個基本的 package.json
npm init -y
# 建立 node_modules
npm i -D http-server
.gitignore 忽略它，而只分享 package.json 與 package-lock.json。npm ci 或 npm install，就能重新安裝相同的套件。補充：
npm ci (clean install)
npm install
如果左邊檔案樹出現以下內容，代表安裝成功：
修改 package.json，在 script 加入啟動腳本：
"start": "http-server -p 5173" ,
若 5173 埠口被佔用，可使用其他埠口例如 5174 。
在專案內新增 index.html，測試內容如下：
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>拖延怪日記 MVP</title>
</head>
<body>
<h1>哈囉！這是拖延怪日記 MVP</h1>
<p>如果你看到這行文字，代表伺服器跑成功</p>
</body>
</html>
記得按 Ctrl + S 儲存所有檔案，不然網頁會呈現空白。
npm run start
npm ci && npm run start
procrastinator-mvp/
├─ package.json
├─ package-lock.json
├─ node_modules/
└─ index.html
iThome鐵人賽
看影片追技術