Site do Gerador de release
Site institucional para divulgar e disponibilizar o download do app Gerador de release (Android e iPhone), com passo a passo de uso, instruções de instalação e espaços preparados para anúncios (monetização).
Este guia foi escrito para quem nunca publicou um site antes — siga na ordem.
1. O que tem em cada arquivo
davidfsantos10.github.io/
├── index.html → Página principal (site institucional)
├── privacidade.html → Política de Privacidade (obrigatória para anúncios)
├── ads.txt → Autorização do Google AdSense
├── assets/
│ ├── css/style.css → Todo o visual do site institucional
│ ├── js/main.js → Menu mobile, abas Android/iPhone, FAQ
│ └── img/ → (vazio) coloque aqui screenshots/ícone reais do app
├── app/ → O APLICATIVO em si (formulário de release) — ver seção 8
└── README.md → Este guia
Não existe "banco de dados" nem servidor: é um site estático (só HTML/CSS/JS). Isso significa que ele é grátis e simples de hospedar.
2. Ver o site no seu computador (antes de publicar)
- Baixe/atualize os arquivos deste repositório no seu computador.
- Dê duplo clique no arquivo
index.html. Ele abre no seu navegador normalmente.
- Navegue pelo site, teste o menu, as abas de instalação e o FAQ.
Isso é só para conferir visualmente — ainda não está "no ar" para outras pessoas acessarem.
3. Publicado de graça com GitHub Pages ✅
O site já está no ar, publicado a partir deste repositório (que foi renomeado para davidfsantos10.github.io — esse nome especial faz o GitHub Pages servir o site direto na raiz do domínio, sem precisar de domínio próprio):
https://davidfsantos10.github.io/
- Fonte: Settings → Pages → branch
claude/release-generator-website-1jbiqe, pasta / (root).
- Sempre que uma alteração for enviada (
git push) para essa branch, o site atualiza sozinho em 1–2 minutos.
- Se um dia quiser voltar a usar um nome de repositório "normal" (ex.:
projeto-release) em vez do formato especial usuario.github.io, será necessário configurar um domínio próprio (seção abaixo) para manter uma URL "raiz" — do contrário a URL volta a ter /nome-do-repositorio no final.
Quero um domínio próprio (ex: geradorderelease.com.br)
- Compre um domínio em um registrador, por exemplo:
- registro.br — para domínios
.com.br (mais barato para brasileiros);
- Namecheap, GoDaddy, Google Domains — para domínios
.com, .app, etc.
- No painel do domínio, procure por DNS e crie os registros que o GitHub Pages pede (documentação oficial: GitHub Pages → Managing a custom domain). Em resumo:
- Um registro CNAME apontando
www para davidfsantos10.github.io;
- Registros A apontando o domínio raiz para os IPs do GitHub Pages (185.199.108.153, 185.199.109.153, 185.199.110.153, 185.199.111.153).
- No repositório, em Settings → Pages → Custom domain, digite seu domínio e salve.
- Aguarde a propagação (pode levar de alguns minutos a 24h).
Isso é totalmente opcional — o link gratuito do GitHub Pages já funciona perfeitamente para divulgar o app.
4. Como monetizar com anúncios (Google AdSense)
O jeito mais comum e confiável de colocar anúncios em um site é o Google AdSense. Passo a passo:
4.1 Antes de se cadastrar
- O site precisa estar no ar (publicado, com um link acessível — veja o passo 3).
- É obrigatório ter uma Política de Privacidade publicada — já deixei pronta em
privacidade.html, mas revise o conteúdo (está marcado como "[MODELO]") antes de divulgar, principalmente as seções sobre quais dados o app realmente coleta.
- E-mail de contato já configurado:
[email protected] (rodapé, FAQ e política de privacidade).
4.2 Cadastro
- Acesse adsense.google.com e clique em Comecar.
- Informe o link do seu site (o do GitHub Pages ou seu domínio próprio) e seu e-mail.
- O Google vai te dar um trecho de código parecido com este:
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXXX" crossorigin="anonymous"></script>
- Cole esse código dentro da tag
<head> do arquivo index.html (já deixei um comentário GOOGLE ADSENSE marcando exatamente onde) e de privacidade.html.
- Envie o site para análise. A aprovação pode levar de alguns dias a algumas semanas. O Google vai revisar se o conteúdo está de acordo com as políticas deles (conteúdo original, política de privacidade, navegação funcionando, etc.).
4.3 Depois de aprovado: colocar os blocos de anúncio
No site já existem 3 espaços reservados para anúncios, marcados assim no index.html:
<div class="ad-slot ad-slot--section">
<div class="ad-inner">
<!-- ESPAÇO DE ANÚNCIO — troque este bloco pelo <ins class="adsbygoogle">...</ins> do AdSense. -->
Espaço reservado para anúncio (banner responsivo)
</div>
</div>
Para cada um desses blocos:
- No painel do AdSense, crie um novo bloco de anúncios ("Anúncios de display", responsivo).
- O Google vai te dar um código parecido com:
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-XXXXXXXXXXXXXXX"
data-ad-slot="XXXXXXXXXX"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
- Substitua o
<div class="ad-inner">...</div> inteiro por esse código.
- Repita para os outros dois espaços de anúncio.
- Publique a alteração (commit + push) e aguarde os anúncios começarem a aparecer (pode levar algumas horas).
Dica: não clique nos próprios anúncios para "testar" — o Google pode banir sua conta por cliques inválidos. Use a ferramenta de pré-visualização do próprio AdSense.
5. Links de download
Todos os botões "Baixar para Android" / "Baixar para iPhone" do site (no topo, na seção de instalação e na seção final) já apontam para as páginas de instalação reais:
- Android:
https://gerador-de-release.netlify.app/android.html
- iPhone:
https://gerador-de-release.netlify.app/ios.html
Os botões abrem essas páginas em uma nova aba (target="_blank"), já que elas ficam em outro domínio (Netlify).
Se um dia o app for publicado também na Google Play ou na App Store, procure por href="https://gerador-de-release.netlify.app/..." no index.html (aparece 6 vezes) e troque pelo link da loja, no formato:
- Google Play:
https://play.google.com/store/apps/details?id=com.seudominio.geradorderelease
- App Store:
https://apps.apple.com/br/app/nome-do-app/idXXXXXXXXXX
- TestFlight (beta):
https://testflight.apple.com/join/XXXXXXXX
Também existem 3 outros lugares com botões "Baixar" (no menu, no topo/hero e na seção de instalação) — todos apontam para #download, que rola até a seção final. Você só precisa atualizar os 2 links reais dentro da download-cta (seção "Pronto para agilizar seus releases?").
Sobre os QR Codes
Os quadrados com texto "QR Code de download" em #instalacao são só placeholders visuais. Quando tiver os links reais, gere os QR Codes de graça em qrcode-monkey.com ou similar, baixe a imagem e substitua o <div class="qr-box">...</div> por uma tag <img src="assets/img/qr-android.png" alt="QR Code Android"> (o mesmo para o iPhone).
Sobre as imagens/ícone
A pasta assets/img/ está vazia — o site usa um "mockup" de telefone feito só em HTML/CSS (sem imagem real) e um ícone simples com a letra "R". Quando tiver o ícone e screenshots reais do app, é só:
- Colocar os arquivos em
assets/img/;
- Trocar o favicon (procure
<link rel="icon" nos dois arquivos HTML) e a brand-mark pelo ícone real, se quiser;
- Opcionalmente, trocar o
.phone-mock do topo por um <img> com um screenshot real do app.
6. Checklist antes de divulgar o site de verdade
7. Manutenção do dia a dia
- Qualquer alteração de texto é feita direto nos arquivos
.html (procure o texto que quer mudar e edite).
- Cores, fontes e espaçamentos ficam todos em
assets/css/style.css, no topo, dentro de :root { ... }.
- Depois de qualquer alteração: salve, faça
git add, git commit e git push para a branch main — o GitHub Pages atualiza sozinho.
Se tiver dúvida em qualquer passo, pode pedir para o Claude te ajudar de novo — é só descrever o que está tentando fazer (ex.: "não sei como configurar o DNS do meu domínio" ou "quero trocar a cor do botão verde").
8. O aplicativo (pasta app/)
Além do site institucional, este repositório também hospeda o aplicativo em si — o formulário que gera o texto do release (campos de CPR, Batalhão, conduzidos, histórico, etc.). Ele vive na pasta app/ e é publicado automaticamente em:
https://davidfsantos10.github.io/app/
Por que ele foi movido para aqui
O app originalmente era hospedado no Netlify, editado através do agente de IA integrado ao painel deles. O problema: o plano gratuito do Netlify tem um limite de "créditos operacionais" para esse agente e para publicações em produção — quando esgota, as atualizações ficam paradas até o próximo ciclo de faturamento (ou até fazer upgrade pago).
O GitHub Pages não tem esse tipo de limite para sites estáticos como este, então a partir de agora o app roda por aqui, sem risco de ficar bloqueado por falta de créditos.
Arquivos dentro de app/
app/
├── index.html → O aplicativo completo (formulário, lógica, histórico) — tudo em um único arquivo
├── android.html → Página de instalação para Android
├── ios.html → Página de instalação para iPhone
├── manifest.json → Configuração do PWA (nome, ícone, cores)
├── sw.js → Service worker (permite instalar/funcionar offline)
├── icon-192.png, icon-512.png, icon-maskable-512.png → Ícones do app
├── robots.txt / sitemap.xml → SEO básico
Como editar o app a partir de agora
Diferente do Netlify, aqui não existe um "chat com agente de IA" dentro do próprio hospedeiro. As edições passam a ser feitas normalmente aqui com o Claude Code: descreva o que quer mudar (ex.: "quero mudar a cor do botão de gerar release" ou "adiciona um campo X no formulário"), a edição é feita direto no app/index.html, e publicada com commit + push — sem limite de créditos.
Como é um único arquivo HTML com CSS e JavaScript embutidos (sem processo de build), qualquer editor de texto também serve para ajustes manuais simples, se preferir fazer você mesmo.
Se quiser um domínio próprio só para o app
Hoje o app fica em davidfsantos10.github.io/app/ (um subcaminho do mesmo site). Se no futuro quiser um endereço mais direto (ex.: app.geradorderelease.com.br), é possível configurar um domínio próprio apontando especificamente para essa pasta — me avise quando quiser fazer isso.
