Index
Workshop de Gatsby
En este workshop, vamos a aprender y entender las bases de Gatsby haciendo un portfolio para mostrar los proyectos que tengas subidos a tu Github. Y si te animás, también te enseño a hacerte un blog propio para escribir sobre lo que quieras!
Si estás haciendo este workshop en tu casa, podés ver antes de empezar la presentación que tiene info bastante útil sobre la estructura de archivos y carpetas de Gatsby. Igual son temas que se van a ver en la Intro de este workshop.
Click para ver la presentación 🍸
Antes que seguir con todo, definamos Gatsby: Es un framework de React, una capa que va por encima de React que genera sitios estáticos (HTML + CSS + JS).
Ahora sí, si queremos empezar con Gatsby, tenemos que saber que nos facilita algunas cosas que, si las queremos implementar nosotros, son complejas, como por ejemplo:
- Routing
- Lazy loading en las imágenes
- GraphQL
- Server Side Rendering o SSR
- PWA (Progressive Web App)
Todo eso viene "gratis" y preconfigurado (para tener una PWA con sólo descomentar una línea ya está, en serio). Vamos a estar viendo los primeros 3 en este workshop.
Gatsby además tiene un sistema de plugins que la rompe, y documentación completísima, y mucho material, e integración con muchas plataformas, y y y y y y y se nota que me gusta mucho?
Navegación por el workshop: Como verán si van para abajo de todo, hay botones para ir al próximo paso, para hacer las cosas en orden. Si ya están avanzados tienen a la izquierda el menú (o en un botón arriba si están viendo esto en mobile).
Y este es un temario con lo que vamos a ver en cada paso del workshop:
- Intro: Comenzando un proyecto, partes de un proyecto en Gatsby, Routing y Lazy loading de imágenes.
- Plugins: Tipos de plugins en Gatsby, cómo utilizarlos.
- Workshop - Paso 1: Creando un token de Github, definiendo nuestra query de GraphQL, instalando y configurando plugin.
- GraphQL: Qué es GraphQL, diferencias con una API REST, GraphiQL.
- Workshop - Paso 2: Haciendo la query para el plugin de Github, manejo en frontend de nuestra data, deploy de nuestro portfolio en Netlify.
- Workshop - Paso 3: Creando nuestro blog.
Créditos
Fuentes usadas para hacer este workshop: