靜態網頁是預先做好、存放在伺服器上的 HTML 檔案，訪客開啟網址時，伺服器直接送出同一份檔案，不會臨時查詢資料庫組合內容；由這類頁面組成的就是靜態網站。它適合形象官網、活動頁、產品型錄與說明文件這類內容固定、不需要會員登入的網站，優點是回應快、可以放在 CDN 上、伺服器端要維護的程式少。缺點是更新內容要改檔案或重新產生網站，會員、購物車、即時查詢這類功能無法只靠靜態檔案完成，要另外串接服務，表單也一樣。想兼顧更新方便，可以用靜態網站產生器，在發布前把內容與版型組成 HTML。
靜態網頁的定義：每次請求都回傳同一份檔案
MDN 的說明是，靜態網站對同一個資源，每次都從伺服器回傳相同的固定內容：瀏覽器送出請求，伺服器從檔案系統取出文件回傳。「靜態」指的是伺服器端不加工，不代表頁面不能動，CSS 動畫、圖片輪播、用 JavaScript 做的頁籤切換，都在訪客的瀏覽器上執行，網站仍然是靜態的。
MDN 也提到，CSS、JavaScript、圖片、預先產生的 PDF 這類不會變動的檔案稱為靜態資源，動態網站處理它們的方式和靜態網站一樣。所以動態網站也會用到靜態檔案，兩者的差別在 HTML 本身是預先做好，還是在請求時才產生。
靜態網站和動態網站的差別
MDN 說明，動態網站的部分回應內容在需要時才產生，通常是把資料庫裡的資料放進 HTML 範本，也能依使用者提供的資訊回傳不同內容。WordPress 是常見的例子，官方列出的伺服器需求包含 PHP 與 MySQL 或 MariaDB 資料庫。
| 比較項目 | 靜態網站 | 動態網站 |
|---|---|---|
| 頁面何時產生 | 發布前就做好 | 訪客請求時才組合 |
| 每位訪客看到的內容 | 相同 | 可依登入身分或條件不同 |
| 伺服器需求 | 能提供檔案即可 | 要執行程式與資料庫 |
| 更新方式 | 改檔案或重新產生後上傳 | 在後台編輯後立即生效 |
| 會員、購物車、搜尋 | 要另接外部服務 | 可在網站內完成 |
| 要定期維護的項目 | 以網頁主機與網域為主 | 另有程式、外掛與資料庫 |
靜態網站的優點與限制
優點
- 回應快：web.dev 說明，靜態轉譯在建置時就產生頁面，首次內容繪製快，回應時間也穩定。
- 適合放在 CDN：預先產生的檔案可以部署到多個 CDN，讓距離訪客較近的節點提供內容，原理見CDN 的運作方式。
- 伺服器端要顧的程式少：沒有資料庫與後台程式，就不必追著更新它們；但網域、主機帳號與頁面裡的第三方腳本仍要管理。
限制
- 每個網址都要產生檔案：web.dev 指出，網址無法事先預測或獨特頁面很多時，靜態轉譯會很困難；需要個人化的頁面也不適合。
- 更新要經過重新產生：改一個錯字也要重建並上傳，頻繁更新時要有自動化流程。
- 互動功能要靠外部服務：表單、搜尋、會員都要另外串接。
哪些網站適合做成靜態網站
判斷時問三個問題：頁數是否可以預期、內容是否每位訪客都一樣、更新頻率是否可以接受重新產生。三個答案都是「是」，就適合考慮靜態網站：
- 適合：公司形象官網、品牌或活動頁、產品型錄、技術文件、徵才頁。
- 不適合：會員中心、線上購物、即時庫存或價格、預約系統、需要依使用者顯示不同內容的頁面。
- 可以混合：官網用靜態頁面，會員或購物功能放在另一個子網域的動態系統，兩邊用連結銜接。
MDN 舉的例子是，大型商品目錄或社群貼文若每筆都做一個靜態頁並不切實際，伺服器端程式可以改把資料存在資料庫，再動態產生頁面。
靜態網站產生器：把內容和版型預先組成網頁
手寫每一頁 HTML 很難維護，靜態網站產生器的做法是把內容（例如文字檔或內容管理系統的資料）和共用版型分開保存，執行建置時一次產生全部頁面，再把結果上傳到主機。頁首、頁尾與選單只要改版型一處，重建後全站同步。
以 Microsoft 的 Azure Static Web Apps 為例，官方說明它從程式碼存放庫自動部署，每次推送到受監看的分支就會自動建置，靜態資產從分散於世界各地的點提供，並有發布前的預覽環境；支援的架構也包含靜態網站產生器。Google 的 Firebase 託管則可以託管靜態與動態內容，並部署到全球 CDN。用程式碼存放庫架站的另一種做法，可參考用 GitHub 架網站。
更新內容與表單要怎麼處理
內容更新
沒有後台的靜態網站，要由懂得編輯檔案的人修改後重新部署。若希望行銷人員自己更新，可以讓內容放在內容管理系統，由靜態網站產生器在建置時透過 API 取用，發布後觸發重建，概念見Headless CMS 是什麼。不論哪種方式，都要先講好誰改、誰審、多久上線。
表單與互動功能
- 嵌入表單：Google 表單可以取得嵌入用的 HTML，直接放進頁面，回覆存在 Google 表單。
- 無伺服器 API：Azure Static Web Apps 的 API 以無伺服器架構裝載，不必另外整合完整的後端伺服器，就能接收表單資料、寄出通知。
- 串接既有系統：表單送到公司現有的客戶管理或報名系統的 API。
無論用哪種方式，都要放上個資蒐集告知、加入防垃圾機制，並測試送出後通知是否送達。
常見問題
靜態網頁可以有動畫和互動效果嗎？
可以。靜態指的是伺服器送出的檔案固定，頁面裡的 CSS 動畫與 JavaScript 互動仍在瀏覽器執行，例如輪播、頁籤與展開選單都做得到。
靜態網站對 SEO 比較有利嗎？
內容直接寫在 HTML 裡，搜尋引擎檢索時就看得到，預先產生的頁面回應也快；但排名仍取決於內容是否回答搜尋需求、網站結構與連結，靜態本身不會自動加分。
WordPress 網站可以改成靜態網站嗎？
可以改用 Headless 架構，讓 WordPress 只管理內容，由前台透過 REST API 取用並在建置時產生頁面。原本依賴外掛的表單、搜尋與會員功能，要改用外部服務重新串接。
靜態網站要放在什麼主機？
能提供檔案的網頁主機都可以，也能用 Azure Static Web Apps、Firebase 託管這類服務。選擇時看自訂網域與憑證、部署方式、預覽環境與流量限制。
靜態網站之後能改成動態網站嗎？
可以，但等於一次改版：要選定系統、搬移內容與版型，並保留原本的網址或設定轉址，避免搜尋排名與外部連結失效。
本文由京采數位科技整理。我們自 2005 年起提供官網設計、系統開發與 Google SEO 服務，實際案例可見成果與案例。
想直接討論你自己的網站狀況，或需要一份初步的搜尋機會評估？
相關主題
下一步
決定要不要做成靜態網站前，先列出網站要提供的功能、更新頻率與負責更新的人。京采的網頁設計服務可以協助規劃靜態頁面與動態功能的分工，安排表單串接、網址結構與上線流程，並在驗收時確認速度、表單通知與轉址都正常。想評估網站適合哪種做法，歡迎與我們聯繫。
