Introdução
  • Motivação
  • Iniciando o projeto com Gatsby
  • Estrutura do Gatsby comparada com React
  • Por que usar Gatsby?
Páginas em componentes no Gatsby
  • Adicionando sumário na página inicial
  • Adicionando uma nova página com Gatsby
  • Componentes React no Gatsby
Usando ferramentas no Gatsby
  • Reach Router
  • React Helmet
  • GraphQL
  • Usando GraphQL no Gatsby
  • SEO
  • Lint e formatação de código com ESLint
  • Frameworks de CSS
  • Adicionando Bulma e puglin do Gatsby para usar Sass
  • Mudando estilos com classes do Bulma
Imagens, otimizações e ícones
  • Ícones de mídias sociais com Font Awesome
  • Critical Rendering Path
  • Foto de perfil
  • Otimização de imagens com queries de GraphQL no Gatsby
Implemente as páginas do seu site
  • Melhorando página de projetos
  • Refatorando em componente
  • Estendendo configuração do Webpack no Gatsby
  • Construindo uma navbar estados de componente React
  • Agregando valor para visitantes do site
  • Blog e posts
  • Crie uma página única
  • Mostre sua stack com StackShare
  • Página de 404
Estilos e como deixar seu site único
  • Adicionando e otimizando carregamento de fonte
  • Estilos de CSS e editando variáveis de Sass do Bulma
  • Favicon com plugin do Gatsby para gerar manifesto
  • Finalizando detalhes e otimizando importe do Bulma
Publique seu site com GitHub Pages
  • Publicando no GitHub Pages sem usar Git
  • Atualizando o site depois de publicado
  • Adicione Google Analytics
  • Git e controle de versão
  • Publicando com Git
  • Avaliação do site com Lighthouse
PWA no Gatsby
  • O que é PWA?
  • Adicione suporte para PWA
  • Automação do deploy com gh-pages
  • Teste seu site como PWA
  • Conclusão