靜態網站、frontend 和 backend

螢幕上有兩個網站。第一個是遊戲頁面：遊戲區、分數、"重來一次"按鈕。第二個是工作室頁面，上面有個"提交訂單"的表單。兩個都在瀏覽器裡打開，都是用 HTML、CSS 和 JavaScript 做的，看起來都是完成品。第一個一分鐘就能發布：資料夾丟到主機上，連結就有了。第二個的話，代理很可能會停下來問您，伺服器要放在哪裡、訂單要存到哪裡去。

差別不在複雜度，也不在好不好看。差別在於訪客按下按鈕之後，該由誰來做事，以及事後資料該放在哪裡。我們拆解三個詞：靜態網站、frontend 和 backend，看看資料放在哪裡，以及這如何決定發布方式。最後再看看，在您說"發布"之前代理自己會問什麼，以及您該反過來問它什麼。

1. 靜態網站

靜態網站是由做好的檔案組成的網站：index.html、style.css、腳本、圖片、字體。伺服器把它們存起來，原封不動地送給每一位訪客，不做任何運算，也不記得訪客的任何資訊。展示畫面、計算、回應點擊 - 這些工作全部由訪客電腦上的瀏覽器來做。

拿一個單頁作品集來說。資料夾裡有寫著自我介紹和作品清單的 index.html、style.css、十來張圖片，還有一小段腳本。訪客打開連結，瀏覽器下載檔案並組成頁面。點擊作品會放大圖片，切換深色主題會改變顏色：這些都是瀏覽器裡的腳本在做。伺服器把檔案送出去之後，就不再參與後續的事：它不管是誰來、按了什麼。有了新作品 - 您修改 index.html，放上新圖片，再重新發布資料夾；沒有別的辦法能改動這裡的內容，而且是您在改網站，不是訪客。

下面這些用的是同一套模式：

• 演唱會或活動的宣傳頁：日期、地點、節目單、交通地圖；"購票"按鈕連到售票網站，宣傳頁本身不賣任何東西；
• 產品或服務的介紹頁，如果上面放的是電話和信箱，而不是表單；
• 專案文件：幾十頁，有選單，頁面之間互相連結，但終究還是檔案；
• 沒有留言功能的部落格：每篇文章都是一個檔案，新文章的發布方式跟其他東西一樣；
• 瀏覽器裡的遊戲。沒錯，遊戲也算：走步、分數、動畫都是在瀏覽器裡算出來的，伺服器不管這些事。

把網站的工作拆成兩半 - 瀏覽器做的那一半，和伺服器做的那一半 - 就能看清楚靜態到哪裡為止。這兩半都有自己的名字。

2. Frontend 在瀏覽器裡運作

Frontend 是所有在訪客電腦上執行的東西：瀏覽器拿到並在自己那邊跑起來的標記、樣式和腳本。"前端"，看得見的那一部分。（常常有人只把它叫做"排版"，但其實它是使用者會接觸到的整個網站部分，對靜態網站來說，就是整個網站。）

Frontend 能做的事不少：顯示頁面、計算遊戲裡的走步、送出之前先檢查表單欄位有沒有填、記住一些東西留到下次造訪 - 為此瀏覽器有自己的儲存空間，代理會稱它為 localStorage。它不會做的事，是分享出去。這個儲存空間只活在這個瀏覽器、這台裝置上，別的地方都沒有。這條界線什麼時候礙事、什麼時候不礙事，看兩個例子就清楚了。

遊戲最高分。一局結束，腳本把結果跟之前的紀錄比較，把新紀錄寫進瀏覽器的儲存空間。玩家隔天在同一台筆電、同一個瀏覽器打開頁面 - 紀錄還在。換成手機打開 - 那裡是空的，手機有自己的儲存空間。您，遊戲的作者，永遠看不到這個紀錄。這也沒關係：它只是給玩家自己用的，網站依然是靜態的。

工作室的訂單。客戶描述了需要什麼，留下電話，按下"送出"。腳本可以檢查欄位有沒有填，再往下它就沒轍了：把訂單寫進瀏覽器的儲存空間 - 訂單會留在客戶的手機裡，工作室的人根本不會知道。訂單得讓另一個人在另一台裝置上看到，也就是說，資料得離開客戶的電腦，而另一頭得有人接收並存起來。只由檔案組成的網站，沒有這個"某個人"。

只跟單一訪客、單一裝置有關的事，frontend 自己就能搞定。剩下的，是另一半的工作。

3. Backend 在伺服器上運作

Backend 是一支跑在伺服器上、回應瀏覽器請求的程式。接收訂單並存起來。檢查帳號密碼。回傳商品清單。就算訪客已經關掉分頁，它照樣在運作，而且必須一直開著，就跟伺服器本身一樣 - 那是一台不會關機的電腦。

圖上是同一種形狀的兩條路徑：點擊、做事、結果。差別在中間那一塊 - 誰來做事，做的是什麼。上面那條，遊戲走一步之後，瀏覽器裡的 JavaScript 計算分數、存紀錄、重繪畫面，全部都在訪客的電腦上完成。下面那條，點擊"送出"會變成一個請求，請求送到伺服器，程式接收它、把訂單存在自己的伺服器上、再回應瀏覽器，畫面上看到的正是這個回應。訂單具體存在伺服器的哪裡，下一節再說。"誰來做事"這個問題，就是兩種網站之間的界線。

有三個明顯的信號，說明少不了 backend：

• 密碼登入：得有人存密碼、驗證密碼，而這不可能是訪客的瀏覽器；
• 別人也要看到的資料：留言、訂單、共用清單；
• 以您的名義去做事：寄信、扣款、用您的金鑰去操作別家服務。

Backend 用什麼語言都行：JavaScript（這種情況下就是 Node.js）、Python、Java，還有十幾種其他語言。對這篇文章來說，語言不是重點，重點是程式得在某個地方一直運作，而這個"某個地方"不是瀏覽器。網站的網址跟靜態網站一樣，指向伺服器上的某個位置，只是這個位置現在放的不是檔案，而是一支即時組出回應的程式。

4. 資料放在哪裡

資料放在哪裡、該讓誰看到，才決定了點擊之後該由誰做事。不是網站的外觀，也不是它的複雜度。地方一共有三個。

在專案的檔案裡。頁面文字、圖片、遊戲規則。對所有訪客都一樣，只有重新發布才會改變：改好檔案，再發布一次。

在訪客的瀏覽器裡。設定、最高分、不想在重新整理後就消失的表單草稿。只有這位訪客在這台裝置上看得到。清除網站資料時會消失，無痕視窗裡沒有它，換一個瀏覽器、換一台裝置也沒有，而您對這些東西一無所知。

在伺服器的資料庫裡。訂單、留言、帳號。該看到的人都看得到，您也包括在內。不管有沒有人開著分頁，資料都一直在。要讓資料進到這裡，得靠伺服器上的程式接收並寫入。

圖上是跟前面一樣的兩個世界，只是現在裡面放的是資料，而不是做事的角色。網站檔案以副本形式送到每位訪客那裡，所以每個人看到的頁面都一樣。瀏覽器儲存空間是唯一沒有箭頭的方塊：資料就在那裡，但不會離開裝置，您也看不到。資料只能透過程式進到資料庫，但一旦進去，該看到的人都能看到。

不用想理論，問自己一個問題就好：別人需不需要看到這個人輸入的東西？"記住最高分" - 不需要，那就用瀏覽器儲存空間，網站依然是靜態的。"存下訂單" - 需要，那就要有資料庫，還有寫入資料庫的程式。這個問題有一個例外，而且跟資料本身無關：別家服務的金鑰。如果有金鑰，答案"不需要"救不了您：金鑰不能放在檔案裡，所以還是得有伺服器上的程式代您去用那個服務，或者找一個能替您代勞的中介服務。

也有介於中間的情況。訂單表單可以交給別家服務代收：訪客按下"送出"，資料不是傳到您的伺服器，而是傳到對方那裡，再由對方寄信通知您。這依然算 backend，只是不是您自己的。如果您問，代理會說出這類服務的名字；現在您只需要知道，表單少了某處的伺服器程式就是行不通的。

5. 為什麼發布方式不一樣

靜態網站靠複製就能發布：資料夾丟到主機上（別人的伺服器，負責把您的檔案送給所有想看的人），連結就有了，要更新就再複製一次。就這樣。

Backend 就不一樣了。伺服器上得有程式語言的執行環境 - Python 本身、或是 Node.js，少了它們程式就沒法跑。程式得處於運作狀態，掛掉了還得重啟。旁邊還得有資料庫在運作。資料庫和別家服務的金鑰，得放在程式讀得到、但訪客讀不到的地方。這幾個部分各自獨立更新，也各自用不同的方式壞掉。

正因如此，主機也得換一種：能執行程式，而不只是送出檔案的那種。這類主機通常按程式運作的時間、以及資料庫佔用的空間收費。免費方案是有的，但附帶的條件比這篇文章更新得還快。

關於保密那一行，補充一點。如果您為了固定連結而申請了主機的金鑰，靜態網站也會有這種金鑰，但它跟網站資料夾分開放，不會放進資料夾裡。

代理回答裡的"架個伺服器"，聽起來就像"建立一個檔案"那樣稀鬆平常。但這句話背後是表格右邊那一整欄，而且之後幾乎每一行都得持續維護。

6. 靜態網站要發布到哪裡

既然靜態網站靠複製就能發布，適合它的主機就很多，而且大多對小型頁面免費。這裡列五個最常見的。表格裡會出現"儲存庫"這個詞：目前只要理解成受版本控制的專案資料夾就夠了，細節先不展開。

怎麼選。要展示和討論 - 選那種不用註冊就能拿到連結的。要長期留著 - 任何一個您註冊了帳號的都行。專案放在儲存庫裡 - 選能連結儲存庫、每次改動都自動更新的那種。選哪一個，不會影響發布出來的頁面長什麼樣：檔案都是一樣的。

如果網站有 backend

程式需要的主機，得能做到不只是送出檔案，還要能執行您的程式碼並讓它一直運作：這種主機要的不是一個資料夾，而是一支程式，執行環境由它自己準備。上面表格裡有些服務也支援這種模式，但一般會先從兩個專門給程式用的服務開始：

免費的 backend 總有代價：某個服務的程式會進入休眠，暫停後第一位訪客得等它醒過來；另一個服務則是額度會用完。訪客一多起來，持續運作的費用就得開始付了。靜態網站沒有這個問題：檔案不會睡覺。

各家服務的條款和限制都會變動，產品也會改名或整併：例如 Cloudflare 已經建議新專案不要從 Pages 開始，改用 Workers，靜態檔案在那裡一樣可以發布。兩張表裡都刻意沒放具體數字：選擇之前，請先去看一下各家的價目頁面。

7. 發布前該問代理什麼

代理會看一下資料夾，通常自己就會判斷專案類型。只有檔案沒有程式 - 會建議靜態網站的主機，就算檔案裡有個沒地方可送的表單也一樣：這種情況它不一定每次都注意得到。有 server.js 或 app.py - 會說需要伺服器，並問您伺服器要放在哪裡。如果它沒說，或說得太快，您就自己問：

看一下這個專案，告訴我這是靜態網站，還是需要伺服器。
逐條列出具體哪些地方需要伺服器。
針對每一條，說說能不能不用伺服器，或先延後處理。

答案要看具體專案而定，所以這裡沒有標準答案。不過有幾件事，不管回答是什麼都值得留意。

• 看到"需要伺服器"，不要不加思索就同意。問清楚具體是哪個地方需要它，能不能在瀏覽器裡完成，或先延後 - 比如先發布沒有表單的第一版。代理很樂意在瀏覽器儲存空間就夠用的地方，順手架一個 backend。
• 反過來也一樣：如果資料必須是共用的，代理多半會說靜態網站不夠用。這不是把事情複雜化，只是如實稱呼它而已，沒什麼好爭的。
• 關於別家服務的金鑰，代理會問您要放在哪裡。回答"放進網站檔案裡"是錯的，一個靠得住的代理自己就會這麼說。這類金鑰有它該待的地方，而且不在網站檔案裡，代理應該自己說出那個地方，而不是建議您把金鑰寫進頁面。
• 發布靜態網站前，代理只需要一個資料夾。發布 backend 前，還需要您回答資料庫、執行環境和金鑰的問題。如果它沒問任何問題，伺服器卻"架起來了"，看看它到底做了什麼、做在哪裡。

"靜態"和"backend"這兩個詞描述的不是複雜度，而是位置：工作發生在哪裡、資料放在哪裡。位置一旦確定，發布方式自然就選好了。

各家主機的條款會隨時間變動，請以價目頁面上的最新資訊為準。