Cómo alojar tu sitio web estático en Kinsta.

Cómo alojar tu sitio web estático en Kinsta

Henry
Henry Jamstack

Si sos habitué de este blog (espero que lo seas), sabrás que uno de los temas sobre el cual más escribo, es el alojamiento de sitios web estáticos.


 

Esta afición, que visto desde afuera puede parecer una especie de fetiche, en realidad responde a que Tecnolocuras.com es un sitio estático, desarrollado con el CMS Publii. Por lo tanto, estoy interesado en esta tendencia que ya lleva unos años entre nosotros y que se denomina, (muy) genéricamente y con algunos matices, como Jamstack.

 

Woz

«Jamstack es un enfoque arquitectónico que desacopla la capa de experiencia web de los datos y la lógica empresarial, mejorando la flexibilidad, la escalabilidad, el rendimiento y la mantenibilidad.» https://jamstack.org

 

Kinsta: alojamiento web para tus proyectos

Kinsta es una empresa que ofrece alojamiento web para diferentes tipos de tecnología. Desde sitios desarrollados con el archi popular (¿y sobrevalorado?) WordPress, hasta sitios web estáticos, el servicio que voy a probar hoy.

El objetivo de la prueba es sencillo: ver qué tan fácil (o difícil) es desplegar un sito estático en Kinsta, usando el plan gratuito (gratis, free, 0 pesos).

Para hacer la prueba, voy a utilizar un sitio desarrollado con Publii, perezosamente denominado «collages». Es un sitio muy sencillo, con algunos artículos, imágenes y navegación entre páginas.

Empecemos.

El primer paso: crear una cuenta

Si bien es una obviedad, hay que mencionarlo: para usar Kinsta es necesario crear una cuenta. Esto no tiene mucho misterio; con que tengas un correo electrónico e ingreses una contraseña segura, ya está 👉 https://kinsta.com/signup/wp

Página de registro en Kinsta. Con un correo electrónico, y un buen password, ya es suficiente.
Página de registro en Kinsta. Con un correo electrónico y un buen password, ya es suficiente.

Otra cosa que vas a necesitar, es tener una cuenta en Github, o Bitbucket, o GitLab, dado que Kinsta se tiene que «enganchar» con un repositorio para poder desplegar el sitio.

En mi caso, voy a utilizar mi cuenta de Github, aprovechando que Publii CMS tiene integración «nativa» con esa plataforma (también se integra con GitLab).

Si vas optas por Github, podés establecer los permisos de acceso a los repositorios de forma granular:

 

Permisos solicitados por Kinsta para utilizar Github.
Permisos solicitados por Kinsta para utilizar Github.

El segundo paso: Crear el sitio estático

Con la cuenta creada y estando conectados en la plataforma, seleccionamos la opción «Create a static site».

Crear un sitio web estático en Kinsta.

El despliegue, un término bastante «simpático» para decir que vamos a subir el sitio en uno de los servidores de Kinsta, se tiene que hacer seleccionado el repositorio y el branch en donde se encuentra nuestra web:

 

Seleccionar el repositorio de Github en donde se encuentra el sitio a desplegar.
Formulario para seleccionar el repositorio de Github en donde se encuentra el sitio a desplegar.

💡 Una opción, sin duda interesante, es la posibilidad de ejecutar el despliegue de forma automática cuando hacemos un commit en el repositorio. Para hacer esto, es necesario seleccionar la opción «Automatic deployment on commit».

Ingresamos un nombre a nuestro sitio, y presionamos continuar.

Configuración del build

Kinsta te ofrece la posibilidad de configurar algunos aspectos del build, como ser:

  • Build command: Si es necesario para tu proyecto, es posible establecer un comando de compilación durante el despliegue.
  • Node version: Al invocar un comando de compilación, se puede designar la versión específica de Node.js que se utilizará.
  • Publish directory: Ruta, relativa a la raíz del repositorio, hacia el directorio que alberga los archivos del sitio web. En caso de que no se especifique un directorio, Kinsta intentará encontrar una ubicación adecuada.
  • Index file: La página de destino principal o la página web predeterminada del sitio web.
  • Error file: Si se presenta algún error, esta es la respuesta que se genera. Si es un desarrollo con Vue, React, etc., el equipo de Kinsta recomienda designar ‘index.html’ como archivo de error estándar.

También podés establecer, si las necesitas, variables de ambientes, por ejemplo: alguna API key que no quieras exponer en el código. En mi caso, no es necesario, así que estoy listo para presionar el botón «Create site» y que suceda la magia.

Formulario para configurar la configuración del build en Kinsta.
Formulario para configurar la configuración del build

En poco tiempo, el sitio estático está disponible en un subdominio.kinsta.page; podés ingresar al sitio presionando el botón «Visit Site».

Ver el sitio en Kinsta.

❕ Nota: Si queres ver los sitios alojados en *.kinsta.page, podés usar este comando de búsqueda (¡Vamos, un Google Dorks!): site:kinsta.page. Gracias a esa búsqueda, encontré el (muy interesante) blog de Dragos Balota.

El sitio collages, desplegado en los servidores de Kinsta: https://collages-0emsi.kinsta.page
El sitio collages, desplegado en los servidores de Kinsta 🌐 https://collages-0emsi.kinsta.page

El tercer paso: gestionar el sitio

Una vez que nuestro sitio se encuentra «arriba», pronto para ser visitado, vas a poder acceder a la gestión del sitio desde el panel de control.

En este dashboard están todos tus sitios. Desde acá, es posible ingresar al detalle de cada uno y monitorear los límites del servicio.

Panel de control de Kinsta.
Panel de control de Kinsta.

Agregar un dominio

Kinsta te permite asignar un dominio propio a tu sitio web, algo que se agradece y que no se ve frecuentemente en servicios similares.

Kinsta permite agregar dominios a los sitios web estáticos.
Kinsta permite agregar dominios a los sitios web estáticos.

Agregar un dominio es tan sencillo como ingresar el nombre y probar que sos el «inquilino» del mismo, incluyendo un par de registros TXT en la configuración DNS en el proveedor de tu dominio.

Pantalla para verificar un dominio en Kinsta.

✋ El procedimiento de verificación puede demorar hasta 24 horas para que se complete.

Kinsta también provee, automáticamente, un certificado SSL gratuito.

Por más información sobre cómo agregar un dominio, te recomiendo (encarecidamente), leer la documentación oficial 👉 https://kinsta.com/es/docs/anadir-dominio-a-app-sitio-estatico/

Desplegado en «el borde»

En la página en donde te dan el «discurso de ascensor» de su producto, hay una frase que llamó mi atención: «Sitios web ultrarrápidos desplegados directamente en edge». ¿Directamente en edge? ¿Qué es «el borde»?

 

«Discurso de ascensor» de Kinsta, sobre su producto gratuito de alojamiento de sitios web estáticos.

La respuesta la encontré en la vista de detalles del sitio, en donde te dicen que:

«The Edge acerca su sitio a los visitantes ofreciéndolo desde más de 260 ubicaciones. Esto da como resultado velocidades más rápidas que permiten a los visitantes llegar a su sitio de manera rápida y confiable.» .

The Edge, despliegue de sitios web estáticos con Kinsta.

Profundizando en la documentación, podemos decir que The Edge es una red global de Cloudflare que acerca geográficamente el contenido a los usuarios finales, ampliando las capacidades de la nube al colocar recursos y servicios de computación más cerca de los usuarios o dispositivos en el borde de la red. (Mientras más cerca, más rápido; se supone).

Kinsta utiliza, para el alojamiento de sitios estáticos, una red de entrega de contenido (CDN) con más de 260 ubicaciones.

Esto permite que los sitios estáticos sean servidos desde la ubicación de CDN más cercana y rápida, reduciendo la latencia, acelerando los tiempos de respuesta y mejorando el rendimiento, especialmente para sitios que requieren procesamiento en tiempo real o casi en tiempo real.

Esto, se supone, mejora la eficiencia en el manejo de altas cargas de tráfico y el nivel de disponibilidad del sitio, al tiempo que también ayuda a reducir los costos relacionados con la transferencia de datos.

¿Cuáles son las limitaciones del plan gratuito para alojar sitios estáticos?

Hacerse esta pregunta es fundamental, porque las limitaciones son las que suelen determinar si un servicio de esta naturaleza puede llegar a ser utilizado en proyectos que no sean hobbies.

En el caso de Kinsta, el alcance del servicio de alojamiento de web estáticas, está claramente documentado en la siguiente página 👉 https://kinsta.com/docs/static-site-hosting/static-site-getting-started/static-site-features

Acá te dejo un resumen de los puntos más importantes (básicamente fue copy & paste, pero bueno).

  • 100 sitios por empresa: Si superas el límite de sitios permitidos, el botón de «Add Site» se deshabilita. Se pueden eliminar sitios no utilizados para liberar espacios y añadir nuevos.
  • 1 build concurrente por sitio: Si inicias un despliegue, debes esperar a que se complete antes de iniciar otro.
  • 1 GB de tamaño por sitio: Si el sitio supera 1 GB, falla el build.
  • 600 minutos de build: Si el tiempo total de despliegue, para todos tus sitios, supera los 600 minutos en un mes, los despliegues, redespliegues y despliegues automáticos se deshabilitan por el resto del mes. Cuando se restablezca la asignación mensual, vuelve todo a la «normalidad».
  • 100 GB de ancho de banda mensuales: Si el ancho de banda total utilizado por tus sitios supera los 100 GB en un mes, los sitios se desactivarán por el resto del mes.

💹 Toda esta información, podés monitorearla desde el panel de control.

El veredicto final

Lo que me gustó:

  • Es fácil de utilizar. La UI es muy sencilla, sin muchas pretensiones más que ser funcional (y una hermosa paleta de colores).
  • Podés agregar un dominio sin costo y con SSL.
  • Limitaciones muy (muy) generosas.
  • El sitio web desplegado no muestra ninguna referencia de que estás usando un alojamiento gratuito, como si lo hace, por ejemplo: tiiny.host, que te ponen un banner en la página.

Lo que podría mejorar:

  • Extraño una opción que permita simplemente arrastrar un archivo zip que contenga el sitio y haga el despliegue ahí mismo (como lo tiene Netlify). No todo el mundo quiere tener (por las razones que sea) una cuenta de Github, GitLab o Bitbucket.

¿Qué tipos de proyectos pueden usar el alojamiento de Kinsta?

El alojamiento que ofrece Kinsta para sitios estáticos, tiene funcionalidades y características que te permiten, holgadamente, desplegar:

  • Blogs.
  • Landing page.
  • Apps web desarrolladas con frameworks como Vue.

Solo como curiosidad: te dejo los «aportes» que genera un vínculo desde el subdominio de kinsta.page:

  1. Autoridad de dominio (DA): 10.
  2. Autoridad de página (PA): 16.
Valor del vínculo del subdominio kinsta.page.

Para profundizar

Si queres aprender más, te dejo algunos vínculos:

Fin.


/ Súmate al boletín. No es gran cosa, pero es gratis 👇 /