Crea tu sitio web desde 0 con gatsbyjs, un veloz Framework basado en React

Al momento de crear un sitio web, la primera opción que se tiene en cuenta si se quiere ahorrar tiempo y dinero es wordpress, el tan conocido CMS que es comúnmente usado para crear sitios web que contengan un blog, portafolios, sitios web corporativos.

Esto se convierte en una gran opción para hacer una página web en poco tiempo, pero siempre se va a incurrir en gastos como lo son el Hosting, si se instalan plantillas y plugins se afecta los tiempos de carga, y si se instalan de fuentes desconocidas, se puede incurrir en una grave falla de seguridad.

Una alternativa a WordPress y cualquier otro CMS que te queremos mostrar en este blog es GatsbyJS, un framework basado en ReactJS que nos permite generar sitios web con altas velocidades de carga, seguras, ya que este Framework se encarga solo de generar el Html, CSS y JS de tu sitio web, pero puedes traer tu información de cualquier lado, ya sea utilizando tu propia base de datos, utilizando un gestor de contenidos o usando archivos markdown. En este blog encontrarás enlaces a la documentación oficial para que evalúes las opciones.

La ventaja principal de utilizar Gatsby es el bajo costo de almacenar un sitio web, es totalmente gratis en sitios como Netlify o Vercel, estos cobrarán si el proyecto es muy amplio, pero si necesitamos un proyecto pequeño o mediano será un gran opción, y si este necesita escalar, los precios no serán altos.

Un SPA’s (single page application) es un sitio web que no requiere recarga del navegador, lo cual nos garantiza velocidad, confiabilidad y seguridad.

¿Qué es Gatsby?

Un framework gratuito y de código libre basado en React, alimentado por Graphql que nos ayuda a generar sitios web estáticos.

¿Cómo trabaja Gatsby?

Trae y construye archivos estáticos de distintas fuentes como lo son:

 

• • CMS (WordPress, Drupal, WordPress, etc.)

• • Markdown (Documentación, post, etc)

• • Data (APIs, Bases de datos, YAML, JSON, CSV, etc)

¿Cuáles son las Ventajas de Gatsby?

Un sitio estático en Gatsby tiene sus ventajas en cuanto a: dinero, tiempo, confiabilidad y seguridad, las que sintetizamos, así:

 

• • Dinero: Hospedar un sitio estático es mucho más barato que uno dinámico. (En Amazon 1 a 3 USD/mensuales aproximadamente dependiendo del tráfico del sitio)

• • Tiempo: Configurar, escalar y asegurar nuestro sitio dinámico puede ser una tarea que lleve mucho tiempo, por el contrario, en el sitio estático no.

• • Seguridad: Comparado con un sitio web desarrollado en Drupal o WordPress, es mucho más fácil de asegurar. Según un reporte de WP WhiteSecurity dice que más o menos el 70% de los sitios con WordPress corren el riesgo de ser hackeados por falta de mantenimiento y actualizaciones)

¿Cómo crear un proyecto en Gatsby?

Requerimientos: Tener instalado NODE.JS y NPM. https://nodejs.org/es/download/

 

1. 1. Abre tu terminal.

Usa Gatsby CLI

Instala Gatsby CLI en la consola.

npm install -g gatsby-cli

Crea un nuevo sitio.

gatsby new gatsby-site https://github.com/gatsbyjs/gatsby-starter-hello-world

Cambia los directorios dentro del sitio

cd gatsby-site

Inicia el servidor de desarrollo

gatsby develop

Gatsby iniciará el desarrollo en un ambiente accesible por defecto el puerto 8000 http://localhost:8000/

Conclusiones

La necesidad de sitios web de alto rendimiento y seguridad, se incrementa por la presión de los algoritmos de los buscadores en posicionar sitios web seguros, veloces, que cumplan con los últimos estándares de UI y UX. Todo esto se puede cumplir usando una tecnología como Gatsby. La gente de Gatsby tomó las decisiones correctas al integrar tecnologías específicas en su marco, además de concentrarse en el rendimiento, hicieron que Gatsby.js estuviera preparado para el futuro. Las posibilidades son infinitas dentro de un framework pensado para el futuro.