Kit inicial básico para sites estáticos baseado em Gatsby.js.
Comece a desenvolver.
Navegue até o diretório do seu novo site e inicie-o.
cd my-site/
gatsby develop
Abra o código-fonte e comece a editar!
Seu site agora está rodando em http://localhost:8000
!
Observação: você também verá um segundo link: http://localhost:8000/___graphql
. Esta é uma ferramenta que você pode usar para experimentar a consulta de seus dados. Saiba mais sobre como usar esta ferramenta no tutorial Gatsby.
Abra o diretório my-site
no editor de código de sua preferência e edite src/pages/index.js
. Salve suas alterações e o navegador será atualizado em tempo real!
Uma rápida olhada nos arquivos e diretórios de nível superior que você verá em um projeto 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 diretório contém todos os módulos de código dos quais seu projeto depende (pacotes npm) que são instalados automaticamente.
/src
: Este diretório conterá todo o código relacionado ao que você verá no front-end do seu site (o que você vê no navegador), como o cabeçalho do seu site ou um modelo de página. src
é uma convenção para “código fonte”.
.gitignore
: Este arquivo informa ao git quais arquivos ele não deve rastrear/para os quais não deve manter um histórico de versão.
.prettierrc
: Este é um arquivo de configuração do Prettier. Prettier é uma ferramenta para ajudar a manter a formatação do seu código consistente.
gatsby-browser.js
: Este arquivo é onde Gatsby espera encontrar qualquer uso das APIs do navegador Gatsby (se houver). Eles permitem a personalização/extensão das configurações padrão do Gatsby que afetam o navegador.
gatsby-config.js
: Este é o arquivo de configuração principal de um site Gatsby. É aqui que você pode especificar informações sobre o seu site (metadados), como o título e a descrição do site, quais plug-ins Gatsby você gostaria de incluir, etc.
gatsby-node.js
: Este arquivo é onde Gatsby espera encontrar qualquer uso das APIs do Gatsby Node (se houver). Eles permitem a personalização/extensão das configurações padrão do Gatsby que afetam partes do processo de construção do site.
gatsby-ssr.js
: Este arquivo é onde Gatsby espera encontrar qualquer uso das APIs de renderização do lado do servidor Gatsby (se houver). Eles permitem a personalização das configurações padrão do Gatsby que afetam a renderização do lado do servidor.
LICENSE
: Gatsby é licenciado sob a licença do MIT.
package-lock.json
(veja package.json
abaixo, primeiro). Este é um arquivo gerado automaticamente com base nas versões exatas das dependências do npm que foram instaladas para o seu projeto. (Você não alterará este arquivo diretamente).
package.json
: um arquivo de manifesto para projetos Node.js, que inclui itens como metadados (nome do projeto, autor, etc.). Este manifesto é como o npm sabe quais pacotes instalar para o seu projeto.
README.md
: um arquivo de texto contendo informações de referência úteis sobre o seu projeto.
yarn.lock
: Yarn é um gerenciador de pacotes alternativo ao npm. Você pode usar o fio ou o npm, embora todos os documentos do Gatsby façam referência ao npm. Este arquivo tem essencialmente a mesma finalidade que package-lock.json
, apenas para um sistema de gerenciamento de pacotes diferente.
Para implantação, você pode usar o Gitlab CI. No projeto há dois arquivos - sample .gitlab-ci.yml
e para S3 deploy .gitlab-ci-s3.yml
.