Cuando la «World Wide Web» se dio a conocer al público por primera vez en 1991, todos los sitios web eran colecciones de documentos HTML estáticos — cada archivo contenía el marcado necesario para representar una página completa en un navegador web. Casi inmediatamente, los desarrolladores pioneros de la web se pusieron a trabajar en formas de generar sitios web dinámicamente, ensamblados por código que se ejecutaba en servidores web y extraía contenido de sistemas de bases de datos.

Aunque los sitios web estáticos no desaparecieron del todo cuando los CMS se convirtieron en los predominantes, un enfoque moderno del concepto de sitio estático es ahora popular entre quienes valoran la velocidad y la seguridad.

En la plataforma de Alojamiento de Sitios Estáticos de Kinsta, los sitios web son rápidos y seguros. También son gratis.

Echemos un vistazo más de cerca a los sitios estáticos y a cómo Kinsta puede ayudarte a desplegar el tuyo en servidores edge de todo el mundo.

¿Es Adecuado un Sitio Estático para Tu Proyecto Web?

Un sitio estático sirve archivos HTML, CSS, JavaScript y multimedia preconstruidos.

«La ventaja de tener contenido estático es que es rápido y eficaz», dice Michael Fuller, desarrollador de JavaScript en Kinsta y miembro del equipo que ayudó a lanzar la plataforma de Alojamiento de Sitios Estáticos de Kinsta. «En lugar de que el servidor tenga que construir la página hablando con la base de datos, simplemente envía a los usuarios tus archivos preelaborados»

«En lugar de crear a mano archivos estáticos por completo, existen varios generadores de sitios estáticos«, dice. «Se trata de kits que facilitan el proceso de creación y actualización de un sitio estático, convirtiendo los archivos que proporciones en un sitio web funcional».

¿Qué tipo de proyectos pueden desplegarse como sitios estáticos?

«Si no tienes páginas que requieran que alguien inicie sesión, ni base de datos ni nada que requiera contenido dinámico, entonces probablemente sea un buen candidato para ser un sitio estático», dice Fuller. «Esto puede incluir cosas como portfolios, páginas de marketing o incluso un blog si te complace escribir nuevas entradas utilizando un generador de sitios estáticos»

Y cuando un sitio no tiene un servidor o una base de datos a la que conectarse, ofrece menos vías para las brechas de seguridad.

«Para casos más avanzados, puedes tener un enfoque mixto», dice Fuller. «Puedes crear un sitio estático que utilice un framework JavaScript para hablar con un servidor administrado por separado. De este modo, obtienes las ventajas de velocidad en los tiempos de carga iniciales, combinadas con la flexibilidad de un sitio dinámico.»

Visión General del Alojamiento de Sitios Estáticos en Kinsta

Esto es lo que obtienes gratis en la plataforma de Alojamiento de Sitios Estáticos de Kinsta:

  • 100 sitios estáticos por empresa
  • 1 construcción simultánea por sitio
  • 1 GB de tamaño de imagen de construcción por sitio
  • 600 minutos de construcción al mes por empresa
  • 100 GB de ancho de banda al mes por empresa

Y, al igual que con las plataformas de Alojamiento de Aplicaciones y Alojamiento Administrado de WordPress de Kinsta, hay certificados SSL gratuitos, compatibilidad con nombres de dominio personalizados y una API para la gestión del sitio opcional.

Kinsta construye y envía el contenido de los sitios estáticos a los 260+ centros de datos de la red global Cloudflare, la misma plataforma que respalda la CDN de Kinsta y la caché edge para los sitios de WordPress.

Desplegar un Sitio Estático en Kinsta

El primer paso para desplegar un sitio estático en Kinsta es conectar tu alojamiento Git preferido a tu cuenta en MyKinsta.

«Actualmente somos compatibles con tres de los principales proveedores de Git: BitBucket, GitHub y GitLab«, dice Fuller. «Esto significa que, además de las ventajas de que sirvamos tu sitio, puedes utilizar sus herramientas y control de versiones»

Alojamiento de Sitios Estáticos conecta al proveedor git
Elegir un proveedor de Git en MyKinsta.

Tras autorizar el acceso de MyKinsta a tu proveedor de Git, puedes empezar a añadir tu primer sitio estático seleccionando su repositorio y rama:

Añadir Alojamiento de Sitio Estático en MyKinsta
Añadir un sitio estático en MyKinsta.

Arriba, hemos seleccionado Despliegue automático al commit, lo que significa que Kinsta volverá a desplegar el sitio cuando los cambios sean enviados a la rama en el host Git.

A continuación, MyKinsta intentará determinar los ajustes de construcción necesarios para tu proyecto:

Añadir detalles del Alojamiento de Sitios Estáticos en MyKinsta
Ajustes de construcción detectados para un proyecto que utiliza Nuxt.js para generar un sitio estático.

«Si somos capaces de detectar el generador y el gestor de paquetes que utilizas, los rellenaremos previamente con las convenciones estándar utilizadas para ellos», dice Fuller. «Por ejemplo, el comando para las construcciones impulsadas por Node.js suele ser yarn build o npm run build, y el directorio de publicación suele ser algo así como build, dist, public o out»

«También puedes especificar tus propias variables de entorno si tu proceso de contrucción hace uso de ellas»

«Para la versión inicial del Alojamiento de Sitios Estáticos, sólo soportamos Node.js para construir sitios», dice Fuller, «pero estamos trabajando para ofrecerte más plataformas en el futuro».

Sin embargo, aún puedes desplegar muchos sitios estáticos que no dependan de herramientas Node.js para su construcción. A modo de ejemplo, hemos descrito cómo desplegar un sitio Jekyll y un sitio Hugo — ninguno de los cuales se construye con Node.js. En ambos casos, los activos del sitio web se construyen fuera de la plataforma Kinsta y luego se añaden a una carpeta o rama en un repositorio Git para su despliegue como sitio estático.

También puedes desplegar activos estáticos que no tengan ningún paso de construcción, por ejemplo, sitios HTML simples.

«Si no utilizas un generador, no es necesario especificar ningún comando de construcción y asumimos que tu repositorio contiene archivos ya creados», dice Fuller.

Una vez que se activa un despliegue, se añade a la cola de construcción del sitio.

«Cuando se inicia el despliegue, creamos una instancia de construcción en Google Cloud Platform y extraemos el código de tu repositorio», dice Fuller. «Si se especificó un comando de construcción, utilizamos una imagen basada en tu plataforma especificada — por ahora Node.js — para ejecutar ese comando. Después, comprobamos el tamaño de archivo de todo lo que hay en el directorio de publicación para confirmar que está dentro de nuestros límites.»

«El paso final es la subida, donde enviamos tus archivos a un bucket R2 de Cloudflare»

Detalles del Alojamiento de Sitio Estático en MyKinsta
Detalles del nuevo despliegue de sitios estáticos.

Maximizar la Velocidad con Despliegues Incrementales

El proceso de implementación del alojamiento de sitios estáticos optimiza los tiempos de construcción subiendo a los servidores de Cloudflare sólo los archivos que han cambiado realmente.

«Conservamos los archivos cargados previamente en varios despliegues, de modo que si decides volver a desplegar una versión anterior, el número de archivos que hay que volver a cargar es mínimo o nulo», afirma Fuller. «Para ello, renombramos los archivos con el valor hash de su contenido y mantenemos un registro de las rutas originales. Las almacenamos en un archivo de mapa para ese despliegue, con la ruta como clave y el nuevo nombre como valor»

«Cuando se envía una petición al sitio, utilizamos el mapa del despliegue actual para dirigirla a la versión correcta del archivo»

Infraestructura de Alojamiento de Sitios Estáticos
La infraestructura que hay detrás del alojamiento de sitios estáticos de Kinsta.

Resumen

La plataforma de Alojamiento de Sitios Estáticos de Kinsta ofrece una entrega de contenidos ultrarrápida en una red de servidores de primera clase respaldada por el panel de control MyKinsta, que facilita el despliegue.

Y todo es gratis.

Ponte en marcha rápidamente con el Alojamiento de Sitios Estáticos en Kinsta consultando nuestra biblioteca de ejemplos de inicio rápido que cubren una serie de generadores de sitios estáticos. Los ejemplos incluyen repositorios Git que puedes copiar para iniciar tus propios proyectos.

Steve Bonisteel Kinsta

Steve Bonisteel is a Technical Editor at Kinsta who began his writing career as a print journalist, chasing ambulances and fire trucks. He has been covering Internet-related technology since the late 1990s.