Cuando tienes instalado zsh, puedes utilizar
take mi_directorio
y viene siendo un alias para
mkdir mi_directorio && cd mi_directorio
Introducción a Gatsby
¿Por qué Gatsby? Seguridad y Velocidad
¿Qué es Gatsby?
Diferencias entre SPA, SSR y Gatsby
Preparando el entorno
Requisitos previos y herramientas de desarrollo
Gatsby y Gatsby CLI y Starters
Configuración de ESLint
Fundamentos de Gatsby
Presentación y Estructura de Archivos de nuestro proyecto: Platziswag
Ecosistema de plugins
Usando React para manejar la parte visual e interactiva de nuestra aplicación
Creando la vista con React
Router en Gatsby y Componente Link
Layout en Gatsby
Graphql en Gatsby
¿Cómo funciona GraphQL en Gatsby?
Accediendo a nuestros datos en Gatsby desde GraphQL
Queries, Edges (conexiones) y Nodos en Gatsby
Consultas en GraphQL desde React
Usando plugins en Gatsby
Instalación y configuración de plugins
Imágenes como fuente de datos
Plugins de transformación
Estilizando nuestros componentes con styled-components
Estilos Globales con styled-components
Stripe checkout
Introducción a la API de Stripe Checkout
Agregando productos a nuestra tienda en línea
Productos en React
Generando páginas programáticamente
Creando páginas en función de los datos
Manejo de Gatsby Templates
Terminando la Vista de Detalle de los Productos
StaticQuery vs. useStaticQuery
Construyendo el Carrito de Compras: useContext
Construyendo el Carrito de Compras: Vista
Construyendo el Carrito de Compras: Agregar productos al carrito
Comprando productos
Gatsby a producción
Gatsby build para compilar nuestro proyecto
Deploy a Netlify
Crea una cuenta o inicia sesión
¡Continúa aprendiendo sin ningún costo! Únete y comienza a potenciar tu carrera
No se trata de lo que quieres comprar, sino de quién quieres ser. Aprovecha el precio especial.
Antes: $249
Paga en 4 cuotas sin intereses
Termina en:
José Carlos Correa Mandujano
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
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 6
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
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
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…
Aquí la docu
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:
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.
mkdir ~/.npm-global
npm config set prefix '~/.npm-global'
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:
source ~/.profile
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
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?