ServBay

Español

English
简体中文
繁體中文
العربية
Português
Русский
日本語
Deutsch
Français
Tiếng Việt
Türkçe
Italiano

Español

English
简体中文
繁體中文
العربية
Português
Русский
日本語
Deutsch
Français
Tiếng Việt
Türkçe
Italiano

Appearance

Agregar un sitio web de archivos estáticos ​

ServBay es una poderosa herramienta de entorno de desarrollo web local que soporta múltiples lenguajes y bases de datos. Además de sitios dinámicos, ServBay es ideal para alojar y probar sitios estáticos, como páginas web simples o aplicaciones frontend construidas con HTML, CSS y JavaScript.

Este artículo te guiará sobre cómo agregar y configurar un sitio web de archivos estáticos en ServBay.

Descripción general ​

Un sitio web estático está compuesto por archivos que el servidor web entrega directamente, sin necesidad de ejecutar scripts del lado del servidor (como PHP, Node.js, Python, etc.). Este tipo de sitios suele incluir páginas HTML, hojas de estilo CSS, archivos JavaScript, imágenes, fuentes y otros recursos.

Alojar sitios estáticos localmente con ServBay facilita el desarrollo, depuración y pruebas, especialmente en escenarios donde necesitas simular acceso mediante dominios locales de producción, conexiones HTTPS o probar CORS (compartición de recursos entre orígenes).

Casos de uso ​

  • Desarrollo y pruebas de proyectos frontend puros (HTML/CSS/JS).
  • Alojar documentación estática o blogs.
  • Probar el comportamiento de diferentes servidores web (Caddy/Nginx) ante archivos estáticos.
  • Simular dominios locales y acceso HTTPS en el entorno de desarrollo.
  • Probar los artefactos generados por frameworks como React, Vue o Angular.

Requisitos previos ​

  • Haber instalado y ejecutado ServBay correctamente en un sistema macOS.
  • Contar con los archivos de tu sitio estático listos para desplegar.

Pasos a seguir ​

Sigue estos pasos para agregar tu sitio web estático en ServBay:

Paso 1: Prepara los archivos de tu sitio ​

Primero, asegúrate de que todos los archivos de tu sitio estático (por ejemplo, index.html, style.css, script.js, etc.) estén en una carpeta independiente.

Se recomienda crear el directorio de tu sitio dentro del directorio raíz predeterminado de ServBay /Applications/ServBay/www para mantener el orden en tu gestión de archivos. Por ejemplo, si quieres crear un sitio llamado my-static-site, podrías crear una carpeta my-static-site dentro de /Applications/ServBay/www/ y colocar ahí todos los archivos de tu sitio.

bash
# Crear un directorio de ejemplo en la terminal
mkdir -p /Applications/ServBay/www/servbay-static-demo
cd /Applications/ServBay/www/servbay-static-demo

# Crear un simple archivo 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>Ejemplo de sitio estático en ServBay</title>
    <style>
        body { font-family: sans-serif; text-align: center; margin-top: 50px; }
        h1 { color: #333; }
    </style>
</head>
<body>
    <h1>¡Felicidades! ¡La configuración del sitio estático en ServBay fue exitosa!</h1>
    <p>Estás accediendo a esta página local estática a través de ServBay.</p>
</body>
</html>' > index.html

# Ahora tu estructura de archivos probablemente será así:
# /Applications/ServBay/www/servbay-static-demo/index.html

Paso 2: Agrega el sitio en ServBay ​

  1. Abre la aplicación ServBay.
  2. En la barra de navegación lateral, haz clic en Sitios (Nota: en versiones antiguas podría aparecer como "Host", pero en la versión nueva ya aparece como "Sitios").
  3. En la parte inferior de la lista de sitios, haz clic en el botón Añadir. Se abrirá una ventana de configuración.

Paso 3: Configura la información del sitio ​

En la ventana emergente de configuración, completa o selecciona la siguiente información:

  • Dominio: Ingresa el dominio con el cual deseas acceder a este sitio localmente. Se recomienda usar un dominio que termine en .servbay.demo, como static.servbay.demo o my-static-site.servbay.demo. ServBay gestiona automáticamente la resolución local de dominios .servbay.demo, no necesitas editar el archivo hosts manualmente.
    • Explicación: Usar dominios .servbay.demo previene conflictos con dominios reales en internet, y gracias al servicio DNS interno de ServBay, estos dominios apuntan a tu propio equipo local.
  • Ruta: Haz clic en el ícono de carpeta y selecciona el directorio donde pusiste los archivos de tu sitio en el paso 1, por ejemplo, /Applications/ServBay/www/servbay-static-demo/.
    • Explicación: La Ruta indica al servidor web (Caddy o Nginx) cuál es el directorio raíz desde el que buscará archivos, también conocido como Document Root. Al acceder a http://static.servbay.demo/, el servidor inicialmente buscará index.html u otra página de inicio predeterminada en ese directorio. Asegúrate de que la ruta apunte al directorio que contiene tus archivos y no a un archivo concreto (como index.html).
  • Puerto: Generalmente puedes dejar el valor predeterminado. El puerto HTTP estándar es 80 y el de HTTPS es 443. Si necesitas usar un puerto personalizado, puedes modificarlo aquí.
  • Servidor Web: Selecciona el servidor web que deseas usar. Para sitios estáticos, Caddy y Nginx son excelentes opciones.
    • Caddy: Fácil de configurar, soporta HTTP/2 y HTTPS automáticamente (aprovechando ServBay User CA). Es la opción recomendada por ServBay.
    • Nginx: Rendimiento superior, muy flexible y ampliamente utilizado en producción.
    • Basta con elegir uno de los dos.
  • Versión de PHP: No se necesita PHP para sitios estáticos. Selecciona None.
  • Versión de Node.js: No se necesita Node.js. Selecciona None.
  • Versión de Python: No es necesario para un sitio estático. Selecciona None.
  • Versión de Go: No se requiere para sitios estáticos. Selecciona None.
  • Versión de Java: Tampoco es necesaria. Selecciona None.
  • SSL: Si deseas acceder al sitio mediante HTTPS localmente, marca esta opción. ServBay puede generar y configurar automáticamente un certificado SSL localmente confiable, usando su ServBay User CA, facilitando las pruebas de funcionalidades HTTPS.
  • CORS: Si tu sitio requiere compartir recursos entre dominios (CORS), por ejemplo para cargar fuentes o datos de una API desde otro dominio local, puedes marcar y configurar esta opción. ServBay permite configurar los encabezados CORS para cada sitio.

Paso 4: Guarda y aplica los cambios ​

  1. Una vez que hayas completado todos los campos, haz clic en el botón Guardar al fondo de la ventana.
  2. Regresa a la lista de sitios en ServBay. Verás el nuevo sitio agregado a la lista.
  3. Haz clic en el botón Aplicar cambios arriba en la lista de sitios.
    • Explicación: Al hacer clic en Aplicar cambios, ServBay recargará la configuración del servidor web (Caddy o Nginx) para activar el nuevo sitio. Este paso es esencial, de lo contrario, el sitio recién agregado no será accesible.

Validación de la configuración ​

Tras configurar y aplicar los cambios, abre tu navegador e ingresa en la barra de direcciones el dominio configurado (por ejemplo, http://static.servbay.demo o https://static.servbay.demo si activaste SSL).

Si todo está correctamente configurado, deberías ver el contenido estático de tu sitio, como la página index.html creada en el ejemplo.

Consideraciones ​

  • Asegúrate de que la ruta seleccionada sea el directorio raíz real que contiene los archivos de tu sitio.
  • Cada vez que agregues, modifiques o elimines la configuración de un sitio, debes hacer clic en el botón Aplicar cambios para que los cambios tengan efecto.
  • Para sitios estáticos, establecer los lenguajes del lado del servidor (PHP, Node.js, etc.) como None es la mejor práctica; así evitas consumos innecesarios de recursos y potenciales riesgos de seguridad.
  • Si tienes problemas de acceso, comprueba que ServBay esté ejecutándose, revisa el estado del servidor web (Caddy/Nginx) y verifica que el dominio que escribiste en el navegador coincida exactamente con el configurado en ServBay.

Preguntas frecuentes (FAQ) ​

P: ¿Qué hago si al acceder al dominio configurado aparece “No se puede acceder a este sitio” o “No se encuentra el servidor”?

R:

  1. Verifica que la aplicación ServBay esté en ejecución.
  2. Asegúrate de haber hecho clic en el botón Aplicar cambios en ServBay.
  3. Confirma que el dominio escrito en el navegador coincida exactamente (incluyendo http:// o https://) con el configurado en ServBay.
  4. Valida que la ruta apunte correctamente a la carpeta de archivos de tu sitio.
  5. Consulta los archivos de registro (logs) de ServBay para mensajes de error más detallados.

P: ¿Por qué aparece el listado de archivos al acceder en vez de mi archivo index.html?

R: Esto suele ocurrir cuando no se encuentra un archivo de inicio predeterminado (como index.html) en el directorio raíz de tu sitio. Verifica que en dicho directorio exista un archivo llamado exactamente index.html (o el que corresponda según la configuración del servidor web), prestando atención a las mayúsculas y extensión.

P: ¿Puedo configurar HTTPS para mi sitio estático?

R: Sí, puedes marcar la opción SSL en la configuración del sitio dentro de ServBay. El sistema generará y confiará en certificados SSL usando su ServBay User CA para tus dominios locales, permitiendo el acceso por HTTPS en tu entorno de desarrollo.

Resumen ​

Con ServBay, puedes agregar y administrar sitios web de archivos estáticos localmente de manera sencilla, ya sean páginas HTML simples o artefactos resultantes de compilaciones de frameworks modernos. Gracias a la gestión de sitios, resoluciones de dominio local y soporte para SSL de ServBay, tu trabajo de desarrollo y pruebas frontend será mucho más eficiente.