Kit de inicio básico para sitios estáticos basado en Gatsby.js.
Empiece a desarrollar.
Navegue hasta el directorio de su nuevo sitio e inícielo.
cd my-site/
gatsby develop¡Abre el código fuente 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 el uso de esta herramienta en el tutorial de Gatsby.
Abra el directorio my-site 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!
Un vistazo rápido a los archivos y directorios de nivel superior que verá en un proyecto Gatsby.
.
├── node_modules
├── src
├── .gitignore
├── .prettierrc
├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-node.js
├── gatsby-ssr.js
├── LICENSE
├── package-lock.json
├── package.json
├── README.md
└── yarn.lock
/node_modules : este directorio contiene todos los módulos de código de los que depende su proyecto (paquetes npm) que se instalan automáticamente.
/src : este directorio contendrá todo el código relacionado con lo que verá en la interfaz de su sitio (lo que verá en el navegador), como el encabezado de su sitio 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 : este archivo es donde Gatsby espera encontrar algún uso de las API del navegador Gatsby (si corresponde). Estos permiten 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 Gatsby. Aquí es donde puede especificar información sobre su sitio (metadatos), como el título y la descripción del sitio, qué complementos de Gatsby le gustaría incluir, etc. (Consulte los documentos de configuración para obtener más detalles).
gatsby-node.js : este archivo es donde Gatsby espera encontrar algún uso de las API del nodo de Gatsby (si corresponde). Estos permiten 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 : este archivo es donde Gatsby espera encontrar algún uso de las API de renderizado del lado del servidor de Gatsby (si corresponde). Estos permiten la personalización de la configuración predeterminada de Gatsby que afecta la representación del lado del servidor.
LICENSE : Gatsby tiene la licencia MIT.
package-lock.json (ver package.json a continuación, primero). Este es un archivo generado automáticamente basado en las versiones exactas de sus dependencias npm que se instalaron para su proyecto. (No cambiará este archivo directamente).
package.json : un archivo de manifiesto para proyectos Node.js, que incluye elementos como metadatos (el nombre del proyecto, autor, etc.). Este manifiesto es cómo npm sabe qué paquetes instalar para su proyecto.
README.md : un archivo de texto que contiene información de referencia útil sobre su proyecto.
yarn.lock : Yarn es una alternativa de administrador de paquetes a npm. Puede usar hilo o npm, aunque todos los documentos de Gatsby hacen referencia a npm. Este archivo tiene esencialmente el mismo propósito que package-lock.json , solo que para un sistema de administración de paquetes diferente.
Para la implementación, puede utilizar Gitlab CI. En el proyecto hay dos archivos: muestra .gitlab-ci.yml y para implementación S3 .gitlab-ci-s3.yml .