Passo a passo de como dar deploy no github pages em projeto React e criar um repositório para ele com o Trybe Publisher.

react-github-pages-trybe-publisher.md

Passo a passo de como dar deploy no github pages em projeto React e criar um repositório para ele com o Trybe Publisher

Certifique que tem o Trybe Publisher instalado e funcionando. Caso não tenha, acesse o link abaixo e siga somente até o passo 6:

• Gist para Trybe Publisher

1. Entre na pasta do projeto e instale o GH Pages

npm install gh-pages --save-dev

2. Dentro do package.json adicione:

• Na raiz do arquivo cole:

"homepage": "https://{username}.github.io/{nome-do-repositorio}",

Lembrar de trocar {username} pelo seu username github e {nome-do-respositorio} para o nome do repositório que vai criar.

• Dentro da chave scripts adicione scripts de predeploy e deploy:

"scripts": {
  "predeploy": "npm run build",
  "deploy": "gh-pages -d build",
  ...
 }

3. Caso o projeto use o React Router, vá onde está o arquivo BrowserRouter e substitua ele por HashRouter, assim:

import { HashRouter } from 'react-router-dom';

<HashRouter>
  <App />
</HashRouter>

4. Adicione essas mudanças ao git com:

• git add .
• git commit -m 'change BrowserRouter for HashRouter'

5. Rode o comando do trybe publisher:

• Lembrar de substituir o nome da branch, e o nome do novo repositório ser aquele mesmo nome adicionado lá no passo 2.

trybe-publisher -b {sua_branch} -p {nome_novo_repositorio}

• Siga as instruções das opções do trybe publisher.

6. Faça o deploy:

npm run deploy

• Acesse seu deploy em: https://{username}.github.io/{nome-do-repositorio}
  
• Acesse seu repositório em: https://github.com/{username}/{nome-do-repositorio}

FIM