添加一个静态文件网站

ServBay 是一款强大的本地 Web 开发环境工具，支持多种语言和数据库。除了动态网站，ServBay 也非常适合用于托管和测试静态文件网站，例如使用 HTML、CSS 和 JavaScript 构建的简单网页或前端应用。

本文将指导您如何在 ServBay 中添加和配置一个静态文件网站。

概述

静态文件网站由 Web 服务器直接提供服务的文件组成，不涉及服务器端脚本（如 PHP、Node.js、Python 等）的执行。这类网站通常包含 HTML 页面、CSS 样式表、JavaScript 文件、图片、字体等资源。

使用 ServBay 来托管本地静态网站，可以方便地进行开发、调试和测试，特别是在需要模拟生产环境的域名访问、HTTPS 连接或测试跨域资源共享 (CORS) 等场景下。

应用场景

开发和测试纯前端项目 (HTML/CSS/JS)。
托管静态文档或博客网站。
测试不同 Web 服务器（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-Hans">
<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/。
- 解释: 路径指定了 Web 服务器（Caddy 或 Nginx）查找网站文件的根目录，也称为 Document Root。当您访问 http://static.servbay.demo/ 时，Web 服务器会首先在这个目录下查找 index.html 或其他默认首页文件。请确保路径指向的是包含您网站文件的目录，而不是某个具体的文件（如 index.html）。
端口 (Port): 通常保持默认即可。HTTP 默认端口是 80，HTTPS 默认端口是 443。如果您需要为这个网站指定一个非标准的端口，可以在这里修改。
Web 服务器 (Web Server): 选择您希望使用的 Web 服务器。对于静态网站，Caddy 和 Nginx 都是 excellent 的选择。
- 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 重新加载 Web 服务器（Caddy 或 Nginx）的配置文件，使新的网站配置生效。这是非常关键的一步，否则您刚刚添加的网站将无法访问。

验证设置

配置并应用更改后，打开您的 Web 浏览器，在地址栏输入您配置的域名（例如 http://static.servbay.demo 或 https://static.servbay.demo 如果启用了 SSL）并访问。

如果一切设置正确，您应该能看到您的静态网站内容，例如我们在示例中创建的 index.html 页面。

注意事项

确保您配置的路径是正确的网站文件根目录。
每次添加、修改或删除网站配置后，都必须点击 应用更改 按钮才能生效。
对于静态网站，将服务器端语言（PHP, Node.js 等）设置为 None 是最佳实践，可以避免不必要的资源消耗和潜在的安全风险。
如果遇到访问问题，请检查 ServBay 是否正在运行，检查 Web 服务器（Caddy/Nginx）的状态，并确认您在浏览器中输入的域名与 ServBay 中配置的域名完全一致。

常见问题解答 (FAQ)

Q: 我访问配置的域名时显示“无法访问此网站”或“找不到服务器”怎么办？

确保 ServBay 应用程序正在运行。
确保您在 ServBay 中点击了 应用更改 按钮。
检查您在浏览器中输入的域名是否与 ServBay 配置的域名完全一致（包括是否使用了 http:// 或 https://）。
确认您配置的路径是否正确指向了您的网站文件目录。
检查 ServBay 的日志文件，可能会有更详细的错误信息。

Q: 为什么我配置了网站路径，但访问时显示目录列表而不是我的 index.html 文件？

A: 这通常是因为您的网站根目录中没有找到默认的首页文件（如 index.html）。请确保您的网站根目录中存在一个名为 index.html（或其他 Web 服务器配置的默认文件）的文件，并且文件名和扩展名完全正确（注意区分大小写）。

Q: 我可以为静态网站配置 HTTPS 吗？

A: 是的，您可以在 ServBay 的网站配置中勾选 SSL 选项。ServBay 会使用其内置的 ServBay User CA 为您的本地域名生成并信任 SSL 证书，从而实现本地 HTTPS 访问。

总结

通过 ServBay，您可以轻松地在本地添加和管理静态文件网站，无论是简单的 HTML 页面还是复杂的前端应用构建产物。利用 ServBay 的网站管理功能、本地域名解析和 SSL 支持，您可以更高效地进行前端开发和测试工作。

添加一个静态文件网站 ​

概述 ​

应用场景 ​

前提 ​

操作步骤 ​

步骤 1: 准备您的网站文件 ​

步骤 2: 在 ServBay 中添加网站 ​

步骤 3: 配置网站设置 ​

步骤 4: 保存并应用更改 ​

验证设置 ​

注意事项 ​

常见问题解答 (FAQ) ​

总结 ​