Uma introdução aos geradores de sites estáticos

Os geradores de sites estáticos parecem estar se tornando cada vez mais populares recentemente, mas eles não são uma daquelas novidades efêmeras que crescem em popularidade tão rapidamente quanto caem no esquecimento logo em seguida. Por mais de uma década, muitos projetos diferentes – como o 394 deles, para ser mais preciso – foram mantidos por muitas pessoas variadas da comunidade e desenvolvidos com uma gama diversificada de linguagens de programação e tecnologias.

Costumo ler em artigos sobre esse assunto que “sites estáticos não são para todos”, em parte devido à falta de uma interface de usuário para gerenciar o conteúdo e ao processo de instalação às vezes pouco amigável. Mas, na verdade, acho que eles podem ser para todos, mas não para tudo.

O objetivo deste artigo é ajudar pessoas de todos os níveis de habilidade a entender exatamente o que são geradores de sites estáticos, reconhecer suas vantagens e compreender se suas limitações são um obstáculo ou se, pelo contrário, podem ser superadas. Com isso, espera-se que o senhor possa tomar uma decisão informada sobre se um site estático pode ou não ser a solução para seu próximo projeto.

Os conceitos descritos ao longo do artigo são válidos para todos os geradores de sites estáticos, pois todos compartilham a mesma filosofia, embora eu tenha Jekyll quando escrevo, é o que eu uso e com o qual tenho mais experiência. É um produto bastante maduro, tem uma enorme comunidade e o grande bônus de ser suportado nativamente pelas páginas do GitHub. No entanto, alternativas como o Docpad, Hugo e Wintersmith também são amplamente utilizados e definitivamente vale a pena investigá-los.

Como funcionam os sites dinâmicos

Tente imaginar por um segundo que a única maneira de as pessoas saberem o que está acontecendo no mundo é ir até o quiosque de notícias mais próximo e pedir para ler as últimas notícias. Sim, eu sei que é bobagem, mas tudo fará sentido daqui a pouco, por favor, tenha paciência comigo.

O atendente não tem como saber quais são as últimas notícias, então ele passa a solicitação para uma sala nos fundos cheia de telefonistas – imagine uma grande sala de central telefônica na década de 1950. Quando um operador fica disponível, ele atende à solicitação e telefona para uma longa lista de agências de notícias, pede as últimas notícias e, em seguida, escreve os resultados em forma de marcadores em um pedaço de papel.

Em seguida, o operador passará suas anotações brutas para um escrevinhador, que escreverá a cópia final em uma folha de papel bonita, organizará as anotações em um determinado layout e adicionará algumas partes, como a marca do quiosque e as informações de contato. Por fim, o atendente pega o papel pronto e o serve ao cliente satisfeito. Todo o processo será repetido para cada pessoa que chegar ao quiosque.

Essencialmente, é assim que um site dinâmico funciona. Quando um visitante chega a um site (o quiosque) esperando o conteúdo mais recente (as notícias), um script do lado do servidor (os operadores) consulta um ou vários bancos de dados (agências de notícias) para obter o conteúdo, passa os resultados para um mecanismo de modelos (o scribble) que formata e organiza tudo adequadamente e gera um arquivo HTML (o jornal pronto) para o usuário consumir.

Como funcionam os sites estáticos

A proposta de um site estático é transferir a carga pesada do momento em que os visitantes solicitam o conteúdo para o momento em que o conteúdo realmente muda. Voltando à nossa metáfora do quiosque de notícias, pense em um cenário em que são as agências de notícias que ligam para o quiosque sempre que acontece algo digno de notícia.

Os operadores de quiosque e os escrevinhadores irão, então, compilar, formatar e estilizar as histórias e produzir um jornal finalizado imediatamente, mesmo que ninguém tenha pedido um ainda. Eles imprimirão um grande número de cópias (infinito, na verdade) e as empilharão na frente da loja.

Quando os clientes chegam, não há necessidade de esperar que um operador esteja disponível, fazer a chamada telefônica, passar os resultados para o escrevente e aguardar o produto final. O jornal já está lá, esperando em uma pilha, de modo que o cliente pode ser atendido instantaneamente.

E é assim que os geradores de sites estáticos funcionam. Eles pegam o conteúdo, normalmente armazenado em arquivos simples em vez de bancos de dados, aplicam-no a layouts ou modelos e geram uma estrutura de arquivos HTML puramente estáticos que estão prontos para serem entregues aos usuários.

Vantagens da estática

1) Velocidade

Talvez a característica mais imediatamente perceptível de um site estático seja sua rapidez. Como mencionado acima, não há consultas ao banco de dados a serem executadas, nenhum modelo e nenhum tipo de processamento em cada solicitação.

Os servidores da Web são realmente bons em entregar páginas estáticas rapidamente, e todo o site consiste em arquivos HTML estáticos que estão no servidor, esperando para serem servidos, de modo que uma solicitação é servida de volta ao usuário praticamente de forma instantânea.

2) Controle de versão para conteúdo

O senhor nem consegue mais imaginar trabalhar em um projeto sem controle de versão, não é mesmo? Ter um repositório onde as pessoas possam trabalhar de forma colaborativa nos arquivos, controlar exatamente quem faz o quê e reverter as alterações quando algo dá errado é essencial em qualquer projeto de software, não importa o tamanho.

Mas e o conteúdo? Ele é a pedra fundamental de qualquer site e, no entanto, geralmente fica em um banco de dados em outro lugar, completamente separado da base de código e de seu sistema de controle de versão. Em um site estático, o conteúdo é normalmente armazenado em arquivos simples e tratado como qualquer outro componente da base de código. Em um blog, por exemplo, isso significa poder ter as postagens reais armazenadas em um repositório do GitHub e permitir que seus leitores registrem um problema quando algo estiver errado ou adicionem uma correção com uma solicitação pull.

3) Segurança

Plataformas como o WordPress são usadas por milhões de pessoas em todo o mundo, o que significa que são alvos comuns de hackers e ataques mal-intencionados – não há como evitar isso. Onde quer que haja entrada/autenticação de usuário ou vários processos executando código em cada solicitação, há uma possível falha de segurança a ser explorada. Para estar no topo da situação, os administradores de sites precisam continuar corrigindo seus sistemas com atualizações de segurança, brincando constantemente de gato e rato com os invasores, uma rotina que pode ser negligenciada por usuários menos experientes.

Os sites estáticos mantêm a simplicidade, pois não há muito o que bagunçar quando há apenas um servidor da Web servindo páginas HTML simples.

4) Menos problemas com o servidor

A instalação e a manutenção da infraestrutura necessária para executar um site dinâmico podem ser bastante desafiadoras, especialmente quando vários servidores estão envolvidos ou quando algo precisa ser migrado. Há pacotes, bibliotecas, módulos e estruturas com diferentes versões e dependências, há diferentes servidores da Web e mecanismos de banco de dados em diferentes sistemas operacionais.

É claro que um gerador de sites estáticos também é um pacote de software com suas dependências, mas isso só é relevante no momento da construção, quando o site é gerado. Em última análise, o resultado final é uma coleção de arquivos HTML que podem ser servidos em qualquer lugar, dimensionados e migrados conforme necessário, independentemente das tecnologias do lado do servidor. Quanto ao processo de geração do site, isso pode ser feito a partir de um ambiente que o senhor controla localmente e não necessariamente no servidor da Web que executará o site – o senhor pode criar um site inteiro no seu laptop e enviar o resultado para a Web quando estiver pronto.

5) Picos de tráfego

Picos inesperados de tráfego em um site podem ser um problema, especialmente quando ele depende intensamente de chamadas a bancos de dados ou de processamento pesado. A introdução de camadas de cache, como Varnish ou Memcached, certamente ajuda, mas isso acaba introduzindo mais possíveis pontos de falha no sistema.

Em geral, um site estático está mais bem preparado para essas situações, pois a veiculação de páginas HTML estáticas consome uma quantidade muito pequena de recursos do servidor.

Desvantagens da estática (e possíveis soluções)

1) Sem conteúdo em tempo real

Com um site estático, o senhor perde a capacidade de ter dados em tempo real, como a indicação de quais histórias foram tendência na última hora, ou conteúdo que muda dinamicamente para cada visitante, como um tipo de “artigos recomendados para você”. Estático é estático e será o mesmo para todos.

Infelizmente, não há realmente uma solução para isso. Esse é o preço final a ser pago pelo uso de um site estático, portanto, é importante que o senhor se pergunte: “Quão em tempo real meu site precisa ser?” – Se seu conceito for baseado no fornecimento de informações em tempo real, talvez um site estático não seja a escolha certa.

Uma solução perigosa: Há uma saída fácil sempre que o senhor se depara com o desafio de atualizar dinamicamente o conteúdo de um site estático: “Posso fazer isso com JavaScript”. Fazer o processamento no lado do cliente e anexar os resultados à página depois que ela for servida pode ser a abordagem correta para alguns casos, mas não deve ser visto como a solução mágica que transforma seu site estático em um site totalmente dinâmico. Isso pode impedir que alguns usuários vejam o conteúdo injetado, prejudicar seu SEO e introduzir outros problemas, potencialmente tirando a tranquilidade e a sensação de controle que vêm com o uso de um site estático.

2) Nenhuma entrada de usuário

Adicionar conteúdo gerado pelo usuário a um site estático é um desafio. Veja um sistema de comentários para um blog, por exemplo: como o senhor processa os comentários dos usuários e os anexa a uma publicação usando apenas páginas HTML simples? O senhor não faz isso.

Solução

Não é possível contornar essa limitação em si e começar a processar dados em suas páginas estáticas, mas o senhor pode encontrar soluções alternativas para casos individuais. Se precisar criar um formulário de contato, há muitos serviços de terceiros que processam solicitações POST e enviam os dados por e-mail ou os exportam para um formato de sua escolha.

No entanto, um sistema de comentários é um pouco diferente, pois envolve não apenas o processamento de dados do usuário, mas também sua inclusão em uma determinada página. Plataformas como Disqus são frequentemente usados como uma solução alternativa para isso e funcionam, mas pessoalmente não sou um grande fã.

Em primeiro lugar, há o que discutimos no ponto 1 – o Disqus anexará os comentários à página com JavaScript depois que ela for servida, portanto, tecnicamente, os comentários não existem em seu site até que o JavaScript entre em ação. Em segundo lugar, com essa abordagem, o senhor contradiz a premissa de manter o conteúdo unido e com versão em um repositório.

Escrevi sobre a tomada de uma abordagem diferente em um sistema de comentários para o Jekyllque basicamente usa um manipulador no lado do servidor para processar os comentários, adicioná-los ao repositório e enviá-los para o GitHub, mantendo os comentários junto com o restante do site.

3) Sem UI de administração

É incrivelmente fácil publicar uma postagem de blog no WordPress ou no Medium. Isso pode ser feito de qualquer lugar, até mesmo de um telefone, sem a necessidade de instalar nenhum software adicional. Esse não é realmente o caso de um site estático.

Normalmente, as postagens são compostas em um editor de texto e formatadas com uma linguagem como Markdown ou Textile. Para publicá-los, o senhor precisaria regenerar o site (a maioria dos mecanismos tem um watch para detectar alterações nos arquivos e regenerar o site automaticamente) e implantar os arquivos em um servidor. É um pouco difícil fazer tudo isso em um telefone na praia, não é?

Solução

Existem plataformas que fornecem uma interface da Web para criar, editar e excluir arquivos diretamente em um repositório do GitHub, oferecendo um editor WYSIWYG para Markdown a fim de criar uma interface de composição amigável. Os exemplos são prosa, uma solução gratuita e de código aberto, ou o mais avançado CloudCannon, um produto comercial que permite que os usuários editem seções inteiras de um site estático e vejam uma visualização ao vivo das alterações.

Há também aplicativos móveis, disponíveis tanto para iOS e Androidque são uma opção viável para pessoas interessadas em escrever e publicar conteúdo em trânsito. Os aplicativos se conectam ao GitHub e as alterações são enviadas instantaneamente para o repositório.

Outra opção é configurar um serviço que permita aos usuários postem em um blog estático por e-mail, que pode ser uma solução viável para aqueles que precisam escrever constantemente em trânsito. Ele funciona ouvindo e-mails em um determinado endereço e pegando os metadados da postagem na linha de assunto, as imagens dos anexos e o corpo da postagem na própria mensagem.

Conclusões

Mudar para um site estático pode potencialmente economizar tempo e dinheiro, pois exige menos manutenção e menos recursos do servidor. Eles são confiáveis, escaláveis e podem lidar muito bem com grandes volumes de tráfego.

Em 2012, a campanha presidencial de Obama arrecadou US$ 250 milhões por meio de um site da Jekyll. Em 2013, o Healthcare.gov mudou para uma abordagem sem CMS usando também o Jekyll. Os sites estáticos estão impulsionando grandes projetos e, definitivamente, não se limitam aos blogs. Há também uma forte comunidade de código aberto que mantém e impulsiona uma ampla gama de mecanismos com diferentes sabores e recursos.

No entanto, um site estático não é uma solução mágica que resolverá todos os problemas – eles são perfeitos para alguns casos, mas terríveis para outros. É fundamental entender como eles funcionam e o que podem fazer para avaliar, com base em cada projeto, se são ou não a ferramenta certa para o trabalho.