Insights / Artigos técnicos
Como projetar um site Astro + Cloudflare que cresce por funcionalidade
Como combinamos Astro e Cloudflare Pages com chat de contato com IA, Sveltia CMS, blog multilíngue, CTA de serviços, renderização segura de Markdown e comentários sem serviço externo.
Sumário
Ao começar com Astro e Cloudflare Pages, normalmente basta publicar páginas estáticas rápidas e seguras.
Depois surgem novas necessidades: edição pelo navegador, páginas localizadas, orientação com chat de IA, contexto do serviço no formulário e comentários.
Este artigo é um índice de implementação: ajuda a decidir em qual camada cada função fica, em que ordem adicionar e qual guia detalhado ler depois. O exemplo é o site da Acecore, mas o padrão funciona em outros sites Astro + Cloudflare.
Resumo
A arquitetura separa responsabilidades:
| Camada | Responsabilidade |
|---|---|
| Astro | Páginas, blog, OGP, RSS, sitemap e UI |
| Cloudflare | Pages, Pages Functions, D1 e Turnstile |
| GitHub | PRs, diffs de CMS, traduções e histórico |
| Sveltia CMS | Fonte japonesa, autores, tags e imagens |
| OpenAI API | Respostas do chat de contato |
| Pagefind | Índice de busca para HTML revisado |
O que pode ser estático fica estático. O que precisa de runtime vai para pequenas APIs.
APIs pequenas no Cloudflare
Chat com IA e comentários seguem o mesmo padrão.
Astro renderiza a UI. Pages Functions cuida da fronteira de API. Secrets, bindings D1, Turnstile, Origin checks e rate limit ficam fora do navegador.
CMS como interface de edição
Sveltia CMS não é banco de dados em runtime. Ele cria mudanças no Git.
Conteúdo japonês, autores, tags, imagens e JSON passam por PR, build e review antes de produção.
Tradução como conteúdo estático
Localização não é só traduzir a tela no navegador.
Cada idioma tem URL, title, description, OGP, JSON-LD, RSS, sitemap e hreflang próprios.
Canais de contato separados
O chat com IA ajuda quem ainda está escolhendo. O CTA de serviço preserva contexto. O formulário registra a consulta formal.
Cada um tem uma função.
Saída de IA não é HTML confiável
Links Markdown vindos da IA são tratados como texto até serem validados.
Só links permitidos por allowlist viram nós DOM seguros.
Comentários dentro do Cloudflare
Os comentários não usam widget externo.
Pages Functions recebe GET/POST, D1 guarda comentários e Turnstile protege envios. Para um blog institucional pequeno, isso é suficiente.
Ler por objetivo
Não é preciso ler tudo primeiro. Comece pela função que você quer adicionar.
| Objetivo | Leia primeiro |
|---|---|
| Editar artigos e imagens pelo navegador | Guia de instalação do Sveltia CMS |
| Publicar páginas multilíngues indexáveis | Como operar um blog multilíngue com Sveltia CMS |
| Orientar visitantes com chat de IA | Design técnico do chat de contato com IA |
| Renderizar links seguros em respostas de IA | Renderização segura de links Markdown em respostas de IA |
| Levar contexto do serviço ao formulário | Passar contexto do CTA para o formulário |
| Adicionar comentários sem serviço externo | Comentários de blog Astro usando só Cloudflare |
Ordem de implementação
Para um site parecido, a ordem prática é:
- Consolidar páginas estáticas, blog, RSS, sitemap e OGP com Astro.
- Adicionar Sveltia CMS para editar a fonte japonesa.
- Gerar páginas localizadas como HTML estático.
- Adicionar orientação com chat de IA e CTAs de serviço.
- Proteger links Markdown, prefill de formulário, Origin checks e rate limits.
- Adicionar comentários dentro do Cloudflare só quando forem necessários.
Conclusão
Astro + Cloudflare permite ampliar um site institucional sem perder as vantagens da entrega estática.
Use esta página como entrada e adicione apenas as partes que seu site precisa, sem enfraquecer a base estática.
Site Architecture
Camadas de expansão do site
Manter o site estático por padrão e adicionar partes dinâmicas só quando necessário.
Entregar
Gerar HTML com Astro e publicar no Cloudflare Pages.
Editar
Editar a fonte japonesa no Sveltia CMS e revisar por PRs.
Traduzir
Separar traduções em PRs, sem expor todos os idiomas no CMS.
Guiar
Usar chat com IA e CTAs de serviço para levar o visitante ao formulário certo.
Diferenças entre apenas adicionar funções e adicioná-las como uma arquitetura completa
Adicionar função por função
- IA, CMS, comentários e formulários acabam seguindo princípios de projeto diferentes
- Scripts e painéis de serviços externos aumentam, dispersando a responsabilidade de explicação
- URLs multilíngues, índice de pesquisa e ambiente de preview ficam sujeitos a divergências
- A relação entre as funções não fica visível, dificultando decidir a ordem de adoção
Adicionar por camadas
- É possível explicar separadamente os papéis de Astro, Cloudflare, GitHub e da API da OpenAI
- As APIs dinâmicas ficam concentradas em Pages Functions, e o armazenamento pode ser aproximado do Cloudflare com D1
- Atualizações do CMS, tradução multilíngue, pesquisa, RSS e sitemap usam a mesma estrutura de conteúdo
- O conteúdo fica fácil de percorrer como índice por finalidade e ordem de adoção
Verificação de projeto ao reutilizar a arquitetura em outro site
- Separar o que pode ser gerado estaticamente do que exige uma API
- Separar o CMS como entrada de edição, a tradução como PR e a decisão de publicação como build
- Não enviar dados pessoais à IA de atendimento; permitir orientação apenas com informações publicadas
- Transmitir o contexto do formulário por parâmetros de URL e manter valores recebidos em categorias estáveis
- Definir explicitamente na configuração o nome físico do D1 e o binding de dados enviados, como comentários
- Não confiar em saídas da IA nem em conteúdo enviado por usuários como HTML; usar listas de permissões
Páginas relacionadas
- Design técnico do chat de contato com IAFronteiras de API e controle de respostas usando informações do site.
- Guia de instalação do Sveltia CMSCMS, GitHub backend, OAuth e operação com PRs para sites estáticos.
- Blog multilíngue com Sveltia CMSPublicar páginas estáticas localizadas em vez de depender só de tradução na UI.
- Passar contexto do CTA para o formulárioLevar o contexto do serviço lido para categoria e assunto do formulário.
- Renderização segura de links Markdown em IARenderizar links permitidos sem tratar a saída de IA como HTML confiável.
- Comentários de blog usando só CloudflareComentários sem serviço externo, com Pages Functions, D1 e Turnstile.
Perguntas frequentes
Por onde devo começar?
Primeiro consolide as páginas estáticas do Astro, o blog, RSS, sitemap e OGP. Em seguida adicione CMS e vários idiomas; quando houver necessidade de uma jornada de atendimento, acrescente chat de IA, CTAs de serviços e comentários.
Tudo deve ser criado somente com Cloudflare?
Não. Algumas partes, como a IA de atendimento, usam a API da OpenAI. O importante é aproximar do Cloudflare a entrega, os limites de API, o banco de dados e a proteção contra bots, decidindo conscientemente onde usar serviços externos.
Um site pequeno também precisa de tudo isso?
Não é necessário começar com tudo. Porém, se houver planos de adicionar CMS, jornada de atendimento, vários idiomas ou comentários, definir cedo URLs, armazenamento, ambiente de preview e índice de pesquisa facilitará o trabalho futuro.