Como fazer o Deploy no GitHub Pages

  1. Crie um repositório no GitHub:

    No terminal vá para dentro da pasta do projeto, neste caso gamagit, e de o seguinte comando:

    git init

    git remote add origin git@github.SEU_USUARIO/gamagit.git

    Lembre-se de substituir SEU_USUARIO pelo seu usuário do GitHub, e o gamagit para o nome do seu repositório caso seja outro.

  2. Instale o gh-pages como dependência

    npm add -D gh-page

  3. Adicione essas propriedades no package.json

    "homepage": "https://SEU_USUARIO.github.io/gamagit",
    "scripts": {
      "predeploy": "npm run build",
      "deploy": "gh-pages -d build",
    },
    

    Lembre-se de substituir SEU_USUARIO pelo seu usuário do GitHub, e o gamagit para o nome do seu repositório caso seja outro.

  4. Configure o arquivo de rotas da aplicação

    Se seu projeto não tem rotas na aplicação ou se ele não utiliza a biblioteca react-router-dom, você pode pular este passo.

    Caso possua, para que a aplicação possa carregar todas as rotas corretamente, adicione no componente BrowserRouter a propriedade basename={process.env.PUBLIC_URL}

    No nosso caso está no arquivo routes.js:

    <BrowserRouter basename={process.env.PUBLIC_URL}>
    // ...
    </BrowserRouter>
    
  5. Dê o comando de deploy

    npm run deploy

    Vai ser solicitado para digitar o nome do seu usuário no GitHub, digíte e de Enter

    Vai ser solicitado o Password, mas na verdade não é a senha, e sim o Token de acesso do GitHub (pelo menos no meu caso), cole e de Enter

    Se aparecer a mensagem Published o deploy foi um sucesso.

  6. Acesse a sua aplicação

    Após o processo de deploy ser concluído, a sua aplicação já estará no ar.

    Agora basta acessar https://SEU_USUARIO.github.io/gamagit substituindo SEU_USUARIO pelo seu nome do usuário no GitHub e gamagit pelo nome do repositório caso seja outro.

    Caso a sua aplicação não esteja no ar, aguarde alguns instantes e depois tente novamente. É normal demorar um pouco para que o link comece a funcionar.

18 Likes

Link do meu projeto: React App

Link do meu repositório: GitHub - Jorggyh/gamagit: Projeto feito durante o Hiring Coders 3 com a Gama Academy

5 Likes

Animal!!! Me surpreendi quando apareceram todos meus repositorios la.

2 Likes

como consigo o deploy junto do meu server express?

2 Likes

Muito bom

2 Likes

Muito legal! Obrigado por compartilhar

2 Likes

Nunca estudei express, não sei dizer se é diferente :face_with_diagonal_mouth:

Muito bom!!

1 Like

Caramba, postagem muito massa.

1 Like