什麼是靜態網站？100%新手指南

您正在為下一個專案選擇靜態網站還是動態網站？或者你甚至不知道什麼是靜態網站？

無論如何，這篇文章都能幫到你。它包含了你需要了解的有關靜態網站的一切資訊，包括靜態網站是什麼、靜態網站如何工作、靜態網站與動態網站有什麼不同，以及靜態網站與動態網站的一些優缺點。

最後，您應該對哪種方法最適合您的專案，以及如何開始使用有了很好的瞭解。

什麼是靜態網站？

靜態網站是指使用固定數量的由 HTML、CSS 和 JavaScript 組成的預置檔案來提供頁面的網站。

靜態網站沒有後臺伺服器端處理，也沒有資料庫。與靜態網站相關的任何 “動態” 功能都是在客戶端執行的，這意味著程式碼是在訪問者的瀏覽器中而不是在伺服器上執行的。

用非技術術語來說，這意味著您的主機將網站檔案傳送到訪問者的瀏覽器上，與這些檔案在伺服器上的顯示完全一致。

更重要的是，每一位訪問者的瀏覽器都會收到相同的靜態檔案，這就意味著訪問者會獲得完全相同的體驗，看到完全相同的內容。

什麼是動態網站？

動態網站是指由伺服器端控制並依賴於某種指令碼語言（如 PHP）的網站。每次有人訪問網站*，伺服器都會處理其程式碼和/或查詢資料庫，以生成完成的頁面。

這樣，伺服器就能為每次訪問顯示不同的內容。例如，登入網站的人可能會看到一個版本的頁面，而未登入的人在訪問該頁面時可能會看到完全不同的內容。

這也意味著，您在網站管理控制面板上所做的任何更改都可以立即看到，因為內容管理系統會自動開始提供帶有最新內容/更改的頁面。

提示：*使用頁面快取等技術，可以在一定時間記憶體儲完成的 HTML 版本頁面，從而無需每次載入頁面時都執行上述操作。

靜態網站如何執行？

稍後我們將更深入地介紹如何製作靜態網站，但大多數靜態網站使用的基本方法如下：

1. 選擇建站方式-對於非常簡單的網站，您可以手動建立靜態 HTML、CSS 和 JavaScript 檔案，但許多現代靜態網站都使用某種型別的靜態網站生成器 (SSG) 工具或無頭 CMS。
2. 建立網站-使用所選工具建立網站。與 WordPress 不同的是，你不能從實時生產伺服器上控制你的網站。
3. 部署網站-這意味著您要將網站的靜態檔案移動到實時主機上，以便使用者可以訪問它們。

靜態網站和工具示例

在檢視網站時，沒有硬性規定來區分它是靜態網站還是動態網站。相反，看看能幫助你構建和管理靜態網站的工具示例會更有幫助。

Astro 是靜態網站生成器的一個流行範例。

下面是建立靜態網站軟體方面最受歡迎的一些靜態網站示例：

• Astro
• Jekyll
• Hugo
• Eleventy (11ty)
• VuePress
• Gatsby
• Pelican
• Nikola
• Publii

所有這些工具都能讓你建立靜態網站，但它們的方法卻大相徑庭。例如，Publii 為你提供了一個無需程式碼的桌面介面，而其他一些工具則要求你使用命令列。

動態網站和工具示例

為了幫助您與上述靜態網站示例進行對比，我們也來看看一些動態網站示例。

最受歡迎的動態網站示例是 WordPress 軟體，網際網路上超過 43% 的網站都使用了該軟體。

WordPress 是最流行的動態網站工具。

雖然您可以通過安裝靜態網站生成器外掛來使用 WordPress 建立靜態網站，但 WordPress 的預設功能是動態網站生成器。

以下是使用類似方法的其他一些著名動態網站示例：

• Drupal
• Joomla
• Shopify（以及幾乎所有其他電子商務平臺）

靜態網站與動態網站的利與弊

現在，您已經對什麼是靜態網站以及靜態網站與動態網站的比較有了紮實的瞭解，讓我們來看看靜態網站與動態網站的一些優缺點。

靜態網站優點

• 更易於優化效能-可以說，由於靜態網站的 “活動部件 “較少，因此更易於優化效能。靜態網站一般都非常精簡，載入速度也很快，尤其是如果你製作得當的話。
• 需要的伺服器資源更少-由於靜態網站不需要任何伺服器端處理，因此每次訪問時伺服器需要做的工作要少得多。這就提高了網站的效能，並有助於網站在擴充套件時發揮更好的效能。您甚至可以直接將靜態網站部署到 CDN，而完全不使用網路伺服器（這在一定程度上意味著您的網站沒有靜態 IP 地址）。
• 託管靜態網站的費用非常低廉-對於簡單的業餘愛好專案/作品集而言，您可以將其免費託管在我們的靜態網站託管服務上，或使用其他免費託管服務，如 GitHub Pages 或 Cloudflare Pages。
• 更容易確保安全-由於靜態網站不依賴伺服器端處理或資料庫，因此惡意行為者的攻擊面較少。靜態網站仍有可能被黑客攻擊，但發生的可能性要小得多。
  非常容易啟動簡單的網站–您可以非常快速地啟動靜態網站，因為您無需擔心資料庫等技術細節的設定。

靜態網站缺點

• 應用內容/設計更新可能更復雜-對於靜態網站，每次進行更改或應用更新時都需要重新部署網站，即使是更改導航選單中的一個專案這樣很小的事情也是如此。這可能會增加一些額外的複雜性，尤其是當你定期更改網站時。不過，當你通過 Kinsta 等靜態網站託管服務部署 Git 倉庫時，你可以開啟自動部署功能，在有任何更改時自動從 Git 倉庫觸發部署。
• 新增功能的技術性更強-使用 WordPress 等動態網站工具，當你想為網站新增功能時，可以安裝一個新外掛。而對於靜態網站，通常（但並不總是）會更加複雜。
• 內容管理功能通常沒有那麼強-靜態網站工具在管理內容方面通常沒有那麼強，如果你有一個擁有成千上萬內容和大量分類組織的大型網站，這可能會很麻煩。不過，一些靜態網站生成器正在努力減少這一問題。
• 依賴第三方服務實現網路表單等基本功能-例如，大多數靜態網站都使用 FormBold 或 Getform 等表單端點 API。或者，你也可以嵌入第三方表單服務，如 Google 表單（或這些 Google 表單替代品之一）。對於 WordPress 這樣的動態內容管理系統，您只需安裝一個表單外掛，然後將所有內容儲存到網站資料庫中即可。

動態網站優點

• 可以建立個性化的訪客體驗-可以根據瀏覽者動態調整頁面內容。例如，您可以建立一個會員制網站，付費會員可以看到頁面的全部內容，而匿名訪客只能看到一小部分預覽內容。
• 輕鬆更新網站（內容和設計）-在動態網站上應用內容和設計更新非常簡單。只要在網站管理控制面板中應用更新，就能立即看到實時網站上的變化。無需像靜態網站那樣重新部署整個網站。
• 更容易通過外掛/應用程式新增新功能-例如，如果使用 WordPress 作為動態網站內容管理系統，只需安裝新外掛即可新增功能。
  更強大的大規模內容管理功能–動態網站工具通常更適合管理大量內容。例如，如果您要建立一個包含數千家本地企業的目錄，動態網站工具通常是更好的選擇。

動態網站缺點

• 託管費用可能更高-在同等條件下，動態網站的託管費用通常更高，因為它需要更多的伺服器資源來進行伺服器端處理。
  更難確保安全–動態網站比靜態網站有更多的攻擊面，這使得它們的安全問題更復雜一些。例如，你需要擔心 SQL 注入攻擊，而靜態網站不會受到這種攻擊（因為靜態網站沒有資料庫）。
• 需要投入更多精力進行效能優化-動態網站的優化更加複雜，因為您需要同時擔心前端和後端的效能。例如，動態網站可能需要花時間優化資料庫查詢和效能，而靜態網站則不需要。
• 設定過程略微複雜-例如，如果你想建立一個 WordPress 網站，你需要設定資料庫並確保網站擁有必要的技術（如最新版本的 PHP、MySQL/MariaDB 等）。不過，使用 Kinsta 這樣的 WordPress 託管服務可以讓您使用簡單的介面啟動 WordPress 網站，從而大大簡化 WordPress 網站的管理。

如何建立靜態網站

如果你認為建立靜態網站的優勢可能會讓它成為你下一個專案的理想選擇，這裡有一份關於如何建立靜態網站的快速指南。

我們有意將本指南保持在較高水平，這樣你就可以根據自己的使用情況進行調整。

1. 選擇靜態網站生成器或內容管理系統

首先，選擇一個靜態網站生成器或一個可以部署靜態網站的內容管理系統。

如果你有技術知識，可以使用自己的 HTML、CSS 和 JavaScript 以及最喜歡的 HTML 編輯軟體，從頭開始建立一個靜態網站。不過，隨著網站規模的擴大，這種方法很快就會變得臃腫不堪，而且您可能不具備從頭開始建立網站的技術知識。

靜態網站生成器為您提供了一種更簡單的方式來構建靜態網站。它還能讓您在將來更新網站時更加輕鬆。

靜態網站生成器可以幫助您部署新版本的所有網站檔案，以反映所做的更改，而無需在做出更改（如在導航選單中新增新專案）時編輯每一個 HTML 檔案。

以下是一些常用的靜態網站生成器，你可以考慮使用：

• Jekyll – 最受歡迎的開源靜態網站生成器之一。可用於各種網站並支援部落格。我們有一整篇文章介紹如何使用 Jekyll 建立靜態網站。
• Hugo – 另一種流行的開源生成器，適用於各種不同型別的網站。我們也有一篇關於如何使用 Hugo 建立靜態網站的文章。
• WordPress + 靜態網站生成器外掛 – 您可以使用 WordPress 構建網站，然後使用您喜歡的靜態網站生成器外掛將其部署為靜態 HTML 網站。

如需更多選擇，請檢視我們的文章，瞭解頂級靜態網站生成器。

2. 構建您的網站

一旦選擇了自己喜歡的工具，就可以使用該工具來建立網站。

具體如何操作取決於您選擇的工具，因此沒有適用於所有靜態網站生成器的單一指南。

如果你來自 WordPress 背景，那麼使用 WordPress 本身作為靜態網站生成器是最簡單的方法之一，你可以用它來建立你的第一個靜態網站。

下面是一個使用 WordPress 建立靜態網站的示例：

1. 使用本地環境工具建立本地 WordPress 網站。這並不是訪客真正與之互動的網站-它只是你管理內容和網站設計的地方。
2. 使用您最喜歡的設計工具設定網站。您可以使用 WordPress 原生區塊編輯器，也可以使用您喜歡的頁面生成器外掛，如 Elementor 或 Divi。
3. 安裝靜態網站生成器外掛。這是您在下一步部署靜態網站時使用的外掛。流行的選擇包括 Simply Static 和 WP2Static，不過也有一些新的替代品，如 Staatic。

Simply Static 外掛可讓您將 WordPress 用作靜態網站生成器。

另一種方法是使用 GraphQL 將 WordPress 與 Gatsby 配對。

3. 部署您的網站

建立網站後，您需要將其部署到託管服務中。從本質上講，這意味著您需要一種方法，將靜態 HTML 檔案從您的電腦傳輸到網際網路。

這裡有幾種不同的方法。

一種方法是使用靜態網站託管服務。通過這種託管解決方案，您可以毫不費力地通過首選的 Git 提供商設定自動和持續的部署。

例如，向 GitHub 推送新檔案可能會自動觸發這樣一個流程：

1. 當您在 GitHub 上推送更改時，它會自動通知您的伺服器，例如 Kinsta。
2. 伺服器從 GitHub 獲取最新檔案，並執行靜態網站的構建命令。
3. 伺服器會將檔案傳輸到實時網站環境中。

另一種基於 Git 的方法是使用 GitHub 頁面建立靜態網站。

另一種方法是直接部署到 CDN，而不是使用任何型別的網站伺服器。這種方法看起來是這樣的：

1. 您可以將網站檔案上傳到某種線上儲存環境。許多工具都可以自動或通過命令列完成這一操作。
2. 您可以設定一個 CDN 從該儲存中提取檔案。
3. 當您向儲存空間釋出新檔案時，CDN 就會自動開始提取這些新檔案。

如果你的工具沒有提供任何簡化網站部署的特殊功能，你就需要這樣做：

1. 生成網站的靜態 HTML 檔案。
2. 手動將這些檔案上傳到靜態網站託管服務。

下一個專案應該使用靜態網站嗎？

靜態網站是否適合你的下一個專案，取決於網站的目的和你自己的知識水平。

因此，這裡沒有一個放之四海而皆準的答案。

相反，讓我們來看看在哪些情況下使用靜態網站是合理的，哪些情況下是不合理的。

靜態網站的合理性

靜態網站最適用於所有訪問者都看到相同內容且內容不會經常變化的網站，尤其適用於內容不多的小型網站。

以下是一些可以很好地使用靜態方法的網站型別：

• 作品集網站
• 基本業務手冊網站
• 簡歷網站
• 不經常釋出的簡單部落格
• 文件內容/知識庫
• 登陸頁面

這些型別的網站能夠實現靜態方法的所有優點，但很少有折衷。

例如，您不太可能需要對基本的商業宣傳冊網站進行個性化處理，因此使用靜態方法不會 “丟失” 任何功能。

同樣，這類網站也不會經常變化，因此您不必擔心經常重新部署靜態頁面。

動態網站的合理性

首先，對於需要個性化網站體驗的情況，如電子商務商店、會員制網站、線上課程等，動態網站通常是最佳選擇。

基本上，如果你希望使用者能在一個頁面上看到不同的內容，你通常希望使用動態網站。雖然也有辦法使用靜態網站來構建上述型別的網站，但你必須做出的取捨通常並不值得，這就是為什麼動態網站可能是更好的選擇。對於內容繁多的網站，尤其是有大量分類法和其他組織方法的網站，動態網站往往更有意義。

同樣，如果你經常釋出新內容，這也是使用動態網站的一個原因。

例如，如果您的個人部落格每兩週只發布一篇新文章，那麼靜態網站可能還不錯，但如果您的部落格以盈利為目的，每天釋出五篇新文章，那麼動態網站可能會更好。

小結

簡而言之，靜態網站是一種提供固定 HTML 頁面並在客戶端進行所有處理的網站。建立靜態網站時，每個使用者在訪問頁面時都會收到相同的靜態 HTML 檔案/內容。

這種靜態網站方法越來越受歡迎，這在很大程度上要歸功於 Hugo、Jekyll、Gatsby 等靜態網站生成工具。

不過，建立靜態網站有利也有弊，因此並不是所有網站都適合採用這種方法。