Comece seu projeto com este template. Esse iniciador é fornecido com os arquivos e configurações mais essenciais do Gatsby, que você pode precisar para começar a funcionar em alta velocidade com o gerador de aplicativos extremamente rápido para o React.
-
Crie um site do Gatsby.
Use a CLI do Gatsby para criar um novo site, especificando esse Template.
# Crie um novo site do Gatsby usando esse Template gatsby new my-project https://github.com/solrachix/gatsby-template -
Comece a desenvolver.
Navegue até o diretório do seu novo site e inicie-o.
cd my-project/ gatsby develop -
Abra o código e comece a editar!
Seu site agora está sendo executado em
http://localhost:8000!Nota: 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 do Gatsby] (https://www.gatsbyjs.org/tutorial/part-five/#introducing-graphiql) .Abra o diretório
my-projectno seu editor de código de sua escolha e editesrc/pages/index.js. Salve suas alterações e o navegador será atualizado em tempo real!
Progressive Web App é um termo usado para denotar uma nova metodologia de desenvolvimento de software. Ao contrário dos tradicionais aplicativos, um Progressive Web App pode ser visto como uma evolução híbrida entre as páginas da web regulares e um aplicativo móvel.
O web app manifest (parte da especificação PWA ) ativado pelo plugin manifest, permite que os usuários adicionem seu site à tela inicial na maioria dos navegadores móveis - veja aqui . O manifest fornece configuração e ícones para o telefone.
Este plugin fornece vários recursos além da configuração do manifesto para facilitar sua vida, são eles:
- Geração automática de ícones - gera vários tamanhos de ícones a partir de uma única fonte
- Suporte Favicon
- Suporte a ícones herdados (iOS) 1
- Bloqueio de cache
- Localização - fornece manifestos exclusivos para localização baseada em caminho ( exemplo de Gatsby )
Cada um desses recursos possui ampla configuração disponível para que você esteja sempre no controle.
Aonde pesquisar esse Plugins? Clique aqui e pesquise
- react-helmet: O React Helmet é um componente que permite controlar a cabeça do documento usando o componente React;
- sitemap: Gera um sitemap automático no build;
- transformer-remark: É responsável por transformar os posts do blog escritos em Markdown para HTML;
- manifest: Cria um manifest sem complicações;
- feed: Cria um feed RSS para o seu site.
- nprogress: Barra de progressão na parte superior da pagina, estilo youtube;
- google-analytics: Dá suporte para o analytics no seu site;
- styled-components: Modelo de estilização CSS IN JS;
- page-creator: Cria automaticamente páginas dos componentes React em diretórios especificados;
- source-filesystem: Server para obter dados no aplicativo Gatsby a partir do sistema de arquivos local;
- offline: Dá suporte para o site funcionar offline;
Uma rápida olhada nos arquivos e diretórios de nível superior que você verá nesse template do 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
| Arquivos/Pastas | Descrição |
|---|---|
| /node_modules | Este diretório contém todos os módulos de código dos quais seu projeto depende (pacotes npm) 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 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 / não manter um histórico de versão. |
| .prettierrc | este é um arquivo de configuração para o Prettier. O Prettier é uma ferramenta para ajudar a manter a formatação do seu código consistente. |
| *gatsby-browser.js | É neste arquivo que o Gatsby espera encontrar qualquer uso das APIs do navegador Gatsby (caso existam). Isso permite a personalização / extensão das configurações padrão do Gatsby que afetam o navegador. |
| gatsby-config.js | Este é o principal arquivo de configuração de um site do Gatsby. É aqui que você pode especificar informações sobre o seu site (metadados), como o título e a descrição do site, quais plugins do Gatsby você gostaria de incluir, etc. (Confira os documentos da configuração para mais detalhes). |
| gatsby-node.js | É neste arquivo que o Gatsby espera encontrar qualquer uso das APIs do Nó Gatsby (caso existam). Isso permite a personalização / extensão das configurações padrão do Gatsby que afetam partes do processo de criação do site. |
| gatsby-ssr.js | É neste arquivo que o Gatsby espera encontrar qualquer uso das APIs de renderização do servidor Gatsby (caso existam). Isso permite a personalização das configurações padrão do Gatsby que afetam a renderização no servidor. |
| LICENSE | Gatsby está licenciado sob a licença MIT |
| package-lock.json | (consultepackage.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 altera 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. |
| **** |
Procurando mais orientações? A documentação completa de Gatsby está [no site] (https://www.gatsbyjs.org/). Aqui estão alguns lugares para começar:
-
Para a maioria dos desenvolvedores, recomendo começar com o nosso [tutorial detalhado para criar um site com o Gatsby] (https://www.gatsbyjs.org/tutorial/). Começa com zero suposições sobre seu nível de capacidade e percorre todas as etapas do processo.
-
Para mergulhar diretamente nos exemplos de código, acesse a [documentação] (https://www.gatsbyjs.org/docs/). Em particular, consulte as seções Guides, API Reference e Advanced Tutorials nas Barra Lateral.
