從電腦裡的檔案到公開網址

頁面做好了，在瀏覽器裡打開。看起來像網站，行為也像網站：連結點得動，按鈕按得下。您把它傳給別人，對方回您"打不開"。或者打得開，但沒有樣式和圖片。什麼都沒壞。頁面就活在一個地方，您的硬碟上，瀏覽器的網址列已經告訴您了 - 只是您得知道要看哪裡。

"要怎麼把網站發布到網路上"這個問題，聽起來好像有個按鈕等著您去找。換個問法更有用：網站該住在哪裡，才會不只有我看得到？答案要一塊一塊拼起來：伺服器、兩種地址、path、託管和部署。接下來是怎麼更新發布出去的東西、託管為什麼需要金鑰，以及您請代理"發布"的時候它到底做了什麼。

1. 檔案只活在一台電腦上

頁面從硬碟打開時，看一下網址列。那裡不是網址，而是檔案路徑：

file:///C:/projects/landing/index.html    # 您硬碟上的檔案路徑
https://landing-demo.tiiny.site/          # 另一台電腦上的地址

第一行是您的硬碟。瀏覽器在這裡的作用就像個檢視程式：打開檔案、讀取、顯示。它沒有透過網路連到任何地方。第二行是另一台電腦的地址。第一種只有您那邊打得開，第二種在任何連著網路的裝置上都打得開。

這就是"打不開"的來源。傳送檔案和發布頁面是兩回事。頁面通常不是單一檔案，而是一個資料夾：index.html，旁邊放著 style.css 和圖片。只傳了一個 index.html - 對方那邊打得開，但樣式和圖片沒地方找。這就是"打得開，但整個跑版"。

還有第二個限制，更簡單。晚上您把筆電闔上，收進包包帶回家。就這樣，它睡著了，什麼也給不了別人。要讓所有人隨時都看得到頁面，它的檔案就不能放在您這裡。

"我這邊能跑"和"大家都打得開"是兩種不同的狀態。接下來這篇文章講的就是兩者之間隔著什麼。

2. 伺服器

關鍵字是 伺服器。它不是什麼閃著一堆燈的神祕箱子，就是一台永遠開著、負責把檔案送給別人的電腦。它的全部意義就在這裡：您不在的時候，它還在線上。

感覺好像也可以不靠它。您用通訊軟體傳一張照片給朋友 - 它不就是直接從您的手機飛到對方那邊嗎？不是。它會先送到通訊軟體的伺服器，再從那裡轉給朋友。所以您傳完就能關機睡覺，朋友兩小時後才打開也沒關係。就算看不見，中間也站著一台伺服器。

對頁面來說結論一樣：要讓所有人都看得到，檔案就得放在這樣一台機器上。網路不是什麼東西會自己飄進去的公共雲，而是另一台不睡覺的電腦。一開始聽起來甚至有點讓人失望，太平凡了。不過很好懂。

3. 網域和 IP

世界上伺服器很多，得有辦法找到您要的那一台。靠地址。伺服器有兩種地址，就像一般房子一樣：座標和招牌。

第一種是 IP。像 192.0.2.1 這樣的數字地址：準確，但人讀起來毫無意義，就是光禿禿的座標。電腦之間就是靠這個溝通的。

第二種是 網域。給人看的名字，像 example.com。這是招牌：您不會跟朋友說"我們在座標五十點四五、三十點五二的那棟樓見"。您會說"街角那家咖啡店見"。

192.0.2.1        # IP：伺服器的數字地址，給機器看
example.com      # 網域：同一個地方，給人看的名字

兩者怎麼連在一起：您輸入名字時，瀏覽器會先去問名稱簿，這個名字背後對應的是哪個 IP，然後才照數字去找。這本名稱簿叫 DNS，現在您只要知道這些就夠了：您輸入名字，剩下的會自動完成。

地址還有一部分很容易被忽略：最前面的 https://。它不是名字的一部分，而是連線方式：代表跟伺服器的對話是加密的。瀏覽器顯示的樣子各不相同，但沒有 s 的 http:// 都會被標成不安全。加密由託管商自己提供。

4. Path 和預設檔案

伺服器上通常放著一大堆檔案。到底要哪一個，由 path 決定 - 也就是路徑，網域後面那部分地址。如果網域是一棟樓，path 就是樓裡的哪個櫃檯。

網址從左到右讀，它不是什麼魔法字串，而是三個答案。https://example.com/about/team.html 意思是"在伺服器 example.com 上，打開檔案 about/team.html"。

Path 說白了就是伺服器硬碟上的檔案路徑：資料夾 about，裡面是 team.html，就跟您電腦上通往某個資料夾的路徑一樣。大型網站的頁面常常是即時組出來的，但邏輯一樣：網址指向一個具體的地方。

那 path 是空的呢？您輸入 https://example.com/ - 該打開哪個檔案？這早有約定：伺服器會送出網站根目錄裡的 index.html，幾乎所有託管商都這麼做。由此得到一條很快就用得上的規則：index.html 放在您發布的資料夾的根目錄，而不是放在子資料夾裡。

5. 完整的路線

現在所有部分都到位了，可以串成一條完整的鏈。

您輸入網址。瀏覽器向名稱簿查詢這個網域對應的 IP，連上伺服器，伺服器依照 path 找到檔案並送出。瀏覽器拿到的 HTML 文字，跟放在您硬碟上的那份沒兩樣，然後就畫出頁面。

這裡的重點是：不管檔案來自硬碟還是伺服器，瀏覽器畫出來的排版和樣式都一樣。差別在於還有誰能拿到這個檔案。不過瀏覽器對硬碟上檔案的 JavaScript 功能會做一些限制，所以放在伺服器上的頁面，有時候表現得比同一份頁面在本機時更完整。

6. 託管

您沒有資料中心裡的伺服器，也不需要。有 託管 就夠了 - 租來的伺服器：您把裝著頁面的資料夾交給它，它放到自己那台永遠開著的伺服器上，再給您一個公開網址。就這樣。

網址會在託管商的網域上，您的名字排在左邊：landing-demo.tiiny.site、名字.github.io。網域是託管商的，您拿到的是前面那個名字：有時候是您自己選，有時候託管商自動給。用自己的網域，像 mysite.com，也可以，但購買和設定的事現在先不談：光是要把頁面秀出來，並不需要它。

對於用現成檔案組成、不需要伺服器端程式的頁面（這種叫靜態頁面，是另一個話題），也有免費的託管。您不用自己去當管理員。

7. 部署

終於講到這整篇文章真正要講的那個詞了。部署，英文 deploy：您把自己的檔案複製到一個不只有您看得到的地方 - 從您的硬碟到託管商的伺服器。資料夾留在您這裡，同時出現在那邊。

部署之後，同一個資料夾放在兩個地方，網址指向右邊那個。左邊的沒有消失，您還能繼續在上面工作。

具體送過去的是：

landing/
  index.html
  style.css
  img/
    hero.png

landing/ 是整個發布出去的，所以 style.css 和圖片仍然跟 index.html 放在一起，路徑也不變。而 index.html 就在這個資料夾的根目錄。要是您發布的是上一層資料夾，網址打開的就會是資料夾清單，或者一片空白。

資料夾怎麼跑到伺服器上，各家託管商做法不一樣。最簡單的手動做法：打開託管商的網站，把資料夾或壓縮檔拖過去，按下部署按鈕。也有在終端機下指令、或透過儲存庫的做法。本質都一樣：您資料夾的副本出現在他們的伺服器上。方式也看誰在做部署：您可以走網站，代理就只能靠指令。

這裡有兩個詞會一直出現。本機 - 在您的機器上，只有您看得到。對外 - 在伺服器上，所有人都看得到。部署是連接兩者的橋，而且比聽起來短得多：一個資料夾，加上它的一份副本。

8. 怎麼更新已經發布的東西

您改了 index.html 裡的標題，在手機上重新整理頁面 - 看到的還是舊的。本來就該這樣。託管商那邊放的是部署那一刻的副本，而您改的是原始檔。要讓網址上出現新內容，資料夾得再送一次：更新就是再部署一次。

這裡有個細節。能不能送到同一個地址，得看託管商認不認得您。由此分成兩種網址。

臨時的。有些託管商不用帳號就給網址 - 讓您拿去給別人看、討論一下。它活不久：例如 Tiiny Host 大概只有一小時。就算是臨時網址，託管商也可能會要 email，這不是註冊，只是想讓這次上傳至少有個對應的人。這種網址沒辦法更新，只能用新地址重新發布一次資料夾。

永久的。有了帳號，網址就不會消失，地址可以自己選，也能更新和刪除；免費方案通常會限制網站數量和更新次數。給臨時網址的那些託管商，同樣也有免費帳號。有了帳號，金鑰也跟著出現，但不是每次都用得到。

如果部署是代理做的，第一次發布和更新之間的差別，就在一句話裡：

把 landing 資料夾發布到託管上。我需要一個能用手機打開的網址。

我改了 index.html 裡的標題。把 landing 再發布一次，如果可以的話用同一個地址。

第二個請求說得很老實。"如果可以的話"把是臨時網址還是永久網址的判斷交給代理，它會告訴您結果是哪一種。代理的回覆我就不放了：每家託管商、每個 skill 的回覆都不一樣。

9. 存取金鑰

託管商的帳號會給您一把 存取金鑰：一長串字母和數字，託管商靠它認出您。手動操作不需要它：您在網站上登入帳號，把資料夾拖過去，按下部署 - 託管商本來就知道您是誰。需要金鑰的是代理：它不會走網站，而是用指令送資料夾，而託管商只能靠金鑰認出這條指令是誰送的。有了金鑰，部署會把檔案放到您的永久地址下；沒有金鑰，就只能拿到臨時網址。

金鑰有它自己該待的地方，工具會自己去那裡讀：環境變數，或是部署 skill 自己打開、不用您經手的檔案。如果 skill 問您金鑰要存在哪裡，請回答一個存放位置，而不是在聊天視窗裡貼上那串字。

也有反過來的情況：金鑰自己出現在對話裡，是服務回應代理請求時送來的。這時候就把它存到該放的地方，並且記住這段對話已經看過這個機密了。

第一次發布不需要金鑰：臨時網址或透過網站上傳就夠了。

10. 和 Claude Code 搭配時怎麼運作

當您請代理"發布"的時候，大致會發生下面這些事。

• 代理看一下資料夾，認出這是一個由現成檔案組成的頁面。如果沒有對應託管商的 skill，它會提議安裝，或者問您要發布到哪裡。託管商由您來選。
• 發送靠指令完成。在代理會先徵求許可的模式下，執行前就看得到這條指令：上面寫著它要送出哪個資料夾、送到哪裡，值得您真的讀一遍，而不是憑習慣按"是"。如果它不徵求確認 - 這種模式存在，而且有時候一開始就是開著的 - 那就主動要求它在發送前先給您看指令和資料夾。
• 結果是代理回覆裡的一個網址。請用手機打開它：代理沒有第二台裝置，它自己驗證不了這件事。
• 更新就是同一句"再發布一次"。只有託管商能靠金鑰認出您，才能發布到同一個地址。不然代理會老老實實地給您一個新的臨時網址，這不是出錯。
• 臨時網址要用的 email，代理可以問您，這不是機密。金鑰不行：如果它問了，正確答案是告訴它能從哪裡讀到金鑰，而不是把字串貼進聊天視窗。