Como Hospedar sua Aplicação React no GitHub Pages

Você sabia que o GitHub Pages pode hospedar sua aplicação React de forma gratuita? Isso mesmo! O GitHub Pages é um serviço que permite hospedar sites estáticos diretamente de um repositório, sendo ideal para portfólios, documentações e blogs.

Pré-requisitos:

Antes de começar, certifique-se de que você já:

Criou um repositório no GitHub
Inicializou o Git no seu projeto
Fez o push dos arquivos para o repositório

Agora, siga os passos abaixo para publicar sua aplicação React! 👇

Instalar o gh-pages

O primeiro passo é instalar a biblioteca gh-pages, que facilitará o deploy do nosso projeto:

npm install gh-pages --save-dev

Essa lib será salva como uma dependência de desenvolvimento.

Configurar o package.json

Abra o arquivo package.json e adicione os seguintes scripts

“predeploy”: “npm run build”,

“deploy”: “gh-pages -d dist”

Esses scripts irão compilar o projeto e publicá-lo automaticamente.

Além disso, adicione a propriedade homepage para definir a URL do seu projeto no GitHub Pages.

O formato deve ser:

“Homepage”: “https://<seu-usuario>.github.io/<nome-do-repositorio>”

Substitua <seu-usuario> pelo seu nome de usuário no GitHub e <nome-do-repositorio> pelo nome do seu repositório.

Configurar o Vite (caso esteja usando Vite.js)Se seu projeto utiliza Vite, você precisa configurar a base URL no arquivo vite.config.js. Adicione a seguinte linha dentro da função defineConfig():

base: “<nome-do-repositorio>”,

Isso garantirá que os caminhos relativos da aplicação sejam configurados corretamente.

Publicar a aplicação

Agora que tudo está configurado, faça um commit das alterações e envie para o repositório:

git add .

git commit -m "mensagem"

git push origin main

Depois, execute o comando para publicar a aplicação:

npm run deploy

Se tudo estiver correto, você verá a mensagem published no terminal!

Acessar a aplicação

Agora é só acessar o link gerado pelo GitHub Pages: