Encontro 03 - Rede Daora
Publicando na Web
GitHub e Deploy
Git e GitHub como backup permanente. Vercel e Cloudflare Pages como hospedagem gratuita. E performance como UX.
Seção 01 · Por que publicar?
Por que publicar de verdade?
Próximo passo: Git, GitHub, e publicação na Vercel e no Cloudflare Pages.
Git
É a backup definitivo. É ele que guarda cada versão do seu trabalho.
GitHub
É o seu armazenamento na nuvem, onde tudo fica guardado acessível.
Vercel + Cloudflare Pages
São as vitrines onde o seu trabalho aparece para todo mundo ver.
Seção 02 · Onde o site vive?
Onde o site vive?
Todo site vive em um servidor: um computador ligado o tempo todo, que entrega os arquivos para quem pede.
| Tipo de site | O que ele usa | Custo |
|---|---|---|
| Site estático | HTML, CSS e JavaScript | Grátis - GitHub Pages, Vercel, Cloudflare |
| Site com framework | Astro, React, Next | Grátis no início |
| Site dinâmico | Login, banco de dados, pagamento | Pago |
| Loja virtual pronta | Nuvemshop, Shopify | Mensalidade |
| App de celular | Lojas de aplicativos | Taxa de publicação |
Seção 03 · Como subir o projeto
As formas de subir o projeto
São quatro caminhos. Só um deles faz o site se atualizar sozinho a cada mudança.
Upload manual
Arrastar e soltar os arquivos. Cada mudança exige refazer tudo.
Git conectado
A cada envio, o site atualiza sozinho. É o caminho recomendado.
Terminal / CLI
Comandos de texto. É o caminho mais avançado.
FTP / SFTP
Um programa para transferir arquivos para o servidor.
Seção 04 · Git
Git - o cofre de versões
Software de versionamento: uma máquina do tempo para o código. Funciona como o histórico do Google Docs.
Como funciona na prática
Seção 05 · GitHub
GitHub - o cofre na nuvem
Plataforma online para guardar projetos. É o Google Drive do código: o pendrive se perde, você acessa o Drive de qualquer lugar.
O que tem dentro de um repositório
Começar
Repositório é a pasta no GitHub onde os arquivos ficam.
Seção 06 · GitHub Pages
GitHub Pages - a vitrine grátis
Serviço gratuito do GitHub. Seu site ganha um endereço próprio. É uma vitrine grátis para o seu trabalho.
Pedir pra IA criar a integração
No Replit: "Crie a integração com GitHub Pages no meu projeto". A IA cria o workflow que publica o site.
Iniciar o Git
Tools → + → Git → Initialize repository.
Conectar ao GitHub
Connect to GitHub → login e autorização.
Commit e Push
Mensagem → Commit → Push. O Replit cria o repositório e envia os arquivos.
Ativar o Pages
Settings → Pages → Source → GitHub Actions.
Acessar
Aguardar o workflow rodar e abrir o endereço.
Como atualizar
Mudar no Replit com a IA, fazer commit e push. O Pages publica a nova versão sozinho, em alguns minutos.
Seção 07 · Vercel e Cloudflare Pages
Vercel e Cloudflare Pages - opções além do GitHub Pages
Depois do GitHub Pages, você pode publicar também na Vercel e no Cloudflare Pages. As duas se conectam ao GitHub e atualizam o site sozinho a cada envio.
Cloudflare Pages
Grátis e rápida, sem restrição de uso comercial. A escolha certa para quem quer vender.
sem limite de tráfego · deploy via Git · HTTPS grátis
Vercel Hobby
O deploy mais fácil, com CDN global. O plano grátis não permite vender nada pelo site.
limite de 100 GB/mês · deploy via Git · HTTPS grátis
Seção 08 · As 4 formas de publicar
Uma plataforma para cada momento
Cada ferramenta tem o seu papel. Escolha pela necessidade do momento.
Replit
para testar rápido
seu-nome.replit.app
Atenção: o backup expira em 30 dias no plano grátis.
GitHub Pages
para guardar e publicar grátis
seu-usuario.github.io/projeto
Site permanente, sem custo.
Vercel
para velocidade máxima
seu-projeto.vercel.app
CDN global. O Hobby não é para vender.
Cloudflare Pages
para vender sem restrição
seu-projeto.pages.dev
Grátis e sem limite de uso.
Dica: o ideal é usar mais de uma.O GitHub guarda o código (backup). O Vercel ou o Cloudflare publicam (deploy).
Seção 09 · Mini atividade
Publicar um projeto pronto
Três passos para colocar o mesmo projeto em dois lugares.
Passo 1
Exportar do Replit para o GitHub
Tools → + → Git → Initialize repository → Connect to GitHub → mensagem de commit → Commit → Push.
Passo 2
Publicar na Vercel
vercel.com → login com GitHub → Add New... → Project → Import Git Repository → escolher o repositório → Deploy.
Passo 3
Publicar no Cloudflare Pages
dash.cloudflare.com → Workers & Pages → Create → Pages → Connect to Git → autorizar → escolher o repositório → Save and Deploy.
O resultado
O mesmo código em dois lugares. Se um cair, o outro continua no ar.
Atualizar daqui pra frente
Mudar no Replit, Commit, Push. O Vercel e o Cloudflare atualizam sozinhos.
Seção 10 · Fluxo do encontro
O fluxo completo do encontro
Nove passos, na ordem. Siga e chegue até a publicação.
1
Criar o site no Replit
O site que vamos publicar.
2
Pedir pra IA criar a integração
Workflow do GitHub Pages.
3
Criar conta no GitHub
Com 2FA ativada.
4
Enviar pelo Replit
Git → Commit → Push (cria o repositório).
5
Ativar o GitHub Pages
Settings → Pages → GitHub Actions.
6
Publicar na Vercel
7
Publicar no Cloudflare Pages
Opcional.
8
Testar a performance
pagespeed.web.dev.
9
Melhorar se precisar
Se a nota ficar abaixo de 70.
Otimize o site para performance.Nota acima de 90 = mais rápido que 90% dos sites.
Seção 11 · Checklist
Checklist de publicação
Confira um a um antes de considerar o site pronto.
Site publicado e acessível?
Código salvo no GitHub (backup)?
HTTPS com cadeado?
Link do WhatsApp abre?
Fica bom no celular?
Próxima aula
Na próxima aula
Replit
primeiros sites
Fundamentos
HTML e CSS
Publicar
GitHub e deploy
OpenCode
editor com IA
→Depois dele, começa o Módulo 2 · UI/UX na prática