先認識這兩個概念
- Portable Website 是可以帶走的網站。你拿到完整檔案，可以自行保存、換一家支援這些檔案的主機服務，也可以請其他開發者修改。
- Web Application 是透過瀏覽器使用的軟體，例如線上文件、訂單系統或客戶帳戶。它讓使用者完成操作；涉及帳戶、交易等業務時，還需要相應的後台服務。
- 建站工具和完成的網站可以分開。你可以用功能複雜的 Web Application 製作網站，再把產生的 Portable Website 放到自己選擇的主機服務上。
1. 你想展示內容，還是讓使用者在線上辦事？
一家工廠想讓海外客戶看到產品、設備和認證；顧問公司想介紹服務、展示案例；設計師想讓人瀏覽作品、找到聯絡方式。這些網站首先要把事情說清楚，讓訪客了解你，再決定是否聯繫。
線上交易平台和協作軟體要處理的事情就不同了。使用者會登入帳戶、下單、修改紀錄，或與同事一起編輯文件。系統必須處理這些操作，並在需要時儲存資料、檢查權限。這類透過瀏覽器使用的軟體，就是 Web Application。它可以在瀏覽器裡執行，也可以由伺服器配合處理。
如果每位客戶看到的都是同一份公司介紹或產品說明，就不一定需要每次有人瀏覽，都讓後台從資料庫讀取資料、重新組成頁面。你可以先把頁面做好，訪客來了就直接展示。以後資料變動，再更新網站檔案。
例如一份供海外客戶瀏覽的產品目錄，客戶看完後用電子郵件詢價。這裡需要一個好用的網站，卻未必需要客戶帳戶、即時庫存和常年運作的內容管理後台。交付 Portable Website，就能讓你保留完整頁面和圖片，自行決定放在哪裡，以及由誰維護。
| 你關心的問題 | Portable Website | Web Application |
|---|---|---|
| 拿到的是什麼？ | 一套能保存、搬遷和繼續修改的網站檔案 | 一套讓使用者在線上完成操作的軟體 |
| 上線後靠什麼運作？ | 主機服務提供網頁檔案；額外功能按需要連接其他服務 | 執行應用所需的程式和服務，可能還有資料庫、登入驗證和 API |
| 平常要維護什麼？ | 網站內容、網域、主機帳戶，以及使用的外部服務 | 除了網站本身，還有應用所需的程式、資料、權限和服務 |
| 換人接手要交什麼？ | 完整檔案、部署說明和外部服務資料 | 程式碼、相關資料、設定、服務帳戶和維運說明 |
2. 網站做好了，為什麼還有一堆系統要維護？
許多建站方案把「製作網站」和「運作網站」包在同一項服務裡。你在平台上編輯內容、存放圖片、選擇樣式，也靠它把頁面呈現給訪客。傳統 CMS（內容管理系統）還可能需要資料庫、佈景主題、外掛和伺服器程式一起配合。買一個網站，往往也意味著長期使用和維護這些系統。
這些功能確實有用途。內容團隊每天要撰稿、審稿，管理後台就很方便；網路商店要處理訂單，業務系統更不可少。但如果公司網站一年只改幾次資料，資料庫備份、後台更新、外掛相容性檢查和安全性修補，可能已經超過實際需要。
主機或平台業者可以替你處理很多維護工作，但工作本身並沒有消失。你依然得持續使用服務，支付相應費用。選擇建站方案時，可以具體想一想：這些功能是日後每天都要用到的，還是只在製作網站時用過？
有管理帳號、拿得到程式碼，或軟體標示為開源，也不一定就方便搬走。開源程式仍可能需要資料庫、指定軟體版本和定期更新；專有的建站工具也可能交付一般網站檔案。真正要確認的是能否取得完整可用的網站，以及離開原服務商後，要怎麼繼續運作。
3. 建站用到的工具，不必一直跟著網站
把一堆資料整理成網站，可能需要功能很完整的軟體。擷取文件內容、整理產品目錄、翻譯、排版和產生頁面，都可以交給 Web Application 處理。LiteSite 就是這樣的工具。
網站做好後，訪客打開「關於我們」，只需要看到已經確認的文字和圖片。這時不必重新呼叫整理資料的 AI，也不必再走一次建站流程。製作時使用什麼軟體，和上線後靠什麼運作，可以分開選擇。
製作網站：Web Application
整理資料 → 修改內容 → 翻譯與排版
↓
交付網站：Portable Website
HTML、CSS、JavaScript、圖片等檔案
↓
把檔案放到相容的主機服務
↓
訪客用瀏覽器開啟網站
表單、付款等額外功能，另行連接所需服務。「靜態網站」就是一種常見做法：事先產生頁面，訪客存取時，主機把檔案交給瀏覽器。動態網站則可能在收到請求後，才由程式讀取資料、產生頁面。選哪一種，取決於哪些內容必須即時變動，哪些可以在修改資料時就先處理好。
靜態網站也能有豐富的設計和互動。導覽、圖片藝廊、動畫、手機版面和語言切換，都可以在瀏覽器裡完成。需要登入、收款或傳送訊息時，可以連接相應服務。例如，在產品頁面放一個付款連結，就能讓客戶進入支付服務完成購買。
4. 怎樣才算 Portable Website？
在 LiteSite，Portable Website 的意思很直接：交給你一套完整的網站檔案。你可以下載保存、放到相容的主機服務上，也可以請其他開發者繼續修改。網站主要頁面的展示，不需要持續連接 LiteSite 的應用伺服器，也不要求你一直保有 LiteSite 帳戶或訂閱。
- 檔案要完整。除了文字，還要有實際可用的頁面，以及頁面使用的圖片、樣式和程式。
- 獨立運作。網站的主要頁面可以直接放到你選擇的主機服務，訪客打開網址就能瀏覽。
- 能換地方託管。新主機支援這些檔案和頁面網址，完成相關設定後就能繼續使用。
- 能換人維護。開發者可以用常見工具查看和修改 HTML、CSS、JavaScript 與其他檔案。
- 按需要連接服務。表單、地圖、統計、預約或付款，可以使用你選擇的服務和帳戶。
Portable Website 關心「網站能不能帶走」，Web Application 關心「使用者可以拿它做什麼」。這兩個特點可以同時具備，完全在瀏覽器裡執行的應用也可以便於搬遷。對介紹公司和產品的網站來說，事先做好頁面、交付完整檔案，就能把內容展示與建站平台分開。
5. 能帶走，對你有什麼幫助？
你可以保留已經做好的網站。下載完整檔案，放到自己的主機服務，網站就能獨立運作。日後更換建站工具，也能繼續使用這份成品。
你也可以換服務商或換開發者。接手的人能從現有頁面、圖片和程式碼開始，直接調整內容、改進設計，或搬到新的主機服務。已經完成的網站，會成為下次更新的起點。
展示型網站也能減少後台維護。事先產生的頁面省去了展示內容所需的資料庫和管理後台，相應的更新、備份和監控工作也跟著減少。你可以把心力放在產品資料、案例和頁面體驗上。
費用也比較容易分開計算。購買網站是一筆費用，網域、主機和後續維護可以依自己的需求安排。靜態主機服務可以很便宜，甚至可能完全免費。你可以從適合的方案開始，再隨業務發展調整預算和服務。
6. 購買後，你拿到哪些檔案？
先在 LiteSite 中檢查內容與多語言網站預覽，再決定要不要購買。購買後拿到的是可以正式上線的完整網站，預覽浮水印也會移除。下載並保存檔案後，你可以自行使用、交給開發者修改，或選擇其他主機服務。
index.html
about.html
content.json
…其他頁面
zh-Hans/
index.html
about.html
content.json
…其他頁面
assets/
…樣式、程式、圖片、字型
robots.txt
sitemap.xml
seo-manifest.json
manifest.json
package-info.json
healthcheck.json
README.md
AGENTS.md
DEVELOPMENT.md
litesite-dev.mjs
litesite-bind-origin.mjsHTML 頁面和圖片、樣式、程式等資源檔案，組成訪客看到的網站。content.json 保存購買時的網站內容，方便查閱和交接。需要直接修改成品時，開發者可以在部署目錄中編輯對應的 HTML 頁面和資源檔案。
檔案清單和校驗資訊用來確認下載包是否完整。README.md 是部署說明；AGENTS.md 幫助 AI 程式 Agent 快速了解這份程式碼。DEVELOPMENT.md 說明網站檔案、設計慣例和互動方式，litesite-dev.mjs 用於本機預覽和檢查。litesite-bind-origin.mjs 則是隨包附上的工具，會根據網站將使用的網址，產生一個用於上傳的部署目錄。下一節說明具體用法。
請保留原始下載包作為備份。需要修改時，先依說明產生部署目錄，再在該目錄中編輯頁面和資源檔案。工具會校驗原始包中的檔案，保留它就方便日後為其他主機網址準備新的部署目錄。
7. 換一家主機服務，具體怎麼做？
先確定網站最後使用的 HTTPS 網址，再選擇支援這些靜態檔案和頁面路徑的主機服務。透過 LiteSite 部署到自己的 Cloudflare 帳戶時，LiteSite 會準備好對應檔案。如果打算自行上傳，請先解壓縮購買後下載的 ZIP，保留一份未修改的原始備份，並閱讀其中的 README。
node litesite-bind-origin.mjs https://example.com/
# 接著上傳產生的 litesite-deployment/ 目錄。這個工具會把網站的正式網址寫入相關檔案，包括供搜尋引擎識別的 canonical 網址、各語言版本連結、社群分享資訊中的網址，以及網站地圖。處理後的檔案另存到 litesite-deployment/，原始檔案保持不變。Node.js 用來準備這份部署檔案；上線後的頁面由靜態主機服務直接提供給瀏覽器。
上傳產生的 litesite-deployment/ 目錄即可。這個目錄整理好了正式網站需要的檔案，README 和準備檔案用的工具留在原始包裡。
node litesite-bind-origin.mjs https://USER.github.io/ /REPO/上傳後，到實際網址檢查首頁、內頁、各語言版本、圖片和下載連結。直接開啟各個內頁，確認每個網址都能瀏覽，再檢查 HTTPS、表單和其他連接的服務。
更換網域或主機服務時，視需要調整 DNS；頁面網址有變動時，為舊網址設定重新導向，讓原有連結繼續把訪客帶到正確位置。保留原來的頁面路徑，通常能讓搬遷更順暢。
網站放在子目錄時，依平台提供的設定管理爬取規則。如果你能管理網域根目錄，就把 robots.txt 放在那裡，供搜尋引擎讀取。例如，網站位於 /REPO/，robots.txt 仍在網域根目錄統一管理。
8. 連接業務需要的服務
Portable Website 可以搭配你已經使用的業務工具。聯絡表單連接訊息服務，地圖展示公司位置，預約和付款交給相應平台。你可以依業務需求選擇服務，讓網站保持簡潔，也方便客戶聯繫、預約或購買。
| 項目 | 你可以如何安排 |
|---|---|
| 網頁、樣式、程式與隨包圖片 | 保存完整檔案，選擇主機服務，也可以交給開發者繼續修改。 |
| 網域、DNS 和 HTTPS | 使用自己的網域和主機帳戶，設定網站網址與安全連線。 |
| 表單、地圖、統計、預約和付款 | 選擇適合業務的服務，連接自己的帳戶，把客戶操作接入日常工作。 |
| 後續修改 | 由自己選擇的開發者更新內容、改進功能與無障礙體驗，再上線新版本。 |
同一家企業可以同時使用 Portable Website 和 Web Application。公司介紹、服務和產品展示使用可帶走的網站；登入、預約和訂單交給獨立應用，再以連結或必要的 API 接起來。例如，客戶在網站上了解服務，再進入預約系統選擇時間。每個部分都能使用適合的工具。
9. 哪種方案適合你的業務？
如果主要是介紹公司、服務、產品資料或作品，內容隔一段時間才更新一次，Portable Website 通常值得優先考慮。尤其當你需要多個語言版本，也希望日後能換人維護、換地方託管時。
當使用者登入後要看到各自的資料，系統要處理訂單、同步即時庫存、管理訂閱，或讓多人同時編輯時，Web Application 就能發揮作用。你可以為這些業務保留專門的應用，讓它與展示網站配合。
即使你的業務需要 Web Application，也可以請開發者以 LiteSite 產生的網站為基礎，繼續開發。沿用現有的頁面、設計和內容，再依業務需求加入使用者帳戶、訂單處理和後台服務，今天做好的網站就能成為下一步開發的起點。
經常更新內容的團隊，也可能確實需要 CMS 安排撰稿和審稿。不過編輯後台可以繼續使用，給訪客看的頁面仍然事先產生。你可以分別決定內容怎麼編輯、哪些功能需要後台，以及哪些頁面直接用檔案展示就夠了。
- 訪客看到相同內容，還是每個人都要讀取自己的帳戶和資料？
- 資料多久更新一次？由誰修改？
- 付費後能取得哪些檔案，可以如何使用？
- 停止使用建站工具後，哪些頁面和功能還能正常運作？
- 換一位開發者，能不能憑現有檔案和說明接手？
- 上線後還有哪些帳戶要管理，哪些費用要持續支付？
10. LiteSite 是 Web Application，交給你的是 Portable Website
LiteSite 提供帳戶、資料整理、內容編輯、翻譯和網站生成功能，所以它本身就是 Web Application。你在這裡製作網站、查看預覽，並決定是否購買。
你購買的是已經做好的網站。完整檔案可以下載保存，主要頁面能放在相容的主機服務上運作，不需要 LiteSite 的應用伺服器一直參與。之後你可以自行管理，也可以把檔案交給另一位開發者。
很多客戶只想有一個專業、好用的網站，卻因此接手了一整套軟體的維護工作。LiteSite 希望把這兩件事分開：製作時用好工具，完成後把網站交到你手上。你能保存完整檔案，自己選擇主機服務，也能決定以後由誰修改。
參考資料
以下官方文件可以幫助你進一步了解靜態網站、伺服器程式和網站搬遷。