網站如何上線：從本機檔案到公開網址

Learning outcomes

• 能區分 source code、Git repository、build artifact、deployed site。
• 能畫出 Browser → Internet → Server/Platform → Response 的最小路徑。
• 能解釋 domain 與 server 不是同一個東西。
• 能指出「本機能開」與「公開可達」之間缺哪些步驟。

1. 你真正寫的是檔案

project/
  index.html
  styles.css
  app.js

這些檔案存在你的電腦上，不會因為你存檔就自動出現在 Internet。Browser 用 file:// 打開本機檔案，和使用 https:// 造訪公開網站是不同路徑。

2. Git / GitHub 是版本與協作層

local files
  ↓ git commit
local repository
  ↓ git push
GitHub repository

GitHub 保存程式碼與版本歷史，但 repository 本身不等於 production website。還需要 build / deploy。

3. Deploy 把可服務的 Artifact 放到 Runtime

GitHub
  ↓ CI / build
dist/
  ↓ deploy
Cloud platform
  ↓ HTTPS
Public website

Static site 的 artifact 可能只是 HTML/CSS/JS；backend 則可能還要啟動長時間存活的 process。

4. Domain 是人類可讀名稱

example.com
   ↓ DNS
network destination
   ↓ HTTPS
deployed service

買 domain 不等於買 server；有 server 也不代表 domain 自動指向它。第 7 課會把 DNS 拆開。

5. 使用者看到頁面的最小旅程

Project checkpoint：Request Journey Map v1

User types:
https://example.com/courses

Current model:
Browser
  ↓
Internet
  ↓
Deployed website
  ↓
HTML/CSS/JS response
  ↓
Screen

接下來每課都在這張圖補一層，而不是另起一套名詞。

Debug evidence：網站打不開先不要亂猜

先問是哪一段失敗：source/build 根本沒產生？deploy 沒成功？公開 URL 回 404/500？還是 domain/DNS 指錯？這種「先切層」的習慣會貫穿整門課。