Tecnología
7 minutos
Tenemos el placer de lanzar nuestra nueva web oficial en la que encontrarás la información más destacada del día a día de la organización, su actividad, los servicios que ofrece y la relación con sus socios y clientes. Por ello te animamos a seguirnos a través de nuestros diferentes canales de redes sociales, (Facebook, Twitter, LinkedIn) y en nuestro blog.
Cuando nos planteamos la migración de la web desde WordPress, una de las metas era mejorar considerablemente la velocidad de la misma, sobre todo en usuarios móviles, ya que los resultados no eran los deseables en el año 2020 y los datos que obteníamos de PageRank eran bastante deficientes.
Como empresa de tecnología, exploramos las posibilidades y finalmente nos decidimos por desarrollar una web estática en Gatsby, como bien resumen en la web "Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps".
Tecnología web moderna sin dolores de cabeza
Con las últimas tecnologías web: React.js, Webpack, JavaScript moderno, CSS y más, todo configurado y esperando para empezar.
Con tus propios datos
El gran ecosistema de complementos de datos de Gatsby permite crear sitios con los datos desde una o varias fuentes, CMS Headless como Contentful que es el que nosotros seleccionamos para el blog, servicios SaaS, API, bases de datos, tu propio sistema de archivos y más directamente en las propias páginas usando GraphQL.
Escala a todo internet
Nos olvidamos de implementaciones complicadas con bases de datos y servidores con sus costos de instalación, que requieren mucho tiempo, mantenimiento y problemas de escalado. Gatsby.js construye tu web como archivos "estáticos".
Un sitio web para el futuro
El futuro de la web es móvil, JavaScript y API. Cada sitio web es una aplicación web y cada aplicación web es un sitio web. Gatsby.js es el marco de JavaScript universal que podría tener más futuro.
Aplicaciones web progresivas
Gatsby.js es un generador PWA (Progressive Web App). Obtiene el código y los datos listos para usar. Gatsby carga solo HTML, CSS, datos y JavaScript críticos para que el sitio web se cargue lo más rápido posible. Una vez cargado, Gatsby obtiene los recursos necesarios para otras páginas, por lo que hacer clic en el sitio es increíblemente rápido.
Velocidad
Gatsby.js crea el sitio web más rápido posible. En lugar de esperar para generar páginas cuando se le solicite, pre compila las páginas que una vez subidas a los servidores, estarán listas para ser entregadas instantáneamente a los usuarios donde sea que estén.
Bajo Coste
Los costes con la arquitectura que comentaremos más adelante son extremadamente bajos, anualmente tendremos:
dominio: 10 €/año
S3 / Cloudfront: 40€/año
Gatsby / AWS Code Commit: Gratis
Total: 50€ al año
¿Por qué deberías tener un sitio estático?
Una página estática es todo lo opuesto a una página dinámica, esto quiere decir, que no interactúa con bases de datos; es igual para todos los usuarios y cada página existe en un archivo separado a diferencia de los sitios dinámicos.
Un sitio estático tiene sus ventajas en cuanto a: dinero, tiempo, confiabilidad y seguridad.
Dinero. Hospedar un sitio estático es mucho más barato que uno dinámico.
Tiempo. Configurar, escalar y asegurar nuestro sitio dinámico puede ser una tarea que lleve mucho tiempo.
Seguridad. Comparado con un Drupal o Wordpress, es mucho más fácil de asegurar.( dice que más o menos 70% de los sitios con Wordpress corren el riesgo de ser hackeados por falta de mantenimiento y actualizaciones)
¿Qué es Gatsby?
Gatsby es otro generador de sitios estáticos como: Hugo, Jekyll, Pelican, entre otros. Lo hace especial el estar basado en React y contar con soporte para multitud de formatos de entrada de contenido. Además, utiliza los últimos estándares web y se basa en tecnologías como: ReactJS, Webpack, GraphQL, ES6 + JavaScript, CSS.
¿Por qué Gatsby?
Bueno, porque está construido sobre React, esto quiere decir todos los beneficios de React + PWA + PRPL.
El futuro de la web es móvil, Javascript y APIs. Gatsby quiere ser el framework universal de JavaScript que tiene la visión de que todo el “sitio web es una aplicación web y toda aplicación web es un sitio web”. Además, Gatsby.js es un generador de PWAs estáticas, que gracias a su funcionamiento nativo, permite una carga óptima y una navegación muy rápida.
¿Qué ventajas tengo?
Además de las ventajas ya mencionadas tenemos:
Los sitios estáticos son rápidos, pues no consultan nada a la base de datos, además ya están renderizados y listos para cuando el usuario los necesite, básicamente son instantáneos, no ejecutan ningún código del lado del servidor.
Facilidad al hospedarlos, prácticamente sin configuración.
Estabilidad, son mucho más fáciles de escalar, al no tener que consultar una base de datos; solo es servir HTML ,JS, CSS.
Los buscadores tienden a dar más visibilidad a los sitios rápidos y con un buen SEO, tarea para la que Gatsby también está preparado y es fácil de implementar.
Para desarrollar la web en Gatsby se requieren conocimientos de React, HTML, GraphQL y CSS.
¿Cómo la alojamos?
El proceso consta de estos pasos:
Generación de la web (gatsby build)
Web servida con seguridad
Redirijimos el tráfico de qualoom.es a www.qualoom.es
Redirigimos el tráfico de http a https
Modificación y despliegue automático del sitio web cuando se introduce un cambio
Invalidamos caché de CDN en la implementación
Como partners de AWS todo lo alojaremos en su nube haciendo uso de los servicios siguientes:
Generador de web estática:Gatsby
Alojamiento: AWS S3
Gestión de dominio:AWS Route 53
Certificado TLS AWS Certificate Manager
CDN: AWS Cloudfront
Repositorio de Código: AWS Codecommit
Continuous Deployment: Travis
El proceso continuo sería:
El contenido del sitio web se genera y se carga en el bucket de S3
CloudFront invalida la memoria caché anterior y almacena en caché los nuevos contenidos del bucket de S3
El usuario solicita la web
El registro de AWS Route 53 A coincide con esta solicitud y apunta a la distribución de CloudFront vinculada
La distribución en la nube permite una conexión segura y sirve una versión en caché del contenido del bucket de S3
Sin más nos despedimos, contentos con la nueva web y su cambio de prestaciones:
