Como faço pra hospedar no Github Pages?

Olá, bom dia.

Para aplicações React no GitHub Pages, você pode utilizar a lib gh-pages.

Passo 1: Instalar a Biblioteca

npm install gh-pages --save-dev

Passo 2: Configurar o package.json Adicione as três linhas abaixo

"homepage": "https://gitname.github.io/react-gh-pages",
"predeploy": "npm run build",
"deploy": "gh-pages -d build"

A url da homepage tem que seguir esse formato:

https://{nome_do_usuario}.github.io/{nome_do_repositório}

como no exemplo abaixo: https://willianmedeiros14.github.io/teste_react/

No final o package.json tem que ficar parecido com isso:

{
  "name": "my-app",
  "version": "0.1.0",
  "homepage": "https://WillianMedeiros14.github.io/teste_react",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

Passo 3: Faça o commit das suas alterações:

Passo 4: Criar a Branch gh-pages

git checkout -b gh-pages

Passo 3: Faça o commit das suas alterações novamente:

Passo 5: Fazer o Deploy

npm run deploy

caso queira com uma mensagem diferente, pode rodar o comando abaixo adicionado sua mensagem.

npm run deploy -- -m "Deploy React app to GitHub Pages"

Passo 6: Configurar o GitHub Pages

Navegue até a página de configurações do GitHub Pages Acima do navegador de código, clique na guia "Configurações" Na barra lateral, na seção "Código e automação", clique em "Páginas" Defina as configurações de "Build e implantação" da seguinte forma: Origem: Implantar de um branch Ramo: Ramo: gh-pages Pasta: / (root) Clique no botão "Salvar"

É isso! O aplicativo React foi implantado no GitHub Pages!

Eu fiz uma aplicação de exemplo para testar, pode ser encontrada bos links abaixo:

https://github.com/WillianMedeiros14/teste_react https://willianmedeiros14.github.io/teste_react/

Sucesso Estudante.