Fazendo o Deploy do site com GitHub Actions

Configurar um site com GitHub Actions para fazer o deploy automático via FTP transforma seu fluxo de trabalho: você faz o git push e o GitHub cuida do resto.

O presente howto explica como fazer o deploy do seu site com GitHub Actions via FTP, comum em hospedagem compartilhada.

Segue os procedimentos:

1. Salve suas credenciais com segurança

Nunca coloque senhas diretamente no código. No seu repositório no GitHub:

Vá em Settings > Secrets and variables > Actions.

Clique em New repository secret e adicione:

FTP_SERVER: O endereço ou nome de domínio do seu servidor.

FTP_USERNAME: Seu usuário de FTP.

FTP_PASSWORD: Sua senha de FTP.

2. Crie o arquivo de Workflow

No seu projeto local, crie a pasta .github/workflows/ e, dentro dela, um arquivo chamado main.yml. Cole o conteúdo abaixo:

Se o site foi desenvolvido apenas com HTML, CSS e JS

No seu projeto local, crie o diretório .github/workflows/ e, dentro dela, um arquivo chamado main.yml. Segue:

.github/workflows/main.yml

Se o site foi desenvolvido com React

Diferente de um site estático simples (HTML/CSS/JS), o navegador não entende diretamente seu código React (JSX). O GitHub Actions precisa rodar o comando de compilação para criar a pasta final com os arquivos otimizados.

No seu arquivo .github/workflows/main.yml, use esta estrutura

.github/workflows/main.yml

3. Suba as alterações

Agora basta commitar e enviar para o GitHub:

git add .

git commit -m "Configurando deploy automático"

git push origin main


Você pode acompanhar o progresso em tempo real na aba Actions do seu repositório. Se tudo estiver certo, seu site será atualizado em poucos segundos!

Pontos importantes para React:

Diretório Local (local-dir): Se você usa Vite (o padrão atual), a pasta de saída é a dist/. Se usa o antigo Create React App, é a build/.

Roteamento (SPA): Se o seu site usa react-router-dom, lembre-se de configurar um arquivo .htaccess no seu servidor para redirecionar todas as rotas para o index.html, caso contrário, você receberá erro 404 ao atualizar a página.

Variáveis de Ambiente: Se o seu React usa .env, você precisará cadastrar essas variáveis nos Secrets do GitHub e injetá-las no passo de build.

Caso criou o projeto React com Vite, precisa adicionar uma configuração.

O segredo aqui é que o GitHub Actions vai criar um "computador virtual", instalar o Node.js, baixar suas bibliotecas e transformar seu código JSX em arquivos que qualquer servidor entende.

Dica de Ouro: O arquivo .htaccess

Para sites React (Single Page Applications), se você não configurar o servidor, as rotas (ex: ://seusite.com) darão erro 404 ao atualizar a página. Crie um arquivo chamado .htaccess na sua pasta public do projeto com este conteúdo:

  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]

ATENÇÃO

1. Verifique se o nome da pasta de saída no seu projeto é realmente dist (padrão do Vite) ou build.
2. Certifique-se de que as Secrets (FTP_SERVER, FTP_USERNAME, FTP_PASSWORD) foram adicionadas corretamente no GitHub.
3. Faça o git push e acompanhe a "mágica" na aba Actions.

Feito!