Introducci贸n a Gatsby

1

驴Por qu茅 Gatsby? Seguridad y Velocidad

2

驴Qu茅 es Gatsby?

3

Diferencias entre SPA, SSR y Gatsby

Preparando el entorno

4

Requisitos previos y herramientas de desarrollo

5

Gatsby y Gatsby CLI y Starters

6

Configuraci贸n de ESLint

Fundamentos de Gatsby

7

Presentaci贸n y Estructura de Archivos de nuestro proyecto: Platziswag

8

Ecosistema de plugins

9

Usando React para manejar la parte visual e interactiva de nuestra aplicaci贸n

Creando la vista con React

10

Router en Gatsby y Componente Link

11

Layout en Gatsby

Graphql en Gatsby

12

驴C贸mo funciona GraphQL en Gatsby?

13

Accediendo a nuestros datos en Gatsby desde GraphQL

14

Queries, Edges (conexiones) y Nodos en Gatsby

15

Consultas en GraphQL desde React

Usando plugins en Gatsby

16

Instalaci贸n y configuraci贸n de plugins

17

Im谩genes como fuente de datos

18

Plugins de transformaci贸n

19

Estilizando nuestros componentes con styled-components

20

Estilos Globales con styled-components

Stripe checkout

21

Introducci贸n a la API de Stripe Checkout

22

Agregando productos a nuestra tienda en l铆nea

23

Productos en React

Generando p谩ginas program谩ticamente

24

Creando p谩ginas en funci贸n de los datos

25

Manejo de Gatsby Templates

26

Terminando la Vista de Detalle de los Productos

27

StaticQuery vs. useStaticQuery

28

Construyendo el Carrito de Compras: useContext

29

Construyendo el Carrito de Compras: Vista

30

Construyendo el Carrito de Compras: Agregar productos al carrito

31

Comprando productos

Gatsby a producci贸n

32

Gatsby build para compilar nuestro proyecto

33

Deploy a Netlify

Crea una cuenta o inicia sesi贸n

隆Contin煤a aprendiendo sin ning煤n costo! 脷nete y comienza a potenciar tu carrera

Gatsby y Gatsby CLI y Starters

5/33
Recursos

Crea tu primer sitio web en Gatsby

Tenemos dos formas de instalar Gatsby y crear nuestros proyectos.

1. A mano: Debemos crear las carpetas y archivos de nuestro proyecto siguiendo las pr谩cticas de Gatsby. Tambi茅n debemos instalar las dependencias:

npm install --save react react-dom gatsby

2. De forma global: Usamos gatsby-cli para generar un proyecto b谩sico de Gatsby. No debemos crear los archivos ni las carpetas, solo ejecutar los siguientes comandos:

# No olvides instalar:
npm install -g gatsby-cli

# Ahora s铆:
gatsby develop

Starters

La comunidad alrededor de Gatsby es incre铆ble.

Los starters son proyectos creados con el fin de modificar el contenido y tener nuestro sitio listo sin necesidad de hacer configuraciones. Solo debemos copiar el nombre del starter y ejecutar el siguiente comando:

gatsby new tu-proyecto creador/nombre-del-starter

Aportes 31

Preguntas 5

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Cuando tienes instalado zsh, puedes utilizar

take mi_directorio

y viene siendo un alias para

mkdir mi_directorio && cd mi_directorio

Este curso si tiene las descripciones completas abajo del video, est谩 genial, adem谩s el profe le pone ganas =D

Si hay algun problema con el curso es por que la verci贸n cambio ligeramente.
Dejo la cocumentaci贸n https://www.gatsbyjs.org/docs/quick-start/
Mucho ojo como se instala. npm install -g gatsby-cli

New Quick Start

Gatsby tiene una nueva forma de iniciar r谩pidamente un nuevo proyecto, solo se usa:

npm init gatsby

Me ha encantado todo el tema de starters. Tengo ganas de empezar a jugar con Gatsby!


Aparece este error cuando ejecuto el comando gatsby new myproject

Gatsby y Gatsby CLI y Starters

Hay que instalar npm install -g gatsby-cli

Las 3 dependencias b谩sicas de un proyecto en Gatbsy: npm i react react-dom gatsby

Usamos gatsby develop

Ahora con el CLI de Gatsby podemos crear un proyecto gatsby new projectName

Podemos crear proyectos que ya existen, por ejemplo tenemos 2 platillas (de las muchas que hay):

  • gatsby new gatsbycliproject
  • gatsby new gatsbyjs/gatsby-starter-blog

Hola, amigos estoy siguiendo el curso , solo que al ejecutar [ gatsby develop ] no me corre el proyecto鈥 馃槮 alguno sabe a que se debe ? por otro lado instalado [ npm install -g gatsby-cli ] y al crear el proyecto tampoco me ejecuta. 馃槮 ayuda SOS xD鈥

No me reconoce el comando gatsby develop y ya lo tengo agregado en el package.json

驴Que hago?

Por si est谩n tomando recientemente el curso. Me parece que por temas de el nuevo SO de MacOS no me permite instalar el CLI globalmente por lo que uso npx gatsby new miproyecto para correr el comando (utiliza la versi贸n 2.12.0 del cli y de gatsby 2.21.0). Estas nuevas versiones no generan la carpeta public en el proyecto.

para usar los Starters y como recomendaci贸n general deber铆as instalar Git =).

Incre铆ble el sistema de los Starters, son sencillos de utilizar y facilita mucho ciertos trabajos

puedo configurar gatsby con un proyecto de un blog con django?? Para servir los archivos estaticos??

ok 2023 nada es as铆, cambia por la documentaci贸n mejor:

https://www.gatsbyjs.com/docs

muy bien explicado

si tuviste problemas en instalar

npm install -g gatsby-cli

Debemos de resolver los errores de permisos de EACCES, para poder instalar los paquetes globalmente.

  1. En la l铆nea de comando, en su directorio de inicio, cree un directorio para instalaciones globales:
mkdir ~/.npm-global
  1. Configure npm para usar la nueva ruta del directorio:
npm config set prefix '~/.npm-global'

  1. en tu editor de texto (vscode,atom,etc) crea un ~/.profile. en Code desde la linea de comandos de linux lo podes hacer de esta manera :

code ~/.profile

lo cual se abrira en tu editor de texto (en este caso en vscode) .
se abrir谩 esto:

el cual le agregaremos la siguiente linea de la siguiente manera:

export PATH=~/.npm-global/bin:$PATH

lo cual quedar铆a de la siguiente manera:

  1. En la l铆nea de comando, actualice las variables de su sistema:
source ~/.profile
  1. Para probar su nueva configuraci贸n, instale un paquete globalmente sin usar sudo:
npm install -g jshint

de esta manera ya podr谩s instalar el npm sin problemas

npm install -g gatsby-cli

espero poder haberte ayudado

lo que es el curso de pwa, este y el de react avanzado nunca los pude terminar, siempre desactualizados SIEMPRE, piensen en el estudiante!!!

Ta potente Gatsby

Este curso es lo mejor que yo he visto鈥 sorprendido!! no he terminado el curso y ya tengo un sitio web levantado jajajjajajajja as铆 deber铆an ser todos los cursos

Waooo super interesante el tema de los starters +1 para gatsby

Hey como consejo a todos los usuarios de windows, es demasiado tedioso usar windows simplemente es un dolor de cabeza tremendo, pero pueden usar el subsistema linux, ayuda demasiado, corr铆 este codigo sin problema alguno usando el bash del susbsitema linux en windows, es una especie de consuelo para los usuarios de windows.

No me genero la carpeta public, el resto si, pasa algo?

Lo tuve que abrir en la consola de git, el CMD me daba muchos problemas

al momento de generar mi proyecto con gatsby new Nombre me sale un error no se si pueden ayudar a solucionarlo

Tres maneras de iniciar un proyecto!!! Vamos pues馃槉

En lo referido al starter solo me funciono del a siguiente manera:

gatsby new miFirstSiteWithStarter https://github.com/gatsbyjs/gatsby-starter-blog

Que tema pongo en visual studio para poder visualizar los iconos que est谩s usando

actualmente si se hace scroll en la parte de abajo de cada starter puedes copiar el link completo y pegarlo a la consola

para la fecha 25/04/2021 la estructura de las carpetas cambio, es mejor ver un poco la documentacion

Si alguien tiene problemas al correr el proyecto con el comando

Gatsby Develop

(Aun aunque lo pusieron en el package json) solamente ejecuten el comando

npm run develop