Deploy with React.js on GitHub Pages 🤯

🚀 Seguindo alguns passos simples, conseguimos fazer o deploy de um projeto React.js no github pages.

📌1º Passo - Crie um projeto React.js.

npx create-react-app nome-do-projeto

• Obs: Você deve substituir o trecho acima nome-do-projeto pelo nome do seu projeto.

📌2º Passo - Crie um repositório no GitHub e conecte com seu projeto.

Atenção!!! Neste passo suponho que você como pessoa desenvolvedora saiba cria um repositório no github.

Caso não saiba acesse GitHub Docs

Após a criação do repositório você deve fazer os passos seguintes no terminal:

$ cd nome-do-projeto

$ git init

$ git remote add origin git@github.seu-usuario-github/nome-do-projeto.git

• Aqui há alguns pontos de atenção:
• seu-usuario-github deve ser o seu nome de usuário cadastrado no GitHub.
• nome-do-projeto é o nome do seu repositório.
• git@github.seu-usuario-github/nome-do-projeto.git estamos usando como exemplo uma chave SSH.

📌3º Passo - Instalar o pacote gh-pages, que é o responsável pelo processo de deploy do nosso projeto:

npm add -D gh-pages

Após a adição do pacote acima, insira o script no arquivo package.json do projeto. Em seguida altere o item de acordo com o seu-usuario-github e o nome-do-projeto.

"homepage": "https://seu-usuario-github.github.io/nome-do-projeto",
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
},

📌4º Passo - Coloque o seu site no "AR", fazendo o deploy:

npm run deploy

• Vale lembrar que pra cada atualização ou alteração no site, deve-se rodar esse comando para que o site também seja atualizado.

📌5º Passo - Acesse seu site agora mesmo:

Acesse: https://seu-usuario-github.github.io/nome-do-projeto Lembre-se de substituir o 

seu-usuario-github e o nome-do-projeto.

• Caso acesse o site e não apareça, não se preocupe, pois o deploy demora um pouco mesmo, tente novamente um tempinho depois.

📌6º Passo - Esse passo só é obrigatório para projetos com rotas:

npm i react-router-dom

O BrowserRouter deverá ter a seguinte sintaxe:

<BrowserRouter basename={process.env.PUBLIC_URL}>

</BrowserRouter>

Após alteração npm run deploy sempre.

Confira esse mesmo artigo no meu Github: https://github.com/elielsondev/deploy-with-react-on-github-pages/tree/main