Generadores de sitios web estáticos

En mi opinión, la mejor opción para un sitio web actualmente.

  • Rápidos 🏎
  • Máxima personalización ✍🏻
  • 100% Seguro 🔒
  • Gran escalabilidad 📈

Sitios Estáticos vs Otros (WordPress)

Antes de irnos al fondo del tema es importante saber qué beneficios nos trae respecto a otras opciones.

La mayoría de empresas de diseño web al final obtan por hacer desarrollo con WordPress a pesar de sus múltiples defectos, es comprensible porque hacer una web a puro código lleva demasiado tiempo para proyectos que no necesitaban tanto esfuerzo, la mayoría de veces sólo es una Landing Page, un blog o un ecommerce.

Personalmente como desarrollador no me gustaba usar WordPress por estas 40 razones. Sin embargo debía hacerlo por el tema de costo y beneficio de tiempo, el producto era de menor calidad pero ahorraba muchísimo en tiempo.
Mi sueño era encontrar una forma de hacer sitios web de la misma calidad y personalización que me permite el código puro, pero también que me permita ahorrar tiempo como WordPress, dime ¿Cómo buscas eso en Google? jajaja😢 no fue sencillo pero lo encontré, se llaman "Generadores de Sitios Estáticos".

Beneficios:

  • Concentrarse sólo en la Interfaz FrontEnd

\ Gracias a los sitios estáticos te olvidas de temas de Backend, base de datos, Deploy y te concentras directamente en el frontEnd que es la que está conectada directamente con tu modelo de negocios, con tu esencia, o con tu lo que sea que haga que quieras tener un sitio web, es decir, te concentras en lo que importa.

  • Rápido:

\ resulta que son los sitios web más rápidos que existen en tiempo de carga y navegación

  • Seguro:

\ por razones que veremos más adelante, un sitio web estático no puede ser hackeado

  • Alta personalización:

\ Literalmente puedes personalizar absolutamente todo, intenta poner esto en WordPress, dolor de cabeza. De hecho este sitio web que ves ahora mismo es estático y este nivel de personalización es imposible en cualquier plataforma.

  • Fácil desarrollo

\ Es posible hacerlo en un día

  • Deploy súper sencillo

\ El deploy es básicamente "publicar un sitio en Internet" y cuando haces las cosas a código no es nada sencillo, hay personas especializadas en esto DevOps los sitios estáticos son demasiado senciilo de publicar, hasta me sale una lágrima de lo fácil que es 😢, yo sufrí mucho para aprender Deploy.
En sitios estáticos tienes opciones como github pages, surge.sh, now y Netlify. Todas gratis, para que te hagas una idea, para publicar con NOW, literalmente sólo debes escribir la palabra "now" en tu terminal.

  • Hosting económicos o gratis

\ Hay muchas opciones de Hosting de sitios estáticos muy baratos o incluso gratis, yo uso Netlify que es absurdamente fácil y además es gratis hasta 100GB de ancho de banda cada mes, es decir que soporta hasta 50 mil visitantes al sitio cada mes, en la mayoría de casos es más que suficiente

Desventajas:

Nada es perfecto, pero esto casi, hay dos principales desventajas que probablemente el tiempo lo solucionen y que no son del todo desventajas

  • Debes saber programar

✋🏻 ¡Alto! aún no te vayas, como había dicho con el tiempo esto cambiará, actualmente hay opciones para hacer sitios estáticos sin una línea de código, aquí te enseño una, no conozco otras pero seguro existen y existirán cada vez más. Estas opciones sin código reducen el nivel de personalización pero aumentan drásticamente el tiempo de desarrollo a incluso 18 minutos (Sí, me he cronometrado ⏰)

  • Bajo nivel de plantillas

De hecho hay bastantes plantillas pero nada comparado con WordPress, muchas de las plantillas serán suficientes y además que son muy bonitas, pero hay algunas que son horrendas 🤮, además de que las plantillas realmente no son tan fáciles de instalar, muchas veces debes configurarla, yo realmente no las uso, hago mis propias plantillas que las uso reiteradamente para mis clientes.


Sin embargo creo que el futuro de los sitios estáticos no son las plantillas, si no los Kits de UI, que son elementos de un sitio web que puedes armar (Botones, menús, Sliders, Tarjetas, etc), esto permite un nivel de personalización muy alto y ahorras mucho tiempo en diseño. Yo uso Material-Ui Y si quieres algo más Premium 💎 Checa a Creative Tim

¿Qué son los sitios web estáticos?

Repuesta corta (y algo aburrida):

Un sitio web estático sólo consta del FrontEnd y no del Backend.

Si se quiere compensar la falta de Backend (que es donde está la base de datos, el análisis de información, CMS, CRM, etc), se utiliza servicios o micro-servicios. En algunas ocasiones no es necesario ni un Backend y tampoco un servicio externo.

Respuesta Larga (también algo aburrida):

Para entender esto necesitamos algunos conceptos básicos, tranquile, vamos por partes e intentaré ser lo más claro posible, estamos aquí para aprender 😌.

Supongamos que tenemos un Ecommerce de vender Panes 🥖🍞, más allá del modelo de negocios cuestionable de este sitio web pensemos en cómo está hecho por dentro.

FrontEnd y BackEnd

Un sitio web normal está conformado por FrontEnd y BackEnd, el Frontend es la parte visible, la que ve el usuario 📱👀, es la fachada, el frontend le pide información al Backend que es quién está detrás de todo administrando, analizando, agregando, modificando o eliminando datos.
En otras palabras, el frontEnd es como el control remoto de una televisión, con sus botones, y el backend es todo lo que ocurre al presionar dichos botones (más o menos).

Como podemos observar en la imagen el FrontEnd le pide información al backend, y en esos milisegundos (aveces segundos cuando el Internet está lento 🐢), muestra un símbolo de "cargando...".

Diálogo:

FrontEnd:

Wacho el usuario acaba de entrar a la página y necesito mostrar la información 💁‍♂

BackEnd:

Dale, dame un momento, mientras tanto muéstrale un "cargando..." pa' que no se aburra (o para que se desespere) 👌

Una vez cargado el sitio web tenemos nuestro producto, un bello PAN 🥖🥖

En un sitio web estático esta relación tradicional de un backend y un frontend se rompe.

Un sitio web estático sólo es el FrontEnd, es decir que no hay información que deba solicitar de un backend, la información simplemente ya está ahí.

Sitios web como Facebook no podrían hacer esto porque tienen muchísimo contenido que se actualiza a cada segundo y que es diferente para cada usuario, necesitan de un Backend propio que pida esa información de forma constante. Pero la mayoría de sitios web no actualizan la información cada segundo, la mayoría cambia algo 3 veces por semana, y en realidad hay sitios de Landing Page que no se cambian de información en meses. Entonces no necesitamos de un Backend, podemos simplemente poner la información en el FrontEnd.

⏱ Velocidad

Al no tener un Backend no hay este tiempo de espera de la información, la info sencillamente ya está ahí. Además los sitios estáticos son extremadamente livianos, y al ser estáticos aprovechan al máximo los CDN.

Los sitios web estáticos son considerados los más rápidos que hay.

🔐 Seguridad

Son 100% seguros por una razón, no hay nada que Hackear, si no existe un Backend o una Base de datos lo único que se puede robar es la información que ya está pública, no puedes hackear algo que no existe.

¿Cómo funciona un generador de sitios estáticos?

Esta parte es importante entenderla, pon atención 👨‍🏫

Sitio Web Normal:

  • Deploy (El sitio ya está en internet)
  • Cambios en la base de datos (CMS)
  • Los cambios se ven en el FrontEnd inmediatamente

Los sitios web normales para mostrar nuevo contenido no hacen cambios en el código del FrontEnd, lo que sucede es que el FrontEnd sólo extrae lo que la base de datos tiene al momento de ingresar al sitio web.

Sitio web estático

  • Deploy (El sitio ya está en internet)
  • Cambios de alguna fuente de información (API, CMS, archivos Markdown, CSV, etc)
  • Re-construcción del código del sitio web con la nueva información
  • Deploy (El sitio re-construido debe reemplazar al anterior)
  • Los cambios se ven en el FrontEnd después de este proceso

En esta situación nosotros cambiamos algo de alguna fuente de datos, por ejemplo un archivo CSV en excel, y el sitio debe actualizar el código y volver a publicarse. ¿Espera, me estás diciendo que debo cambiar el código yo mismo y volver a publicar todo a mano cada vez que actualizo algo?, no jajaja, sería horrible si fuera así, si bien es posible hacerlo a mano (tampoco es tan complicado) normalmente todo es automático, basta con que hagas algún cambio y todo se hace solo.

Desde nuestra perspectiva de humanos un sitio web estático parecerá un sitio web normal, pero es importante saber cómo está hecho por dentro, ya que justamente el beneficio de esto es que la información ya está ahí, directamente en el FronEnd.

¿Qué generadores de sitios estáticos existen?

Existen varias opciones pero hay 3 principales

Personalmente creo que Gatsby es lo mejor por sus múltiples plugins y comunidad, eso sí, debes saber mucho sobre React.js.

Hay una opción que es cero código chécalo

¿Cómo vivir sin Backend?

Ok muy bonito, pero sin Backend ¿Cómo actualizamos el contenido? y además hay muchas funcionalidades que sólo lo hace el backend como el manejo de formularios, manejo de inventario, pedidos de productos, etc.

Vale, la respuesta es simple, se hace a través de Servicios y Micro Servicios.

Para cada necesidad hay un servicio que lo resuelve, un ejemplo es Google Maps 📍 ¿te imaginas hacer todo el sistema satelital 🛰 que tiene Google Maps? Puedes insertar fácilmente una ubicación o una ruta en tu sitio web porque Google da ese servicio. Es lo mismo con todo.

¿Necesitas un CMS?

una opción gratuita y muy buena es Netlify CMS, más allá de un CMS, puedes hacer que el sitio sea configurable, cambiar los colores, el estilo del sitio web, las imágenes, realmente puedes configurarlo a tu antojo y llevarlo más allá de un CMS. Un ejemplo es que estoy trabajando en un Model 3D para un sitio web, el modelo 3D es una persona sentada trabajando en su laptop, con NetlifyCMS haré que se pueda cambiar el género, el color de pelo, el color de piel, el peinado, etc, etc.

Otra opción es Contenful, a diferencia de Netlify CMS esta es la plataforma de un tercero, por lo cuál pagas una suscripción mensual.

¿Necesitas un Ecommerce?

Yo amo Moltin 😍 Tiene un SDK y una API muy buena y muy rápida, te da un dashboard para administrar todo tu Ecommerce, pero es tan genial que si quieres te puedes hacer tu propio dashboard, incluso una aplicación, es más, se me ocurre que puedas conectar una API de whatsapp o de Facebook para que puedas recibir tus pedidos como si fuera un chat, también que los usuarios puedan hacer su pedido por chat, o volverse loco e instalar una pantalla de esas de leds en tu oficina y cada que llegue un pedido suene un sonido y que en la pantalla muestre el pedido, ok me fuí del tema 😂.

Otro ejemplo, si yo quisiera poner Comentarios a este Blog necesitaría de un Backend que guarde los comentarios y los administre, pero NO, uso Disqus que me permite fácilmente poner comentarios en cualquier contenido que haga.

¿Servicios y Micro-Servicios? 🤔

Quizá ya te diste cuenta que realmente si existe un Backend, sólo que no es tuyo, es el servicio de un tercero que puedes utilizar. Realmente es como si tuvieras varios Backends, para cada necesidad que tengas, bienvenido al mundo de los Micro Servicios (haré un blog de eso en otro momento).