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.

1. 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

2. Comece a desenvolver.

   Navegue até o diretório do seu novo site e inicie-o.

   cd my-project/
   gatsby develop

3. 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-project no seu editor de código de sua escolha e edite src/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

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.