Guia da agênciaAgency playbook
O site no ar não é a entrega inteira.The site going live is not the whole delivery.
Qual hospedagem uma agência deve padronizar para landing pages, sites institucionais e pequenos apps, como trabalhar com previews e deploys, de quem deve ser cada conta, e o pacote de entrega que deixa o cliente seguir sem você.Which hosting an agency should standardise on for landing pages, company websites and small apps, how to run previews and deploys, who should own each account, and the handover package that lets the client carry on without you.
Uma stack padrão por tipo de projetoOne default stack per project type
Uma agência pequena ganha dinheiro repetindo o que já sabe fazer bem. Escolher a hospedagem do zero a cada cliente custa horas e gera um parque de projetos diferentes entre si, cada um com o seu jeito de publicar, de quebrar e de ser consertado. O melhor é ter um padrão por tipo de projeto e só sair dele com motivo.A small agency makes money by repeating what it already does well. Picking hosting from scratch for every client costs hours and leaves a fleet of projects that are all different: each one deploys, breaks and gets fixed its own way. Better to have one default per project type and only leave it for a reason.
| Tipo de projetoProject type | Stack sugeridaSuggested stack | Hospedagem padrãoDefault hosting |
|---|---|---|
| Landing pageLanding page | HTML/CSS ou Astro, formulário por serviço externoHTML/CSS or Astro, form through an external service | Cloudflare Pages |
| Site institucionalCompany website | Astro ou Next.js estático + CMS headless se o cliente for editarAstro or static Next.js + headless CMS if the client will edit | Cloudflare Pages ou NetlifyCloudflare Pages or Netlify |
| Blog ou site que o cliente edita sozinhoBlog or site the client edits alone | WordPress gerenciado, ou Astro + CMS (Decap, Sanity, TinaCMS)Managed WordPress, or Astro + CMS (Decap, Sanity, TinaCMS) | hospedagem WordPress gerenciada / Netlifymanaged WordPress hosting / Netlify |
| Pequeno app (login, painel, banco)Small app (login, dashboard, database) | Next.js ou React + API, Supabase para banco e authNext.js or React + API, Supabase for database and auth | Vercel (plano Pro) ou Netlify + SupabaseVercel (Pro plan) or Netlify + Supabase |
| API ou processo sempre ligadoAlways-on API or worker | container DockerDocker container | Railway, Render, Fly.io ou VPS com CoolifyRailway, Render, Fly.io or a VPS with Coolify |
Preços, limites dos planos gratuitos e alternativas estão em Hospedagem e bancos para pequenos projetos. Aqui o foco é como a agência opera com essas plataformas.Prices, free-tier limits and alternatives are in Hosting and databases for small projects. Here the focus is how the agency operates these platforms.
Como as plataformas se comparam para uma agênciaHow the platforms compare for an agency
| Cloudflare Pages | Netlify | Vercel | GitHub Pages | |
|---|---|---|---|---|
| Melhor paraBest for | sites estáticos com muito tráfego, DNS no mesmo lugarhigh-traffic static sites, DNS in the same place | sites com formulários e CMS, fluxo simplessites with forms and a CMS, simple workflow | Next.js e apps com renderização no servidorNext.js and server-rendered apps | documentação, projetos open source, sites pessoaisdocs, open-source projects, personal sites |
| Deploy de preview por PRPreview deploy per PR | simyes | simyes | simyes | não nativonot built in |
| FormuláriosForms | via Worker/Pages Function + Turnstilevia a Worker/Pages Function + Turnstile | Netlify Forms, sem back-endNetlify Forms, no back end | via função serverless ou serviço externovia a serverless function or external service | só serviço externoexternal service only |
| Uso comercial no plano grátisCommercial use on the free plan | permitidoallowed | permitidoallowed | não: o Hobby é só pessoal; cliente pagante vai no Prono: Hobby is personal only; paying clients go on Pro | não é feito para negócio ou e-commercenot meant for a business or e-commerce |
| Transferir projeto para o clienteTransfer the project to the client | recriar na conta do cliente (o repositório é o que importa)recreate on the client's account (the repository is what matters) | transferir o site entre timestransfer the site between teams | transferir o projeto entre timestransfer the project between teams | transferir o repositóriotransfer the repository |
Para landing pages e sites institucionais, um site estático é quase sempre a resposta certa: não tem servidor para atualizar, não tem banco para invadir, custa perto de zero e aguenta pico de tráfego de campanha sem ninguém acordar de madrugada.For landing pages and company websites, a static site is almost always the right answer: no server to patch, no database to breach, close to zero cost, and it survives a campaign traffic spike without anyone waking up at night.
O fluxo de trabalhoThe workflow
O mesmo fluxo para todos os clientes: código no Git, cada mudança vira um preview com URL própria para o cliente aprovar, e o merge na branch principal publica em produção.The same workflow for every client: code in Git, every change becomes a preview with its own URL for the client to approve, and the merge into the main branch publishes to production.
- Um repositório por cliente, numa organização do GitHub da agência enquanto o projeto está em desenvolvimento (ou já na do cliente, se ele tiver uma).One repository per client, in the agency's GitHub organization while the project is in development (or already in the client's, if they have one).
- Variáveis de ambiente na plataforma, nunca no código. Liste todas no README (nome e para que serve, sem o valor).Environment variables on the platform, never in the code. List them all in the README (name and purpose, never the value).
- Domínio de teste (o
*.pages.dev,*.netlify.appou*.vercel.app) até a aprovação; o domínio do cliente só entra no go-live.Test domain (the*.pages.dev,*.netlify.appor*.vercel.app) until approval; the client's domain only comes in at go-live. - Rollback é um clique: as três plataformas guardam os deploys anteriores e permitem voltar para qualquer um.Rollback is one click: all three platforms keep previous deploys and let you go back to any of them.
O que quase todo site precisa além do HTMLWhat almost every site needs besides the HTML
| NecessidadeNeed | Opções simplesSimple options |
|---|---|
| Formulário de contatoContact form | Netlify Forms, Formspree, Web3Forms, ou uma função própria com Cloudflare Turnstile contra spamNetlify Forms, Formspree, Web3Forms, or your own function with Cloudflare Turnstile against spam |
| Cliente editar textos e postsClient edits copy and posts | CMS headless (Decap, Sanity, TinaCMS) ou WordPress quando a edição livre é o produtoHeadless CMS (Decap, Sanity, TinaCMS) or WordPress when free editing is the product |
| Métricas de visitaVisit analytics | Cloudflare Web Analytics ou Plausible (sem cookies), ou GA4 na conta do clienteCloudflare Web Analytics or Plausible (cookie-free), or GA4 in the client's account |
| Aparecer no GoogleShowing up on Google | Search Console verificado pelo DNS do domínio do cliente; veja SEO e busca por IASearch Console verified through the client's domain DNS; see SEO and AI search |
| E-mail no domínioEmail on the domain | Google Workspace, Microsoft 365, Zoho; veja Identidade e contas da empresaGoogle Workspace, Microsoft 365, Zoho; see Company identity and accounts |
De quem são as contasWho owns the accounts
Há dois modelos honestos. O que não é honesto é deixar o cliente sem saber qual dos dois ele contratou.There are two honest models. What is not honest is leaving the client unaware of which one they signed up for.
| Contas do clienteClient-owned accounts | Hospedagem gerenciada pela agênciaAgency-managed hosting | |
|---|---|---|
| Como funcionaHow it works | o cliente cria as contas (domínio, hospedagem, GitHub) e convida a agência como membrothe client creates the accounts (domain, hosting, GitHub) and invites the agency as a member | o site roda no time da agência, e a hospedagem é cobrada como parte da mensalidadethe site runs in the agency's team, and hosting is billed as part of the monthly fee |
| Bom paraGood for | clientes com equipe técnica ou que querem independênciaclients with a tech team or who want independence | clientes que querem "não pensar nisso" e pagam manutençãoclients who want to "not think about it" and pay for maintenance |
| RiscoRisk | o cliente perde o acesso ou o cartão expira e ninguém percebethe client loses access or the card expires and nobody notices | dependência da agência; precisa de plano de saída no contratodependence on the agency; needs an exit plan in the contract |
Nos dois modelos, o domínio é sempre registrado no nome e na conta do cliente.In both models, the domain is always registered in the client's name and account.
No modelo gerenciado pela agência, lembre que planos gratuitos com restrição de uso comercial (como o Hobby da Vercel) não servem para site de cliente. Use o plano pago do time da agência e repasse o custo.In the agency-managed model, remember that free plans with commercial-use restrictions (like Vercel's Hobby) do not cover client sites. Use the agency team's paid plan and pass the cost on.
O que entregar ao clienteWhat to hand over to the client
O site no ar não é a entrega inteira. A entrega é o cliente conseguir continuar sem você, mesmo que ele prefira não fazer isso. Monte um pacote de entrega igual para todo projeto:The live site is not the whole delivery. The delivery is the client being able to carry on without you, even if they would rather not. Build the same handover package for every project:
| ItemItem | O que éWhat it is |
|---|---|
| DomínioDomain | no nome do cliente, com renovação automática e o login do registrador com elein the client's name, auto-renewing, with the registrar login in their hands |
| Código-fonteSource code | repositório transferido para a organização do cliente no GitHub (ou um .zip com o histórico, se ele não tiver conta)repository transferred to the client's GitHub organization (or a .zip with history if they have no account) |
| HospedagemHosting | projeto na conta do cliente, ou acordo escrito do modelo gerenciadoproject on the client's account, or a written agreement for the managed model |
| Registros DNSDNS records | lista de cada registro e para que serve (site, e-mail, verificações)a list of each record and what it is for (site, email, verifications) |
| Acessos e credenciaisAccess and credentials | compartilhados por um gerenciador de senhas ou por convite de membro, nunca por e-mail ou WhatsAppshared through a password manager or a member invite, never by email or WhatsApp |
| README | como rodar localmente, como publicar, variáveis de ambiente, serviços usadoshow to run locally, how to publish, environment variables, services used |
| Manual do editorEditor's guide | se houver CMS: como editar textos, trocar imagens, publicar um post (vídeo curto vale ouro)if there is a CMS: how to edit copy, swap images, publish a post (a short video is gold) |
| Analytics e Search ConsoleAnalytics and Search Console | propriedades criadas na conta do cliente, com a agência como usuáriaproperties created in the client's account, with the agency as a user |
| Arquivos de marca e mídiaBrand and media files | logos, fontes (com licença), imagens originais, textos finaislogos, fonts (with licence), original images, final copy |
| Privacidade (LGPD)Privacy (LGPD/GDPR) | política de privacidade, aviso de cookies se houver rastreamento, onde ficam os dados dos formuláriosprivacy policy, cookie notice if there is tracking, where form submissions are stored |
| Termo de entregaDelivery acceptance | documento assinado listando o que foi entregue, a garantia e o que é manutenção pagaa signed document listing what was delivered, the warranty and what is paid maintenance |
As cláusulas que tornam isso obrigatório (cessão de direitos, prazo de garantia, manutenção) estão em Contratos e preços para pequenos projetos web.The clauses that make this binding (rights assignment, warranty period, maintenance) are in Contracts and pricing for small web projects.
Um README de entregaA handover README
# cliente.com.br
## Stack
Astro 5 · Cloudflare Pages · Formspree (contact form) · Plausible (analytics)
## Run locally
npm ci
npm run dev # http://localhost:4321
## Publish
Merge into main. Cloudflare Pages builds and publishes on its own.
Every pull request gets a preview URL.
## Environment variables (Cloudflare Pages → Settings → Variables)
PUBLIC_FORM_ENDPOINT Formspree form URL
PUBLIC_SITE_URL https://cliente.com.br
## Accounts (all owned by the client)
Domain Registro.br contato@cliente.com.br
Hosting Cloudflare contato@cliente.com.br
Repository github.com/cliente-org/site
Analytics Plausible contato@cliente.com.br
## DNS
@ CNAME cliente-site.pages.dev site
www CNAME cliente-site.pages.dev site
@ MX ... email (Google Workspace)
@ TXT google-site-verification Search ConsoleChecklist de go-liveGo-live checklist
- Domínio do cliente apontado, HTTPS ativo,
wwwredirecionando para o principal (ou o contrário).Client domain pointed, HTTPS on,wwwredirecting to the main host (or the other way round). - Formulários testados de ponta a ponta: a mensagem chega na caixa certa e não cai no spam.Forms tested end to end: the message reaches the right inbox and does not land in spam.
- Título, descrição e imagem de compartilhamento em cada página;
sitemap.xmlerobots.txtpublicados; Search Console verificado.Title, description and share image on every page;sitemap.xmlandrobots.txtpublished; Search Console verified. - Teste no celular de verdade, não só no modo responsivo do navegador.Test on a real phone, not just the browser's responsive mode.
- Página 404, favicon, redirecionamentos das URLs antigas (se o site substituiu outro).404 page, favicon, redirects from old URLs (if the site replaced another one).
- Monitor de disponibilidade simples (UptimeRobot, Better Stack) avisando a agência e o cliente.A simple uptime monitor (UptimeRobot, Better Stack) alerting the agency and the client.
- Pacote de entrega enviado e termo de entrega assinado.Handover package sent and delivery acceptance signed.
Depois do go-live, ofereça manutenção com escopo claro (atualizações, pequenas alterações por mês, monitoramento). Sites estáticos quase não quebram sozinhos; o que o cliente compra é ter alguém para chamar.After go-live, offer maintenance with a clear scope (updates, small changes per month, monitoring). Static sites almost never break on their own; what the client buys is someone to call.
Cola e revisãoCheat sheet and review
- Landing page ou institucional: site estático no Cloudflare Pages ou Netlify.Landing page or company site: a static site on Cloudflare Pages or Netlify.
- App com servidor: Vercel no plano pago ou Netlify, com Supabase.App with a server: Vercel on a paid plan or Netlify, with Supabase.
- Preview por PR, aprovação por escrito, merge publica, rollback em um clique.Preview per PR, written approval, merge publishes, one-click rollback.
- Domínio sempre do cliente; o resto depende do modelo combinado.The domain always belongs to the client; the rest depends on the agreed model.
- Entrega = código, acessos, DNS, README, manual, analytics, privacidade e termo assinado.Handover = code, access, DNS, README, guide, analytics, privacy and a signed acceptance.
Perguntas de revisãoReview questions
- Por que um site estático é a escolha padrão para landing pages?Why is a static site the default choice for landing pages?
- Por que o plano Hobby da Vercel não serve para o site de um cliente?Why does Vercel's Hobby plan not cover a client's website?
- Quais são os dois modelos de propriedade de contas e o que é igual nos dois?What are the two account-ownership models and what is the same in both?
- O cliente quer trocar de agência amanhã. O que ele precisa ter recebido para isso ser fácil?The client wants to switch agencies tomorrow. What must they have received for that to be easy?