Comience su proyecto con esta plantilla. Este iniciador viene con los archivos y configuraciones de Gatsby más esenciales que puede necesitar para comenzar a funcionar a la máxima velocidad con el generador de aplicaciones ultrarrápido para React.
Crea un sitio web sobre Gatsby.
Utilice la CLI de Gatsby para crear un nuevo sitio, especificando esta Plantilla .
# Crie um novo site do Gatsby usando esse Template
gatsby new my-project https://github.com/solrachix/gatsby-template
Empiece a desarrollar.
Navegue hasta el directorio de su nuevo sitio y ejecútelo.
cd my-project/
gatsby develop
¡Abre el código y comienza a editar!
¡Su sitio ahora se está ejecutando en http://localhost:8000
!
Nota: También verá un segundo enlace: http://localhost:8000/___graphql
. Esta es una herramienta que puede utilizar para experimentar consultando sus datos. Obtenga más información sobre cómo utilizar esta herramienta en el [tutorial de Gatsby] (https://www.gatsbyjs.org/tutorial/part-five/#introtaining-graphiql).
Abra el directorio my-project
en el editor de código de su elección y edite src/pages/index.js
. ¡Guarde sus cambios y el navegador se actualizará en tiempo real!
Progressive Web App es un término utilizado para denotar una nueva metodología de desarrollo de software. A diferencia de las aplicaciones tradicionales, una aplicación web progresiva puede verse como una evolución híbrida entre páginas web normales y una aplicación móvil.
El manifiesto de la aplicación web (parte de la especificación PWA), impulsado por el complemento de manifiesto , permite a los usuarios agregar su sitio web a la pantalla de inicio en la mayoría de los navegadores móviles; consulte aquí. El manifiesto proporciona configuración e íconos para el teléfono.
Este complemento proporciona varias funciones además de la configuración del manifiesto para hacerle la vida más fácil, son:
Cada una de estas funciones tiene una amplia configuración disponible para que usted siempre tenga el control.
¿Dónde buscar estos complementos? Haga clic aquí y busque
Un vistazo rápido a los archivos y directorios de nivel superior que verá en esta plantilla de Gatsby.
.
├── node_modules
├── config/
│ └── MetaData.js
├── src/
│ ├── assets/
│ │ └── images/
│ │ └── logo.png
│ ├── components/
│ ├── Pages/
| │ └── index.js
│ ├── posts/
| │ └── 2020-04-08--nosso-primeiro-post/
| │ └── index.md
│ ├── styles/
│ | ├── themes/
│ | └── GlobalStyles.js
│ ├── templates/
│ | ├── post.js
│ | └── tag.js
│ └── html.js
├── static/
│ ├── favicon.ico
│ └── robots.txt
├── .gitignore
├── .prettierrc
├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-node.js
├── gatsby-ssr.js
├── LICENSE
├── package-lock.json
├── package.json
└── README.md
Archivos/Carpetas | Descripción |
---|---|
/módulos_nodo | Este directorio contiene todos los módulos de código de los que depende su proyecto (paquetes npm) que se instalan automáticamente. |
/fuente | Este directorio contendrá todo el código relacionado con lo que verá en la parte frontal de su sitio web (lo que ve en el navegador), como el encabezado del sitio web o una plantilla de página. src es una convención para "código fuente". |
.gitignore | Este archivo le dice a git qué archivos no debe rastrear/no mantener un historial de versiones. |
.prettierrc | Este es un archivo de configuración para Prettier. Prettier es una herramienta que ayuda a mantener consistente el formato de su código. |
* gatsby-browser.js | Es en este archivo donde Gatsby espera encontrar algún uso de las API del navegador Gatsby (si existen). Esto permite la personalización/extensión de la configuración predeterminada de Gatsby que afecta al navegador. |
gatsby-config.js | Este es el archivo de configuración principal de un sitio web de Gatsby. Aquí es donde puede especificar información sobre su sitio (metadatos), como el título y la descripción de su sitio, qué complementos de Gatsby le gustaría incluir, etc. (Consulte los documentos de configuración para obtener más detalles). |
gatsby-nodo.js | Este archivo es donde Gatsby espera encontrar cualquier uso de las API del nodo de Gatsby (si existen). Esto permite la personalización/extensión de la configuración predeterminada de Gatsby que afecta partes del proceso de creación del sitio. |
gatsby-ssr.js | Es en este archivo donde Gatsby espera encontrar algún uso de las API de procesamiento del servidor Gatsby (si existen). Esto permite la personalización de la configuración predeterminada de Gatsby que afecta la representación del lado del servidor. |
LICENCIA | Gatsby tiene la licencia MIT. |
paquete-lock.json | (ver package.json a continuación, primero). Este es un archivo generado automáticamente basado en las versiones exactas de las dependencias de npm que se han instalado para su proyecto. (No cambia este archivo directamente). |
paquete.json | Un archivo de manifiesto para proyectos de Node.js, que incluye elementos como metadatos (nombre del proyecto, autor, etc.). Este manifiesto es cómo npm sabe qué paquetes instalar para su proyecto. |
LÉAME.md | Un archivo de texto que contiene información de referencia útil sobre su proyecto. |
**** |
¿Busca más orientación? La documentación completa de Gatsby se encuentra [en el sitio web] (https://www.gatsbyjs.org/). Aquí hay algunos lugares para comenzar:
Para la mayoría de los desarrolladores, recomiendo comenzar con nuestro [tutorial detallado para crear un sitio web con Gatsby] (https://www.gatsbyjs.org/tutorial/). Comienza sin suposiciones sobre su nivel de habilidad y recorre cada paso del proceso.
Para profundizar directamente en los ejemplos de código, visite la [documentación] (https://www.gatsbyjs.org/docs/). En particular, consulte las secciones Guías , Referencia de API y Tutoriales avanzados en la barra lateral.