O WordPress é um excelente sistema de gerenciamento de conteúdo (CMS). Com ele, você pode fazer quase tudo. Devido à sua natureza dinâmica, podemos alterar qualquer conteúdo com o clique de um botão. Embora isso seja incrível, também traz alguns perigos e pode ser difícil mantê-lo sob tráfego intenso.

Converter seu site WordPress para estático pode resolver esses problemas.

O que são sites estáticos?

Para explicar como funcionam os sites estáticos, primeiro você precisa entender como funciona o site dinâmico.

Sempre que visitamos um site, o servidor precisa analisar os arquivos PHP, consultar o banco de dados para buscar os dados e, no final, retornar o HTML renderizado para o navegador.

Os sites estáticos fazem todo o trabalho pesado primeiro – antes de visitar o site, salvamos todas as páginas como HTML estático. Quando você acessa a página desejada, o servidor a apresenta como está.

As vantagens de tornar o seu site estático

Velocidade e desempenho

Os sites estáticos são rápidos e têm bom desempenho. Por quê? Porque eles são apenas HTML estático. Isso significa que o servidor deve fazer apenas uma coisa: servir o site. Ele não precisa analisar nada nem esperar pelos dados do banco de dados.

Além disso, os sites estáticos são mais fáceis de hospedar em CDNs (embora o Edge Caching funcione de forma semelhante), colocando todos os arquivos o mais próximo possível de você.

De modo geral, os sites estáticos têm um desempenho incrível sob tráfego intenso.

Segurança

O núcleo do WordPress é seguro – ele realmente é. Mas os plugins e os temas nem sempre são. Além disso, todos podem tentar adivinhar nosso login e senha.

De modo geral, gosto de comparar o WordPress a uma casa com muitas portas e janelas. Cabe a nós escolher as mais seguras, mas, ainda assim, se uma porta não for segura o suficiente, um hacker poderá invadir nosso site.

Ao converter seu site em estático, você elimina a maioria dos vetores de ataque. Como se trata apenas de HTML, um hacker não poderá usar plugins vulneráveis nem se beneficiar de uma senha fraca.

Tranquilidade

Uma configuração típica do WordPress consiste em muitas partes móveis – servidores PHP e de banco de dados, temas ou plugins – e cada parte pode quebrar. Com a estática, removemos a maioria delas. Nosso servidor se torna mais simples, pois serve apenas HTML e nosso conteúdo é distribuído em todo o mundo graças ao CDN, o que o torna protegido contra DDoS.

Como resultado, a probabilidade de algo quebrar é muito menor do que o normal.

Os contras da conversão para estático

Soluções alternativas

Estamos acostumados como pesquisar no site, adicionar comentários ou enviar formulários para que funcionem imediatamente com o WordPress. Com a estática, isso não é mais tão simples. Como convertemos tudo para HTML, perdemos essas possibilidades.

Temos que usar algumas ferramentas de terceiros para adicionar essa funcionalidade novamente.

Processo de build

Estamos acostumados a ver o novo conteúdo disponível em nosso site depois de pressionar o botão de publicação. Com a abordagem estática, precisamos converter nosso site sempre que quisermos atualizá-lo. Assim, pode levar alguns minutos entre uma atualização e outra. Portanto, você pode levar alguns minutos entre pressionar o botão e tê-lo disponível para todos.

Etapas preliminares

Antes de começarmos, precisamos cuidar de alguns aspectos.

1. Crie um repositório Git

Usamos o GitHub neste exemplo, mas você pode usar qualquer outra solução Git (como GitLab ou BitBucket). Neste momento, basta criar uma conta (se você ainda não tiver uma) e criar um repositório vazio.

Depois disso, você precisa criar um arquivo no repositório; caso contrário, não será possível conectá-lo à Kinsta.

Adicione um arquivo ao seu repositório.
Adicione um arquivo ao seu repositório.

2. Conecte esse repositório na hospedagem de site estático

Vá para o MyKinsta, selecione Sites estáticos na barra lateral e selecione Adicionar site.

Selecione o repositório que você criou e não se esqueça de selecionar “Implementações automáticas no commit”

Configuração da hospedagem de site estático da Kinsta.
Configuração da hospedagem de site estático da Kinsta.

Converta seu site WordPress para estático

Podemos usar alguns métodos para converter nosso site WordPress em estático. Neste artigo, veremos dois deles:

  1. Usando um plugin do WP e o Git
  2. Usando WP-CLI, CI/CD e Git

Usando um plugin e o Git

Requisitos:

Etapas

  1. Abra seu site no navegador e instale o plugin Simply Static.
  2. Vá para Simply Static > Settings > Deployment para definir o método de implantação para Local directory e defina a pasta local – você pode seguir a dica que o espaço reservado lhe dá, por exemplo, /www/kinstaapi_533/public/public_static. Lembre-se de que o plugin não criará essa pasta para você – você deve fazer isso manualmente.
  1. Pressione o botão Generate Static Files.

Após alguns minutos, todos os seus arquivos estáticos estarão na pasta especificada na etapa anterior.

Envie seu código para um repositório Git

  1. Crie um repositório no GitHub.
  2. Abra um Terminal ou Powershell, vá para a pasta com os arquivos estáticos e execute:
git init
git remote add origin https://github.com/{username}/{repository_name}.git
git add .
git commit -m "static content"
git branch -M main
git push --force -u origin main

Esses comandos conectam o repositório e enviam todos os arquivos estáticos para o GitHub. O envio das alterações aciona uma implantação automática porque já conectamos esse repositório com a Hospedagem de Site Estático.

Da próxima vez que você alterar algo no WordPress, reconstrua o site inteiro e execute:

git add .
git commit -m "static content"
git push --force -u origin main

A versão Pro do Simply Static oferece um complemento do GitHub que automatiza o processo de build. Ainda assim, trata-se de um plugin pago e, em alguns casos, fazer isso manualmente pode ser uma solução boa o suficiente.

Usando WP-CLI, CI/CD e Git

Esse método usa o mesmo plugin do WP que o método acima, mas em sua versão Premium (paga), e usa um pipeline de CI/CD do Buddy CI para enviar seu código para um repositório do GitHub.

Essa abordagem é mais complicada de configurar, mas exige menos trabalho manual durante cada implantação. Além disso, ela é mais extensível, pois você tem controle sobre cada etapa. Você pode adicionar mais ações ao pipeline, se desejar.

Requisitos:

  • Você deve usar o Simply Static Pro (somente a versão Pro tem a integração WP-CLI).
  • Seu site precisa ser acessível publicamente (portanto, não pode estar em um provedor de hospedagem local), e o servidor precisa ter acesso SSH e WP-CLI instalado. A hospedagem de WordPress da Kinsta é perfeita para você.
  • A base de código do seu site hospedada em um repositório do GitHub
  • Uma ferramenta de CI/CD para orquestrar tudo. Usamos o Buddy neste exemplo devido à sua facilidade e simplicidade. Mas você pode usar qualquer outra ferramenta, como o GitHub Actions ou o GitLab CI/CD.

Etapas:

  1. Abra seu site WP no navegador e instale o plugin Simply Static Pro.
  2. Vá para Simply Static > Settings > Deployment para definir o método de implantação para o Local directory e defina o caminho correto – você pode seguir a dica que o espaço reservado lhe dá, por exemplo, /www/kinstaapi_533/public/public_static.
  3. Lembre-se de que o plugin não cria essa pasta para você – você deve fazer isso manualmente.
  4. Vá para o seu repositório do GitHub e crie um token de acesso para acessar seus repositórios. Você precisará dele em breve.
  5. Faça login na sua conta no Buddy, adicione um novo projeto e conecte ao seu repositório.

Vamos criar um pipeline no Buddy que:

  1. Executa o comando Simply Static WP-CLI via SSH em seu servidor.
  2. Compacta tudo.
  3. Faz o download para o sistema de arquivos do Buddy.
  4. Descompacta tudo.
  5. Envia tudo para o seu repositório Git.
Uma visão geral do fluxo de trabalho do Buddy.
Uma visão geral do fluxo de trabalho do Buddy.
  1. Primeiro, temos que adicionar uma ação chamada SSH command.
  2. Na aba Run CMDs, execute:
wp simply-static run
cd public_static
zip -FSr ../static.zip .

Esse script converte nosso site em estático e o compacta.

  1. Na aba Target, insira todas as suas credenciais (encontre-as no MyKinsta) e defina o diretório de trabalho como public.
Configuração do Buddy Target.
Configuração do Buddy Target.
  1. Em seguida, adicione uma ação Local Shell. Dentro dela, execute:
rm -rf *

Esse comando garante que não haverá nenhum arquivo que não seja necessário.

  1. Para fazer o download do arquivo zip do servidor, adicione uma nova ação (você pode fazer isso pressionando + na lista de ações) e selecione SFTP Download na lista. Além das credenciais, temos de passar o caminho para o arquivo zip e marcar a opção de substituição.
Você pode configurar a ação de download do Buddy.
Você pode configurar a ação de download do Buddy.
  1. Adicione outra ação Local Shell para descompactar todos os arquivos e remover o arquivo zip (não precisaremos mais dele). Execute:
unzip -o static.zip
rm static.zip
  1. Vá para a aba Ubuntu e selecione Packages & Tools para instalar o unzip. Para fazer isso, execute:
apt-get update && apt-get install -y unzip
  1. A última etapa requer o uso da ação Git Push. Você deve usar o token de acesso ao GitHub que configurou na primeira etapa e sua senha. Além disso, não se esqueça de marcar Force Push e Push revision to the specific branch.
Configuração da ação Push do Buddy.
Configuração da ação Push do Buddy.

Quando você quiser reimplantar seu site, pressione o botão Run no Buddy e a mágica acontecerá. Se você quiser automatizar esse processo, há um plugin WordPress que pode ser usado.

Visão geral do fluxo de trabalho proposto pelo Buddy.
Visão geral do fluxo de trabalho proposto pelo Buddy.

Graças à documentação do Buddy, você pode verificar como automatizar ainda mais seu fluxo de trabalho.

Outras maneiras de converter o WP para estático

Geradores de sites estáticos

Muitos geradores de sites estáticos permitem que você conecte qualquer CMS com uma API (o WordPress tem uma API REST integrada e GraphQL disponível por meio de um plugin). Você pode usar o Astro, o Eleventy ou qualquer outro.

Embora essa abordagem ofereça a você muito mais flexibilidade, ela exige mais trabalho do que as soluções acima.

Resumo

Converter um site WordPress em um site estático é uma boa ideia? Depende. Há muitos fatores que você deve considerar antes de fazer isso. Com certeza, é uma boa ideia que você pense sobre isso. Conforme mencionado anteriormente, os sites estáticos têm muitos prós, e você não se beneficiar deles pode ser um grande desperdício.

Maciek Palmowski

Maciek é um desenvolvedor web atuando na Kinsta como Analista de Advocacia de Desenvolvimento. Quando não está trabalhando, ele se dedica principalmente à programação, à busca de notícias relevantes para suas newsletters.