Saltar al contenido principal

Deploy de Sites Docusaurus na Cloudflare Pages: Um Guia Completo

A combinação do Docusaurus para criar sites de documentação estáticos e da Cloudflare Pages para hospedagem e deploy contínuo é uma das duplas mais poderosas e eficientes para desenvolvedores hoje. Neste guia, vamos cobrir o passo a passo completo para publicar seu site Docusaurus, incluindo a solução para um problema comum de versão do Yarn.

Por que Docusaurus e Cloudflare Pages​

*Docusaurus: Uma ferramenta fantástica, mantida pelo Facebook, para construir sites otimizados para conteúdo, especialmente documentação. É rápido, extensível e baseado em React. *Cloudflare Pages: Uma plataforma que oferece hospedagem gratuita para sites estáticos com integração Git, deploy automático, previews de Pull Requests e a performance da CDN global da Cloudflare.

Passo 1: Conectar o Repositório GitHub à Cloudflare​

O primeiro passo é autorizar a Cloudflare a acessar seu repositório.

  1. No painel da Cloudflare, navegue até Workers & Pages e clique em Criar aplicação > Pages > Conectar ao Git.
  2. Escolha sua conta ou organização do GitHub e selecione o repositório do seu projeto Docusaurus.

Passo 2: Configurar as Definições de Build​

Esta é a etapa mais crucial, onde dizemos à Cloudflare como construir nosso site.

  1. Ramificação de produção: Selecione o branch principal do seu projeto (geralmente main ou master).
  2. Configurações de build: A Cloudflare é inteligente e oferece uma predefinição para Docusaurus. *Predefinição da estrutura: Escolha Docusaurus na lista. *Comando de build: Verifique se o comando corresponde ao seu gerenciador de pacotes. Se você usa Yarn (como nós), altere para yarn build. *Diretório de saída: O padrão build está correto para o Docusaurus.

Configuração de Build na Cloudflare Pages

Passo 3: Resolvendo o Erro de Versão do Yarn​

Ao tentar fazer o deploy, você pode encontrar um erro no log de build com a mensagem: The lockfile would have been modified by this install, which is explicitly forbidden.

Isso acontece porque, por padrão, a Cloudflare pode usar uma versão mais recente do Yarn (v4+) que é incompatível com o arquivo yarn.lock de projetos criados com Yarn v1.

A solução é forçar a Cloudflare a usar a mesma versão do Yarn que você usa localmente.

  1. Ainda nas configurações de build, vá para Variáveis de ambiente.
  2. Adicione uma nova variável: *Nome da variável: YARN_VERSION *Valor: 1.22.22 (ou a versão específica do Yarn v1 que você utiliza).

Adicionando a variável de ambiente YARN_VERSION

Passo 4: Salvar e Implantar​

Com a configuração de build e a variável de ambiente ajustadas, clique em Salvar e implantar.

A Cloudflare irá clonar seu repositório, instalar as dependências com a versão correta do Yarn, executar o build e publicar seu site em sua rede global. A partir de agora, a cada push no seu branch de produção, um novo deploy será acionado automaticamente.

Conclusão​

Em poucos minutos, é possível configurar um pipeline de CI/CD robusto, gratuito e extremamente performático para qualquer projeto Docusaurus. A integração nativa da Cloudflare Pages com o Git simplifica todo o processo, permitindo que você foque no que realmente importa: criar conteúdo de qualidade.

Publicidade