Design e operação do site
A página inicial de desenvolvimento pessoal é Cloudflare + GitHub. Como criar um site estático atualizado com IA e o custo
Após obter o número D-U-N-S e apresentar o aplicativo, preparei um site empresarial para desenvolvimento pessoal. Explicaremos a diferença entre um site estático e um CMS, atualizando artigos com IA, publicando com GitHub Actions e o procedimento de registro e custo das páginas Cloudflare.
Se você estiver criando um aplicativo sozinho, além de desenvolvê-lo, também precisará de uma página inicial para apresentar seu negócio e fornecer suporte.
SANGE Studio também precisa de um site para se preparar para a obtenção de um número D-U-N-S e para preparar uma página de introdução para o aplicativo. Quero criar uma configuração que custe o mínimo possível e leve menos tempo para o gerenciamento diário. A opção é publicar um site estático com Cloudflare e gerenciar os arquivos com GitHub.
Ao atualizar um artigo, a IA ajuda a criar e modificar o HTML, e os humanos verificam o conteúdo e a exibição antes de publicá-lo. Acreditamos que esta configuração seja suficiente em muitas situações para sites de negócios pessoais.
Neste artigo explicaremos os motivos da escolha, o procedimento de publicação e o custo. Preços e especificações são informações de 27 de outubro de 2026.
1. Prepare o site após obter o número D-U-N-S e apresentar o aplicativo.
Um número DUNS é um número de 9 dígitos que identifica uma empresa ou entidade comercial. Como regra geral, você precisará desse número ao criar uma conta organizacional do Google Play.
Além do número D-U-N-S, o Google Play também exige um "site organizacional" como informação de registro para uma conta organizacional. [1]
É aqui que é fácil ficar confuso. Uma coisa é oGoogle Play exigir um site; outra coisa é um site ser uniformemente exigido para todos os aplicativos de número D-U-N-S. Para obter as informações necessárias para solicitar um número D-U-N-S, verifique as instruções do balcão que você usa.
Em qualquer caso, uma página que explique a realidade do seu negócio e uma página de introdução/suporte ao aplicativo serão úteis para operações posteriores. Você pode começar aos poucos, preparando o seguinte conteúdo:
| página | Conteúdo a ser postado |
|---|---|
| topo | Informações sobre o nome da loja, o negócio em que estamos envolvidos e o aplicativo |
| Introdução de negócios | Explicação que não contradiz as informações do aplicativo, como detalhes da operadora e da empresa |
| Introdução ao aplicativo | Recursos, imagens de tela, links para o Google Play |
| suporte | Como entrar em contato conosco e perguntas frequentes |
| Política de Privacidade | Explicação baseada na aquisição de dados reais e uso de serviços externos |
Isso não significa que apenas preparar um site passará no exame. É importante que as informações postadas sejam consistentes com os detalhes reais do negócio e da aplicação.
2. Sites estáticos são uma boa opção se você deseja reduzir custos e esforços de gerenciamento.
Para ter uma homepage não é necessário necessariamente contratar um servidor de aluguel ou instalar o WordPress.
Cloudflare Pages é um serviço que permite publicar HTML, imagens, etc. Está disponível no plano gratuito, podendo também ser publicado através da URL fornecida pelo serviço: ○○.pages.dev. [2]
O GitHub será usado como um local para gerenciar os arquivos do seu site e alterar o histórico. Você pode verificar quando e onde algo foi consertado e, caso haja algum problema, pode deixar pistas para retornar ao estado anterior.
A organização das funções é assim:
| papel | O que usar |
|---|---|
| Criação e modificação de frases e HTML | IA e humanos |
| Gerencie arquivos e altere o histórico | GitHub |
| Automatize o processo de publicação após a confirmação | GitHub Actions |
| Entregando páginas aos visualizadores | Cloudflare Pages |
Cloudflare não é o único serviço mais barato que existe. Também existem serviços disponíveis gratuitamente. Além disso, é uma opção que atende ao seu propósito de iniciar um site de introdução ao desenvolvimento pessoal com baixo custo.
- IA + HumanoCriação e verificação de artigos/HTML
- GitHubGerencie arquivos e altere o histórico
- Ações do GitHubPublicação de alterações aprovadas
- Páginas CloudflareDistribuir HTML e imagens aos leitores
Gerenciado no GitHub e publicado no Actions. Cloudflare Pages entrega páginas aos leitores.
3. Diferença entre hospedagem estática e CMS
A hospedagem estática é um sistema que fornece HTML e imagens pré-criadas aos visualizadores como eles estão.
Um CMS é um sistema que facilita o gerenciamento e atualização de artigos e imagens. WordPress é um exemplo típico. Você pode escrever artigos e definir a data e hora da publicação na tela de gerenciamento.
A rigor, os dois não são antônimos. Também existe uma configuração que gerencia artigos com um CMS e entrega as páginas completas como um site estático. Para facilitar o entendimento, compararemos aqui uma configuração onde o HTML é gerenciado no GitHub e uma configuração onde você mesmo instala e opera o WordPress geral.
| Itens para comparar | Site estático gerenciando HTML | Autooperação geral do WordPress |
|---|---|---|
| Como atualizar | Modifique e publique o arquivo | Edite e publique na tela de gerenciamento |
| Processando ao visualizar | Entregue o arquivo preparado | Funciona com PHP, banco de dados, etc. Algumas configurações usam cache. |
| manutenção | Gerenciar arquivos, rotas de publicação, ferramentas de uso, etc. | Gerencie a unidade principal, temas, plugins, ambiente de execução, etc. |
| Postagem agendada | Prepare um mecanismo separado para controlar a publicação | Função de lançamento programado padrão disponível |
| Aplicações adequadas para | Introdução ao negócio, introdução ao aplicativo, blog para pequenos grupos | Sites com muitos editores, atualizações frequentes e sites onde a funcionalidade de edição é importante |
HTML é um arquivo que descreve a estrutura de uma página. Tradicionalmente, tocar no código toda vez que você adicionava um artigo era uma parte pesada dos sites estáticos. Ter a IA ajudando você nessa tarefa tornará mais fácil a escolha.
4. Considerando a resposta às vulnerabilidades e a evolução da IA, queremos diminuir o mecanismo de divulgação.
Publicar um site não é o fim. Se for encontrada uma vulnerabilidade no software que você usa, você precisará atualizá-la ou verificá-la. A documentação oficial do WordPress também explica como atualizar a unidade principal, plugins, etc., e gerenciar permissões e autenticação. [3]
No desenvolvimento pessoal, o tempo disponível para manutenção é limitado. Se o foco estiver nas apresentações de negócios e de aplicativos, eu queria reduzir a necessidade de operar os programas e bancos de dados que rodam durante a navegação, bem como a tela de login para edição de artigos que é aberta ao público.
Ao focar na distribuição pura e estática de arquivos, você pode reduzir o número de pontos de entrada para ataques direcionados a essas áreas. No entanto, até mesmo sites estáticos podem ser danificados se contas do GitHub ou Cloudflare forem invadidas ou se JavaScript malicioso for misturado. A segurança é determinada pela configuração e pela operação.
A razão pela qual desejo escolher um site estático não é porque todas as vulnerabilidades hoje em dia são causadas por CMSs. Isso ocorre porque há menos para gerenciar a funcionalidade que você precisa.
Além disso, a IA agora pode auxiliar na criação de HTML e CSS, reduzindo a carga de edição direta de arquivos. Isso simplifica a configuração de segurança e reduz o esforço necessário para atualizações. Esta combinação é atraente em escala pessoal.
5. Os artigos são convertidos para HTML usando IA, verificados por humanos e depois publicados.
O fluxo de atualização esperado consiste nas seis etapas a seguir.
- Organize o tema do artigo, o conteúdo que deseja transmitir e a experiência.
- Peça à IA para criar uma página de artigo que corresponda ao design existente.
- Registre a mudança proposta no GitHub.
- Os humanos verificam o texto, as evidências, a exibição na tela e as alterações.
- Incorpore as alterações confirmadas no branch
mainpara publicação. - As ações do GitHub são publicadas nas páginas da Cloudflare.
O mecanismo para verificar as alterações propostas no GitHub é chamado de “solicitação pull” e a operação de incorporação das alterações confirmadas é chamada de “mesclagem”. Mesmo que você execute sozinho, você pode configurar uma etapa de verificação entre a criação e a publicação.
Por exemplo, as solicitações à IA podem ser especificadas da seguinte forma.
Por favor, converta este manuscrito para HTML usando a página do artigo existente como referência. Organize seus títulos, tabelas e links de referência para facilitar a leitura em smartphones. Atualize também a lista de artigos e o mapa do site. Por favor, não adicione experiências ou números que não estejam no manuscrito e aponte quaisquer declarações que exijam confirmação.
Antes da publicação, verificamos a precisão do texto, exibição em smartphones, destinos de links, direitos de imagem e se informações pessoais ou confidenciais estão misturadas. As análises de IA também podem ser usadas para ajudar, mas apenas fazer com que as IAs verifiquem umas às outras não garante a precisão.
Se você tiver mais artigos, pode passar a escrever o corpo do texto em Markdown e gerar HTML. Acho que é melhor não criar um grande sistema desde o início e apenas introduzi-lo quando as atualizações se tornarem um fardo.
- 1. Prepare o manuscritoOrganize o conteúdo que deseja transmitir
- 2. Converta para HTML com IACorresponda ao design existente
- 3. Confirmação humanaVerificar texto, evidências e exibição
- 4. Refletido nas principaisações publicadas nas páginas
Entre a criação pela IA e a publicação, haverá uma fase em que os humanos verificarão o conteúdo e a exibição.
6. Adicione serviços se precisar de reserva de publicação ou funções de edição.
Para sites estáticos, simplesmente escrever uma data futura no HTML não reserva o site para publicação. Se você fizer upload de um arquivo, poderá visualizá-lo no URL, mesmo que não esteja listado na lista de artigos.
Se a publicação agendada for necessária, considere um CMS headless que possa gerenciar a data e hora da publicação ou um serviço que ofereça suporte à implantação agendada. Um CMS headless é um CMS que fornece funções de gerenciamento de artigos e pode ser usado separadamente da aparência e distribuição da página.
Neste caso, você não deve incluir o artigo no arquivo de publicação até a data e hora especificadas, e combiná-lo com o processo de publicação no horário especificado. Certifique-se também de que os manuscritos privados não sejam expostos em pré-visualizações ou repositórios públicos.
Também existe uma maneira de configurar a execução regular de ações do GitHub, mas a execução pode ser atrasada, por isso não é adequada para aplicativos que exigem garantias de tempo estritas. [8]
Se várias pessoas precisam editar, aprovar, gerenciar imagens e agendar publicações diariamente, um CMS será de grande valor. Planejamos revisar a configuração quando as funções de edição necessárias aumentarem.
7. Do registro na Cloudflare à publicação da página da web
Aqui, mostraremos como publicar no GitHub Actions usando o “Upload direto” do Cloudflare Pages. O oficial da Cloudflare também fornece instruções para esta combinação. [4]
Cloudflare também tem uma opção de distribuição estática chamada Workers Static Assets, mas as configurações e comandos neste artigo são para páginas. O nome da tela pode mudar, portanto, verifique o nome do serviço e as configurações antes de continuar.
Etapa 1: crie contas Cloudflare e GitHub
Crie uma conta no Cloudflare e no GitHub e conclua a verificação de e-mail. Configure a autenticação multifator em ambos.
Você pode começar com o plano gratuito. Mesmo se você já tiver um domínio original, poderá começar a verificar a publicação a partir do URL fornecido pelo Pages.
Passo 2: Obtenha seu próprio domínio
Um domínio personalizado é um nome na Web que você adquire e continua a usar, como example.com. Este é um contrato separado do Cloudflare Pages, que armazena os arquivos do seu site. Custa dinheiro adquirir seu próprio domínio e você precisará pagar uma taxa de renovação para continuar a usá-lo após adquiri-lo. Você pode publicá-lo com o pages.dev gratuito, mas se quiser continuar usando-o como um site comercial, será mais fácil orientá-lo se você preparar um domínio exclusivo que corresponda ao nome da sua empresa. Se você já o possui, não precisa adquirir um novo.
As fontes incluem Cloudflare Registrar e outros serviços de registro de domínio. Se quiser gerenciá-los todos de uma vez com Cloudflare, você pode obtê-los usando o procedimento a seguir. [11]
- Faça login na Cloudflare e abra “Registrar Domínios” em “Registro de Domínio”.
- Pesquise o nome de domínio desejado e veja quais opções estão disponíveis. Escolha um nome que seja próximo ao nome da sua empresa e que seja curto e fácil de digitar.
- Verifique a taxa de aquisição, anos de contrato e próxima data de renovação. Comparamos não apenas o preço baixo do primeiro ano, mas também taxas de renovação, impostos e moedas de pagamento.
- Insira o nome, endereço, número de telefone e endereço de e-mail do registrante com precisão e registre a forma de pagamento. As informações do registrante da Cloudflare devem ser inseridas em caracteres ASCII, portanto, insira nomes e endereços japoneses em caracteres romanos, etc.
- Revise as condições e o valor do pagamento e confirme sua compra.
- Verifique seu e-mail de confirmação de registro e conclua a verificação do endereço de e-mail solicitada. Verifique também as configurações de renovação automática e a data de validade da sua forma de pagamento.
Os domínios adquiridos com o Cloudflare Registrar usam os servidores de nomes da Cloudflare. Não é um serviço que permite alternar livremente para o servidor de nomes DNS de outra empresa após adquiri-lo. Além disso, se a terminação de domínio desejada não estiver disponível, obtenha-a de um serviço de terceiros compatível. [11]
Sua página web não será exibida apenas adquirindo um domínio. Depois disso, publique seu site no Pages e conecte-o ao seu próprio domínio na etapa 8. Mesmo que você tenha adquirido seu domínio de outra empresa, você poderá usá-lo em conjunto com o Pages sem precisar transferir o registro do seu domínio para a Cloudflare.
Uma assinatura de domínio não inclui necessariamente caixas de correio para esse domínio. Se você deseja enviar e receber e-mails via info@example.com, etc., considere um serviço de e-mail separado.
Etapa 3: crie um repositório no GitHub
Um repositório é um repositório para os arquivos e o histórico de alterações do seu site. Crie-o no "Novo repositório" do GitHub com o nome, por exemplo, sange-studio-web.
Se você estiver lidando com manuscritos privados, selecionar Privado facilitará o gerenciamento. Porém, mesmo em um repositório privado, os arquivos colocados na pasta pública serão entregues ao site.
Coloque apenas os arquivos que você deseja tornar públicos na pasta public. Por exemplo, public/index.html é a página principal, public/apps/index.html é a lista de aplicativos e public/privacy/index.html é a política de privacidade. Isso permite restringir o intervalo onde manuscritos e arquivos de configuração são distribuídos por engano no site.
Você pode começar apenas com public/index.html. Faça com que a IA crie uma página de introdução comercial e verifique a exibição em seu navegador.
Etapa 4: crie um projeto Cloudflare Pages
Na tela de administração da Cloudflare, vá em "Workers & Pages" para criar um aplicativo e selecione File Upload (Direct Upload) para Pages. Escolha um nome para o projeto e carregue o conteúdo da pasta public para publicá-lo pela primeira vez. [5]
Acesse https://project name.pages.dev que é exibido neste ponto e verifique a página superior. O nome do projeto e o ID da conta serão usados em configurações posteriores.
Projetos criados usando Direct Upload não podem ser alterados para o tipo vinculado ao Git posteriormente. Se quiser mudar, você precisará criar um novo projeto. [5]
Etapa 5: crie um token de API público
Os tokens de API são credenciais para publicação do GitHub Actions na Cloudflare.
Crie um token personalizado na tela Cloudflare API Tokens e defina as permissões para "Conta → Páginas Cloudflare → Editar". Limite suas contas-alvo às que você precisa. [4]
Os tokens que você cria não são gravados diretamente em arquivos HTML ou GitHub.
Etapa 6: registrar informações de autenticação no GitHub Secrets
No repositório GitHub, abra "Configurações → Segredos e variáveis → Ações" e adicione os dois seguintes como segredos do repositório.
| nome | Valor para cadastrar |
|---|---|
CLOUDFLARE_API_TOKEN | Token de API criado |
CLOUDFLARE_ACCOUNT_ID | ID da conta Cloudflare para publicar |
Secrets é uma função que armazena informações de autenticação usadas em processos de publicação. [4]
Etapa 7: adicionar configurações de visibilidade para GitHub Actions
Crie .github/workflows/deploy.yml em seu repositório e salve o seguinte conteúdo: Substitua your-pages-project pelo nome do projeto do Pages.
name: Deploy website
on:
push:
branches: [main]
workflow_dispatch:
permissions:
contents: read
concurrency:
group: production-website
cancel-in-progress: false
jobs:
deploy:
runs-on: ubuntu-latest
timeout-minutes: 10
steps:
- name: Checkout
uses: actions/checkout@v6
- name: Check entry page
run: test -f public/index.html
- name: Deploy to Cloudflare Pages
uses: cloudflare/wrangler-action@v4
with:
apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
command: pages deploy public --project-name=your-pages-project --branch=main
Baseado no exemplo oficial, temos uma configuração mínima que só é exposta quando main é atualizado. [4] Não há processo de geração de HTML, portanto, nenhuma configuração de compilação é necessária. Neste exemplo, a verificação serve apenas para confirmar a existência da página superior, portanto a revisão do conteúdo e da exibição será realizada separadamente.
Certifique-se também de que o branch de produção no lado das páginas seja main pela primeira vez. Após refletir o arquivo de configuração em main, verifique o resultado da execução em "Actions" do GitHub e abra o site após sucesso.
A descrição acima é uma especificação de tag de versão que prioriza a legibilidade. Para uma operação contínua, você pode aumentar o controle do caminho público fixando a ação em um SHA de commit confirmado e revisando as atualizações.
Etapa 8: defina o domínio original adquirido como Pages
Adicione o domínio que deseja usar em "Domínios personalizados → Configurar um domínio" no projeto Pages. [6]
Os domínios adquiridos com o Cloudflare Registrar são configurados para usar o DNS da Cloudflare. Se você usar um domínio raiz, como example.com, adquirido por outra empresa, adicione o domínio à Cloudflare e altere-o para os servidores de nomes especificados na tela de administração do seu registrador. Se você estiver usando um e-mail existente, os registros DNS como MX e TXT também serão transferidos antes da alteração.
Para subdomínios como www.example.com, você também pode definir um CNAME em um serviço DNS externo. Em ambos os casos, em vez de apenas adicionar registros DNS, primeiro associe-os a domínios personalizados em páginas. [6]
Após a ativação, verifique se você consegue abrir com HTTPS e se as imagens, links e exibição do smartphone estão corretos. Se você quiser tornar seu próprio domínio um URL oficial, inclua também URLs canônicos e de mapa de site.
Também existe uma maneira de começar com menos configurações.
Se você não precisa de controle de publicação com GitHub Actions, é mais fácil integrar os repositórios GitHub diretamente com Pages, o que requer menos configuração. A configuração é selecionar importar repositório Git na tela de criação de páginas, definir o branch de produção como main, sem estrutura, comando de construção como exit 0 e destino de saída como public. [9]
Com esse método, a Cloudflare detecta alterações no GitHub e as publica, para que você possa eliminar a necessidade de configurar tokens e ações de API públicas. Não há necessidade de executar o método Actions e a publicação automática do método de link direto ao mesmo tempo.
- Domínio exclusivoExemplo: exemplo.com
- Configurações de DNSEspecificar o destino da conexão do domínio
- Configurar páginasAssociar a domínios personalizados
- Ver siteVerificar publicação com HTTPS
Obter um domínio e publicar uma página são duas tarefas diferentes. Alinhe as configurações de DNS e as associações no lado das páginas.
8. Quanto custa?
Se você tem um site pequeno como este artigo que distribui HTML, CSS e imagens, pode começar a hospedar e gerenciar arquivos por apenas 0 ienes por mês.
| Artigo | custo | Suplemento |
|---|---|---|
| Cloudflare Pages Free | 0 USD por mês | Usado para publicar sites estáticos |
| GitHub Free | 0 USD por mês | Gerencie arquivos e altere o histórico |
| GitHub Actions | 0 USD dentro do limite gratuito | Os repositórios privados do GitHub Free são limitados a 2.000 minutos por mês e 500 MB de armazenamento de artefatos. Compartilhe sua conta com outros usos |
| URL fornecido pelas páginas | Custo adicional 0 ienes | ○○.pages.dev |
| domínio próprio | É necessária uma taxa separada de aquisição/renovação | Varia dependendo do final do domínio, do registrador e dos termos do contrato |
| AI | Depende do serviço utilizado | Plano gratuito, contrato mensal, taxa de uso de API, etc. |
| Divulgação/formulário de reserva etc. | Depende do serviço utilizado | Adicione apenas os recursos que você precisa |
A Cloudflare afirma que o número de solicitações e a largura de banda das páginas são ilimitados, mas há restrições como número de arquivos e condições de uso. O plano Gratuito permite 500 compilações vinculadas ao Git por mês e um máximo de 20.000 arquivos. Ao processar e fazer upload direto com GitHub Actions, diferencie entre o quadro de construção no lado da Cloudflare e o quadro de execução no lado do GitHub. [2][7]
GitHub Actions é gratuito para execução no executor padrão hospedado no GitHub para repositórios públicos. Tenha cuidado para não exceder o nível gratuito em repositórios privados. Grandes corredores e capacidade de armazenamento são outros requisitos. [10]
Por exemplo, se você executar um processo de publicação de 3 minutos cada em um repositório privado 30 vezes por mês, o tempo total será de 90 minutos. Se você não utilizar a cota para outros fins e sua capacidade de armazenamento estiver dentro da cota, você poderá usar 2.000 minutos por mês.
Se você já possui seu próprio domínio, não há custo para adquirir um novo domínio ao adicionar um site. No entanto, as taxas de renovação para domínios existentes continuarão a ser aplicadas. Não julgue o preço do seu próprio domínio apenas com base no desconto do primeiro ano; verifique também o preço de renovação.
Observe que o custo de adição de APIs, bancos de dados, funções de páginas, etc. não está incluído nesta estimativa estática do site.
Para desenvolvimento pessoal, escolha uma configuração que lhe permita continuar operando.
Introdução ao negócio, introdução ao aplicativo, suporte, blog atualizado por um pequeno número de pessoas. Para esses fins, executar um site estático com Cloudflare e GitHub é uma boa opção.
A IA ajuda a criar e modificar páginas, e os humanos revisam e aprovam o conteúdo, que é então publicado automaticamente. Quando as funções de edição necessárias aumentarem, adicione um CMS ou serviços externos nessa fase.
Para uma operação em escala pessoal como o SANGE Studio, gostaríamos de escolher uma configuração que nos permita continuar fornecendo informações comerciais e, ao mesmo tempo, garantir tempo para o desenvolvimento de aplicativos.
Materiais de referência
- Informações necessárias para criar uma conta do Google Play Console
- Informações do produto das páginas Cloudflare
- Oficial do WordPress: Fortalecendo o WordPress
- Oficial da Cloudflare: upload direto e integração de CI
- Oficial da Cloudflare: upload direto
- Oficial da Cloudflare: domínios personalizados
- Limites de páginas da Cloudflare
- Oficial do GitHub: agendar evento
- Oficial da Cloudflare: HTML estático
- Preços e nível gratuito do GitHub Actions
- Oficial da Cloudflare: registre um novo domínio