Um guia para geradores de sites estáticos usando Hexo e WordPress

Geradores de sites estáticos são sistemas que compilam modelos em páginas HTML estáticas. Se isso soa eficiente, sim, é. Não há processamento ou renderização do servidor, portanto, sites estáticos tendem a ser muito rápidos e leves, economizando tempo e largura de banda preciosos para você e seus usuários. Essa maior eficiência se reflete em custos mais baixos e, potencialmente, em receitas mais altas.

Da otimização do WordPress à estática

Falando em geradores de receita eficientes, o WordPress vem à mente. Ele alimenta 28% da internet e é uma plataforma potente com muitos recursos excelentes, incluindo amplo gerenciamento de usuários e conteúdo apoiado por uma variedade de plugins, temas, APIs, etc.

Mesmo os grandes players do nosso setor usam o WordPress. Sites como Smashing Magazine e CSS-Tricks usam o WordPress, embora tenham instâncias significativamente personalizadas em ambos os casos. No entanto, trabalhar com o WordPress pode ser uma tarefa tediosa, especialmente ao personalizar e otimizar o desempenho.

Comecei um pequeno blog em 2015. Meu primeiro instinto foi usar o WordPress. Isso me deu um empurrãozinho, pois eu já estava trabalhando com o WordPress. Criei um novo droplet na DigitalOcean como servidor, estabeleci o Vesta como Painel de Controle de Hospedagem e instalei o WordPress como plataforma de blog. Por fim, eu projetei e desenvolvi um novo tema WordPress. A única coisa que faltava era o conteúdo.

Eu sabia que queria compartilhar algumas dicas sobre o Atom, pois estava usando esse ótimo editor na época. Publiquei alguns artigos sobre isso e os compartilhei com a comunidade.

No começo, eu não estava prestando muita atenção ao desempenho porque estava muito focado no conteúdo. Depois de um tempo, notei alguns problemas de desempenho. A pontuação no Google PageSpeed ​​Insights foi ruim, então trabalhei duro para corrigir e otimizar meu site, atingindo uma pontuação quase perfeita de 99/100:

• Mudei de Nginx+Apache para Nginx+PHP-FPM.

• Eu usei CloudFlare para velocidade e proteção.

• Eu usei o Cloudinary para hospedar imagens.

• Eu ajustei meu tema e usei Critical CSS.

O único aviso foi para um problema de cache do Google Analytics que eu não sabia como corrigir na época.

Mas e se 99/100 ou 100/100 ainda não derem o desempenho desejado? É aí que os geradores de páginas estáticas entram na briga.

Digite Geradores de Páginas Estáticas e Hexo

Então, o que é um gerador de site estático?

Como o nome indica, um gerador de site estático é um sistema que gera arquivos HTML estáticos. Servir arquivos HTML estáticos é muito mais rápido do que criar páginas em tempo real. Não há renderização ou compilação do servidor, o que geralmente causa um atraso no carregamento da página.

Quando se fala em desempenho, deve-se pensar em cache. Embora existam várias técnicas para armazenar em cache o WordPress, isso geralmente não é uma tarefa simples, ao contrário do armazenamento em cache de arquivos estáticos. Servir arquivos em cache é mais eficiente do que servir arquivos reais do servidor e pode economizar tempo ao carregar sites.

Em junho deste ano, Vitaly Friedman da Smashing Magazine apresentou o JAMstack em um workshop na minha cidade. Nunca tinha ouvido falar e fiquei muito intrigado. Após o término do seminário, estudei um pouco esse novo conceito e percebi o quão incrível ele é. Percebi que meu site não precisa de um WordPress.

O primeiro passo foi decidir qual gerador de página estática usar. Eu não sabia quantos são. Decidi experimentar a estrutura do blog Hexo. Ele pode ser implantado no Netlify, tem um plugin para migrar do WordPress e usa o Node.js, com o qual estou familiarizado, ao contrário do Jekyll e do Hugo, que são baseados em Ruby e Go, respectivamente. E, como descobri mais tarde, é incrivelmente rápido.

Migrando WordPress para Hexo

A instalação do Hexo é tão simples quanto poderia ser. Instale o hexo-cli globalmente usando o npm, execute o comando hexo init , instale as dependências do npm e pronto:

 npm i -g hexo-cli hexo init <blog-name> cd <blog-name> npm install

Para fazer a migração, instale o plugin hexo-migrator-wordpress. Este plugin espera arquivos XML como fonte. Arquivos XML podem ser exportados através da ferramenta de exportação do WordPress, que pode ser encontrada no painel de administração em Ferramentas -> Exportar -> Wordpress . Por fim, digite o comando hexo migrate para finalizar a importação.

 hexo migrate wordpress <source>

A única coisa que resta a fazer é verificar o resultado. Execute o comando hexo server para iniciar o servidor e abra o navegador no endereço fornecido.

 hexo server

Markdown e suas limitações

O Hexo suporta Markdown fora da caixa. Markdown é uma linguagem de marcação que muitos usam para formatar arquivos README, comentários e postagens. Mas também pode ser usado para escrever seu artigo. Sua sintaxe é intuitiva e fácil de aprender.

Outra vantagem do Markdown é que ele gera um HTML limpo e válido. Isso permite que os desenvolvedores criem regras CSS limpas e de fácil manutenção para estilizar artigos e páginas de blogs.

A vida de um desenvolvedor nunca é fácil. Muitas vezes nos deparamos com problemas que podem nos levar a gastar tempo com coisas inesperadas. Se aprendemos algo ao longo do caminho, não perdemos tempo, e isso é bom. O mesmo aconteceu comigo. Achei que tudo correu bem porque não houve erro de compilação, mas depois notei que algumas coisas não funcionaram como esperado.

Por exemplo, as demos do Codepen não foram carregadas. Procurei um plugin Hexo e encontrei um. Infelizmente, este plugin não era oficial e gerava erros de HTML que eram inaceitáveis. Eu queria contribuir e corrigir os problemas, mas o último pull request ficou sem solução por mais de um ano e meio. Decidi que seria mais fácil bifurcar o repositório, corrigir os problemas e publicar o plugin na página do Hexo para que qualquer pessoa pudesse usá-lo. O plugin foi aceito, atualizei o conteúdo e as demonstrações do Codepen funcionaram como um encanto.

Problemas semelhantes ocorreram com as incorporações do CanIUse. Agora que eu sabia como criar um plugin Hexo, não havia desculpa para não fazê-lo. Meu plugin hexo-caniuse também foi publicado, assim como meu plugin hexo-cloudinary para imagens responsivas carregadas do Cloudinary CDN.

Redesenho e Otimização

O design do site é bastante fundamental. O Hexo oferece vários temas gratuitamente no site oficial, mas eu queria um tema exclusivo para o meu site Hexo. Depois de ler a documentação e aprender a customizar o Hexo, comecei a desenvolver um tema original do zero.

Para criar novos modelos, decidi usar o EJS para modelagem. Nunca tendo trabalhado com EJS, vi isso como uma chance de aprender a nova sintaxe do template. Se você não gosta de EJS, o Hexo fornece suporte a Swig, Haml ou pug por meio de plugins.

Durante o processo de redesenho, prestei muita atenção ao desempenho. Seguindo as melhores práticas, podemos acelerar ainda mais nosso site estático. Colocar arquivos JavaScript na parte inferior do documento e usar a técnica Critical CSS cria a melhor experiência para seu público.

A otimização de SEO é crucial para a visibilidade do blog em mecanismos de busca como o Google. O Hexo possui um auxiliar embutido para inserir dados do Open Graph. O Hexo usa arquivos YAML para armazenar a configuração do site e do tema. Usei o arquivo de configuração do tema para configurar o nome do site, a descrição e vários IDs sociais.

Adicionar Gulp ou Webpack ao seu processo de compilação é sempre útil e recomendado. Usei o Gulp para minificar e compactar arquivos CSS e JavaScript, e tudo estava pronto. Eu poderia implantá-lo.

Netlify

Netlify é uma plataforma que fornece hospedagem para sites e aplicativos com desempenho extremamente rápido. Ele se comercializa como uma plataforma unificada que automatiza o código para criar sites de alto desempenho e fáceis de manter.

Basta enviar seu código e deixar que nós cuidamos do resto.

Como seria de esperar, configurar o site é simples:

1. Configure o domínio.

2. Altere os registros DNS.

3. Configure a compilação e a implantação.

4. Ative o SSL.

Quando tudo foi configurado, executei alguns testes básicos para ver as pontuações, incluindo Pingdom Website Speed ​​Test, Web Page Test e Testmysite.io. Os resultados foram excelentes, pois o site obteve as pontuações mais altas em todas as ferramentas.

CloudFlare

Apesar das excelentes pontuações, eu queria experimentar o CloudFlare, apenas para ver o quanto ele aceleraria o site adicionalmente. CloudFlare pode ser esmagador no início, mas aprender a usá-lo é fundamental. Depois de configurar o CloudFlare, executei novamente os testes e os resultados foram ainda melhores.

O teste final foi o Google PageSpeed ​​Insights. A pontuação foi de quase 100% tanto para as versões mobile quanto para desktop. O problema era o cache do navegador Google Analytics. Consegui corrigir o problema usando o CloudFlare App for Google Analytics.

Quanto custa isso?

Usar o Hexo no Netlify com CloudFlare não custa nada.

O Hexo é uma plataforma de código aberto, portanto, é gratuito, não importa como você decida usá-lo. Ele tem uma grande comunidade e é o terceiro gerador de páginas estáticas de código aberto mais popular de acordo com o StaticGen.

A Netlify tem um plano aberto que nos oferece ótimas opções para nossa hospedagem. As imagens também são hospedadas no plano aberto do Cloudinary. O plano gratuito do CloudFlare nos permite configurar um grande número de regras que podem acelerar seu site já rápido. Também nos permite corrigir o problema de cache do navegador do Google Analytics. Também não paguei pelo domínio, pois usei um domínio pessoal gratuito fornecido pelo governo.

Esta configuração do projeto reduziu meu orçamento ao mínimo. Se você precisar de recursos mais avançados para o seu projeto, um gerador de páginas estáticas ainda pode economizar alguns dólares.

Servir arquivos em cache significa que o uso de CPU e largura de banda é reduzido, o que, por sua vez, significa que você pode usar planos de hospedagem mais baratos com hardware menos potente. Além disso, seu site será muito mais rápido, o que significa que seus usuários poderão navegar em dispositivos móveis e desktops. E, como a velocidade de carregamento da página pode afetar as classificações da Pesquisa do Google, seu site terá uma classificação mais alta, ganhando ainda mais visitantes.

Tudo isso significa que você pode gastar parte do seu orçamento em outro lugar, por exemplo, na promoção de seu site ou na criação de conteúdo adicional, o que ajudará a obter um pouco mais de receita.

O caso dos geradores de sites estáticos

Migrar do WordPress para um gerador de páginas estáticas não é uma tarefa simples e definitivamente não é algo que todo usuário do WordPress deveria fazer. No entanto, o Hexo fez essa transição relativamente indolor, graças aos seus plugins, excelente documentação e uma API simples.

Antes de decidir se deseja ou não migrar seu produto para uma solução estática, você precisa estar ciente das limitações que acompanham os geradores de páginas estáticas, como restrições de conteúdo, curva de aprendizado Markdown e controle de versão.

Você também deve estar ciente de que o Hexo é uma estrutura de blog. É perfeito para desenvolvedores e técnicos que sabem usar um editor de texto e um terminal. Se você gosta de usar uma interface web para gerenciar seu conteúdo, existe um plugin que também fornece essa funcionalidade. Chama-se hexo-admin e é bastante popular.

Se você já usa o WordPress, deve parar e pensar quais recursos do WordPress você está usando agora e quais são indispensáveis. Você tem uma estrutura de conteúdo complicada? Você está usando o gerenciamento de usuários? Você está usando muitos plugins em sua instância do WordPress e todos eles são necessários? Você está satisfeito com o desempenho do seu site?

Se a resposta para a maioria ou todas essas perguntas for não, você está pronto para sobrecarregar seu site com um gerador de páginas estáticas. Dependendo do caso de uso e de seus requisitos, as páginas estáticas podem ajudar a maximizar a eficiência e minimizar os custos. Se, por outro lado, você exige flexibilidade do WordPress, provavelmente nem está considerando tal movimento.