新增一個靜態檔案網站

ServBay 是一款功能強大的本地網頁開發環境工具，支援多種程式語言與資料庫。除了動態網站外，ServBay 也非常適合用來託管及測試靜態檔案網站，例如以 HTML、CSS 和 JavaScript 所構建的簡單網頁或前端應用程式。

本篇將帶您瞭解如何在 ServBay 中新增與設定一個靜態檔案網站。

概述

靜態檔案網站是由網頁伺服器直接提供的檔案組成，不會執行伺服器端腳本（如 PHP、Node.js、Python 等）。這類網站通常包含 HTML 頁面、CSS 樣式、JavaScript 檔案、圖片、字型等資源。

採用 ServBay 來託管本地靜態網站，不僅方便開發、除錯和測試，特別適用於需要模擬正式環境的網域存取、HTTPS 連線，或測試跨域資源共享（CORS）等情境。

應用場景

開發與測試純前端專案（HTML/CSS/JS）。
託管靜態文件或部落格網站。
測試不同網頁伺服器（Caddy/Nginx）對靜態資源的回應行為。
本地模擬正式環境的網域與 HTTPS 存取。
測試前端框架（如 React, Vue, Angular）建置產物。

前提條件

您已在 macOS 系統上成功安裝並執行 ServBay。
您擁有要部署的靜態網站相關檔案。

操作步驟

請依以下步驟於 ServBay 中新增您的靜態檔案網站：

步驟 1：準備您的網站檔案

首先，請確保您的靜態網站檔案（例如 index.html、style.css、script.js 等）都集中存放在一個獨立資料夾內。

建議您將網站目錄建立於 ServBay 預設的網站根目錄 /Applications/ServBay/www 下，有助於檔案管理更加有序。例如，若想建立一個名為 my-static-site 的網站，您可以於 /Applications/ServBay/www/ 目錄下建立名為 my-static-site 的資料夾，並將所有網站檔案放進去。

bash

# 在終端機建立示範目錄
mkdir -p /Applications/ServBay/www/servbay-static-demo
cd /Applications/ServBay/www/servbay-static-demo

# 建立一個簡單的 index.html 檔案
echo '<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ServBay 靜態網站範例</title>
    <style>
        body { font-family: sans-serif; text-align: center; margin-top: 50px; }
        h1 { color: #333; }
    </style>
</head>
<body>
    <h1>恭喜您！ServBay 靜態網站設定成功！</h1>
    <p>您正透過 ServBay 存取這個本地靜態頁面。</p>
</body>
</html>' > index.html

# 您目前的檔案結構可能如下：
# /Applications/ServBay/www/servbay-static-demo/index.html

步驟 2：於 ServBay 中新增網站

開啟 ServBay 應用程式。
在左側導覽列中點擊網站（注意：舊版可能顯示為「主機」，新版已更名為「網站」）。
於網站清單介面底部點選新增按鈕，將會彈出設定視窗。

步驟 3：設定網站參數

於彈出的設定視窗中，請填寫或選擇以下資訊：

網域 (Domain)： 輸入您希望於本地訪問該網站的網域。例如建議使用 .servbay.demo 結尾的網域，例如 static.servbay.demo 或 my-static-site.servbay.demo。ServBay 會自動處理 .servbay.demo 網域的本地解析，無須另外編輯 hosts 檔案。
- 說明： 採用 .servbay.demo 網域可避免和真實線上網域衝突，同時 ServBay 的內建 DNS 解析器會確保這些網域皆指向本機。
路徑 (Path)： 點擊右側的資料夾圖示，選擇您於步驟 1 建立的網站所在目錄，例如 /Applications/ServBay/www/servbay-static-demo/。
- 說明： 路徑指定了網頁伺服器（Caddy 或 Nginx）用來尋找網站檔案的根目錄，也稱為網站根目錄（Document Root）。當您存取 http://static.servbay.demo/ 時，伺服器會先在這個目錄下尋找 index.html 或其他預設首頁檔案。請確認路徑選擇的是網站資料夾本身，而非特定單一檔案（如 index.html）。
埠號 (Port)： 通常可維持預設值。HTTP 預設埠號為 80，HTTPS 預設為 443。如需設定非標準埠可於此更改。
網頁伺服器 (Web Server)： 請選擇您欲採用的網頁伺服器。對於靜態網站，Caddy 和 Nginx 均為極佳之選。
- Caddy： 設定簡便，支援 HTTP/2 及 HTTPS 自動配置（結合 ServBay User CA），為 ServBay 預設推薦選項。
- Nginx： 效能高、設定彈性廣，廣泛應用於正式環境。
- 擇一即可。
PHP 版本 (PHP Version)： 靜態網站不需 PHP 處理，請選擇 None。
Node.js 版本 (Node.js Version)： 靜態網站不需 Node.js 處理，請選擇 None。
Python 版本 (Python Version)： 靜態網站不需 Python 處理，請選擇 None。
Go 版本 (Go Version)： 靜態網站不需 Go 處理，請選擇 None。
Java 版本 (Java Version)： 靜態網站不需 Java 處理，請選擇 None。
SSL： 若您希望於本地以 HTTPS 存取靜態網站，可勾選此選項。ServBay 會透過內建的 ServBay User CA 證書，為您自動設定本機信任的 SSL 憑證，方便測試 HTTPS 相關功能。
CORS： 若您的靜態網站需跨域資源共享（Cross-Origin Resource Sharing），如從其他本地域名載入字體或 API 資料，可勾選該選項並相應設定。ServBay 支援為網站新增 CORS 標頭。

步驟 4：儲存並套用更動

完成所有設定後，點選視窗底部的儲存按鈕。
回到 ServBay 網站清單介面，即可見到新加入的網站條目。
點擊網站清單上方的 套用更動 按鈕。
- 說明： 按下 套用更動 會使 ServBay 重新載入網頁伺服器（Caddy 或 Nginx）的設定，讓新設定立即生效。這是極為重要的步驟，否則您剛新增的網站將無法正常訪問。

驗證設定

設定並套用更動後，開啟您的網頁瀏覽器，於網址列輸入您設定的網域名稱（例如 http://static.servbay.demo 或已啟用 SSL 的 https://static.servbay.demo）進行存取。

若一切無誤，您應可看到您的靜態網站內容，例如前述範例中建立的 index.html 頁面。

注意事項

確認所設定的路徑真為正確的網站根目錄。
每次新增、修改或移除網站設定後，均需點選 套用更動 按鈕才會生效。
針對靜態網站，將伺服器端語言（PHP、Node.js 等）皆設為 None 是最佳做法，可避免不必要的資源消耗與潛在安全風險。
若遇存取問題，請確認 ServBay 是否運行中，檢查網頁伺服器（Caddy/Nginx）狀態，並確認瀏覽器中輸入的網域名稱與 ServBay 中設定的完全一致。

常見問題集 (FAQ)

Q：我訪問設定的網域時出現「無法存取此網站」或「找不到伺服器」怎麼辦？

A：

請確保 ServBay 應用程式正在運作。
請確保已於 ServBay 按下 套用更動 按鈕。
檢查您在瀏覽器中輸入的網域名稱是否與 ServBay 設定完全相符（包含是否使用 http:// 或 https://）。
確認您設定的路徑是否正確指向您的網站目錄。
請檢查 ServBay 的日誌檔案，裡面可能包含更詳細的錯誤資訊。

Q：為什麼我設定了網站路徑，但存取時顯示目錄列表而不是我的 index.html？

A：這通常因為您的網站根目錄找不到預設首頁檔案（如 index.html）所致。請確保根目錄中有一個名為 index.html（或依伺服器設定的預設檔名）之檔案，且檔名與副檔名完全正確（區分大小寫）。

Q：我可以為靜態網站設定 HTTPS 嗎？

A：可以，您可於 ServBay 的網站設定中勾選 SSL。ServBay 會利用內建的 ServBay User CA 為您的本地域名自動產生並信任 SSL 憑證，實現本地 HTTPS 存取。

小結

透過 ServBay，您能夠快速輕鬆地在本地新增與管理靜態檔案網站，無論是單純的 HTML 頁面或複雜的前端框架建置產物均適用。善用 ServBay 的網站管理、本地域名解析與 SSL 支援，將大幅提升您的前端開發與測試效率。

新增一個靜態檔案網站 ​

概述 ​

應用場景 ​

前提條件 ​

操作步驟 ​

步驟 1：準備您的網站檔案 ​

步驟 2：於 ServBay 中新增網站 ​

步驟 3：設定網站參數 ​

步驟 4：儲存並套用更動 ​

驗證設定 ​

注意事項 ​

常見問題集 (FAQ) ​

小結 ​