Ir para o conteúdo
Acecore

Como projetar um site Astro + Cloudflare que cresce por funcionalidade

by Gui
Índice
Como projetar um site Astro + Cloudflare que cresce por funcionalidade

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:

CamadaResponsabilidade
AstroPáginas, blog, OGP, RSS, sitemap e UI
CloudflarePages, Pages Functions, D1 e Turnstile
GitHubPRs, diffs de CMS, traduções e histórico
Sveltia CMSFonte japonesa, autores, tags e imagens
OpenAI APIRespostas 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.

ObjetivoLeia primeiro
Editar artigos e imagens pelo navegadorGuia de instalação do Sveltia CMS
Publicar páginas multilíngues indexáveisComo operar um blog multilíngue com Sveltia CMS
Orientar visitantes com chat de IADesign técnico do chat de contato com IA
Renderizar links seguros em respostas de IARenderização segura de links Markdown em respostas de IA
Levar contexto do serviço ao formulárioPassar contexto do CTA para o formulário
Adicionar comentários sem serviço externoComentários de blog Astro usando só Cloudflare

Ordem de implementação

Para um site parecido, a ordem prática é:

  1. Consolidar páginas estáticas, blog, RSS, sitemap e OGP com Astro.
  2. Adicionar Sveltia CMS para editar a fonte japonesa.
  3. Gerar páginas localizadas como HTML estático.
  4. Adicionar orientação com chat de IA e CTAs de serviço.
  5. Proteger links Markdown, prefill de formulário, Origin checks e rate limits.
  6. 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.

Comentários

Carregando comentários...

Links, e-mails e textos promocionais não podem ser publicados.

G

Gui

CEO da Acecore. Lidera sistemas de negócio, web, bancos de dados e infraestrutura, qualidade e adoção de IA da definição de problemas de negócio ao design, implantação e melhoria após o lançamento. Parte de capacidade prática em C#/.NET e também cobre PHP/JavaScript, SQL Server/PostgreSQL/MySQL e Linux/Windows Server, desenhando requisitos, escolhas tecnológicas, padrões de qualidade e operações de desenvolvimento baseadas em GitHub como um fluxo único. Incorpora IA generativa a processos de desenvolvimento, verificação e organização de informações, como uma base prática para que equipes pequenas entreguem mais rápido e com maior confiabilidade.

Definição de problemas de negócioSeleção tecnológicaDesign de sistemasC#/.NETDesign de bancos de dados/infraestruturaOperações de desenvolvimento no GitHubIA generativaDesign de fluxos de IADesign de qualidadeIntegração em campo

Quer saber mais sobre nossos serviços?

Oferecemos suporte abrangente em desenvolvimento de sistemas, design web, design gráfico e educação em TI.

Artigos relacionados

Pesquisar artigos