ServBay

English

简体中文
繁體中文
Español
العربية
Português
Русский
日本語
Deutsch
Français
Tiếng Việt
Türkçe
Italiano
हिन्दी
Bahasa Indonesia
Bahasa Melayu
Polski
Nederlands
Українська
ไทย
한국어

English

简体中文
繁體中文
Español
العربية
Português
Русский
日本語
Deutsch
Français
Tiếng Việt
Türkçe
Italiano
हिन्दी
Bahasa Indonesia
Bahasa Melayu
Polski
Nederlands
Українська
ไทย
한국어

Appearance

Adding a Static File Website ​

ServBay is a powerful local web development tool that supports multiple languages and databases. In addition to dynamic sites, ServBay is also ideal for hosting and testing static file websites, such as simple web pages or frontend applications built with HTML, CSS, and JavaScript.

This article will guide you through adding and configuring a static file website in ServBay.

Overview ​

A static file website consists of files served directly by the web server, without the execution of server-side scripts (such as PHP, Node.js, Python, etc.). Such sites typically include HTML pages, CSS stylesheets, JavaScript files, images, fonts, and other resources.

Using ServBay to host local static websites allows for convenient development, debugging, and testing, especially when you need to simulate scenarios like domain access in a production environment, HTTPS connections, or testing Cross-Origin Resource Sharing (CORS).

Use Cases ​

  • Developing and testing pure frontend projects (HTML/CSS/JS).
  • Hosting static documentation or blog sites.
  • Testing how different web servers (Caddy/Nginx) handle static resources.
  • Simulating production domains and HTTPS access locally.
  • Testing build artifacts from modern frontend frameworks like React, Vue, or Angular.

Prerequisites ​

  • You have successfully installed and are running ServBay on your macOS system.
  • You have the static website files you wish to deploy.

Steps ​

Follow these steps to add your static file website in ServBay:

Step 1: Prepare Your Website Files ​

First, make sure all your static website files (such as index.html, style.css, script.js, etc.) are collected in a dedicated folder.

It’s recommended to create your website directory under ServBay’s default web root at /Applications/ServBay/www to keep file management organized. For example, if you want to create a website called my-static-site, you can create a folder named my-static-site under /Applications/ServBay/www/ and place all your website files in it.

bash
# Create an example directory in Terminal
mkdir -p /Applications/ServBay/www/servbay-static-demo
cd /Applications/ServBay/www/servbay-static-demo

# Create a simple index.html file
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 Static Site Example</title>
    <style>
        body { font-family: sans-serif; text-align: center; margin-top: 50px; }
        h1 { color: #333; }
    </style>
</head>
<body>
    <h1>Congratulations! Your ServBay static website is configured successfully!</h1>
    <p>You are accessing this local static page via ServBay.</p>
</body>
</html>' > index.html

# Your file structure should now look like:
# /Applications/ServBay/www/servbay-static-demo/index.html

Step 2: Add a Website in ServBay ​

  1. Open the ServBay application.
  2. In the left sidebar, click Sites (Note: In older versions, this may be labeled "Hosts"; in newer versions, it’s renamed to "Sites").
  3. At the bottom of the site list interface, click the Add button. This opens a configuration window.

Step 3: Configure Website Settings ​

In the opened configuration window, fill out or select the following information:

  • Domain: Enter the domain name you want to use to access the site locally. It is recommended to use a domain ending with .servbay.demo, such as static.servbay.demo or my-static-site.servbay.demo. ServBay will automatically handle local resolution for .servbay.demo domains, so you won’t need to manually edit your hosts file.
    • Explanation: Using .servbay.demo domains avoids conflicts with real online domains, and ServBay’s built-in DNS resolver ensures these domains point to your local machine.
  • Path: Click the folder icon to the right and select the directory where you created your website files in Step 1, e.g., /Applications/ServBay/www/servbay-static-demo/.
    • Explanation: Path specifies the document root where the web server (Caddy or Nginx) looks for your site files. When you visit http://static.servbay.demo/, the server will search for index.html or another default homepage file in this directory. Make sure the path points to your website’s directory, not a specific file like index.html.
  • Port: You can usually leave this as default. The default port for HTTP is 80, and HTTPS is 443. If you need to assign a non-standard port, you can change it here.
  • Web Server: Select the web server you want to use. For static sites, both Caddy and Nginx are great choices.
    • Caddy: Simple configuration, supports HTTP/2 and automatic HTTPS (together with ServBay User CA), and is ServBay’s recommended default.
    • Nginx: High performance, flexible configuration, and widely used in production.
    • Either option will work.
  • PHP Version: Not needed for static sites—select None.
  • Node.js Version: Not needed for static sites—select None.
  • Python Version: Not needed for static sites—select None.
  • Go Version: Not needed for static sites—select None.
  • Java Version: Not needed for static sites—select None.
  • SSL: If you want to access your static site locally via HTTPS, check this option. ServBay will use its built-in ServBay User CA certificate to automatically configure a locally trusted SSL certificate, making it easy to test HTTPS functionality.
  • CORS: If your static site needs to perform Cross-Origin Resource Sharing (for example, to load fonts or API data from another local domain), check this box and configure as needed. ServBay supports configuring CORS headers for your site.

Step 4: Save and Apply Changes ​

  1. After filling in all configuration details, click Save at the bottom of the window.
  2. Return to ServBay's site list interface. You will see the new site entry you just added.
  3. Click Apply Changes at the top of the site list.
    • Explanation: Clicking Apply Changes reloads the web server (Caddy or Nginx) configuration so your new site settings take effect. This step is crucial—otherwise, the newly added site won’t be accessible.

Verifying Your Setup ​

After configuring and applying the changes, open your web browser and enter the domain you set up (for example, http://static.servbay.demo or https://static.servbay.demo if you enabled SSL) in the address bar.

If everything is set up correctly, you should see your static site content, such as the index.html page created in the example.

Tips & Reminders ​

  • Ensure the Path you set points to the correct root directory for your site files.
  • Every time you add, modify, or remove a site configuration, you must click Apply Changes for the update to take effect.
  • For static sites, setting server-side languages (PHP, Node.js, etc.) to None is best practice to avoid unnecessary resource usage and potential security risks.
  • If you encounter access issues, make sure ServBay is running, check the status of the web server (Caddy/Nginx), and ensure the domain entered in your browser exactly matches the one configured in ServBay.

Frequently Asked Questions (FAQ) ​

Q: When I visit the configured domain, I see “This site can’t be reached” or “Server not found”. What should I do?

A:

  1. Make sure the ServBay application is running.
  2. Make sure you clicked the Apply Changes button in ServBay.
  3. Double-check that the domain entered in your browser matches the configuration in ServBay (including the use of http:// or https://).
  4. Ensure the Path you configured correctly points to your site’s file directory.
  5. Check ServBay's log files for more detailed error information.

Q: Why am I seeing a directory listing instead of my index.html file when I visit my configured site?

A: This usually means there is no default homepage file (like index.html) found in your document root. Ensure that your document root contains an index.html file (or whatever default file your web server is set to serve), and double-check the file name and extension (case sensitive).

Q: Can I enable HTTPS for a static website?

A: Yes. You can check the SSL option in the ServBay site configuration. ServBay will generate and trust an SSL certificate for your local domain using its built-in ServBay User CA, enabling local HTTPS access.

Summary ​

With ServBay, you can easily add and manage static file websites on your local machine, whether it’s a simple HTML page or a complex frontend build. By taking advantage of ServBay’s site management features, local domain resolution, and SSL support, you can develop and test frontend projects more efficiently.