Geradores de Sites Estáticos

No inicio a web foi fundamendata em sites estáticos e essas raízes estáticas foram o caminho por muito tempo, até que limitações surgiram e elas não conseguiram mais acompanhar tudo o que os sites dinâmicos ofereciam.

Mas esse dos sites dinamicos não durou para sempre, com problemas e dificuldades começando a aparecer no processo de desenvolvimento, implantação, manutenção e escalonamento. Avanços nas ferramentas e tecnologias da web estavam tornando difícil o gerenciamento daquela que foi um dia uma inovadora web dinâmica, ao mesmo tempo que criavam o espaço para sites estáticos retornarem.

Em 2 de novembro de 2015, a Smashing Mag publicou 'Por que os geradores de sites estáticos são a próxima grande novidade '. Alguns anos depois, os sites estáticos se tornaram onipresentes, senão quase sinônimos, de desenvolvimento de front-end para a web. Movimentos como o Jamstack apenas ajudam a impulsionar ainda mais a adoção estática e a deslocar a comunidade ainda mais em direção às raízes da web com sites estáticos.

O que exatamente é um site estático?

Os sites podem ser geralmente divididos em duas categorias - estáticos e dinâmicos. Um site estático é muito parecido com o que parece - estático, fixo, constante. Isso quer dizer que é projetado, armazenado em um servidor e entregue ao navegador do usuário no estado em que se encontra. Isso não muda entre o ponto em que o desenvolvedor clica no botão "Salvar" e o momento em que o usuário final clica nele. Os desenvolvedores criam o conteúdo usando HTML, formatam-no com CSS e carregam a página estática em um servidor onde permanece inalterada e pronta para ser acessada por uma solicitação do navegador. Aqui, podemos ter conteúdo e elementos dinamicos através de Javascript, o estático que discutimos diz respeito ao código em novo servidor.

Os sites dinâmicos, por outro lado, estão em um estado de mudança quase contínuo e normalmente, são alimentados por um CMS. O CMS literalmente cria cada página sob demanda cada vez que um usuário clica nela. Os desenvolvedores criam conteúdo que é armazenado em um banco de dados e quando um usuário solicita uma URL, o site orientado a CMS busca o conteúdo apropriado do banco de dados, carrega um modelo HTML, renderiza o conteúdo dentro do modelo e retorna uma página HTML formatada para o navegador do visitante - um processo conhecido como server-side rendering.

Infelizmente, os CMSs levantam um conjunto de problemas com os quais os desenvolvedores devem enfrentar constantemente. Para começar, à medida que sua popularidade cresceu, eles se tornaram alvos de ataques hackers. WP WhiteSecurity detecta, por exemplo, 2.407 vulnerabilidades de núcleo, plugin e temas do WordPress que os usuários devem enfrentar constantemente - e o número está crescendo o tempo todo. A ITPRO relata que 90% dos sites CMS hackeados em 2018 eram movidos por WordPress, embora sites movidos por outros sistemas CMS - incluindo Drupal e Joomla - também estejam repletos de vulnerabilidades.

E não é apenas a segurança que é um problema. O desempenho também pode ser prejudicado com sites CMS devido ao fato de o servidor estar trabalhando mais. Cada página precisa ser montada toda vez que uma solicitação é enviada. Esta é uma maneira muito lenta de fazer as coisas. Para cada usuário que visita o site, o código PHP em execução no servidor precisa ser inicializado, se comunicar com um banco de dados, construir uma resposta HTTP com base nos dados, devolve-lo ao servidor, que só então retorna um arquivo HTML para o navegador do usuário que então irá interpretar o conteúdo para exibição.

Todas essas etapas aumentam o tempo de carregamento de uma página da Web e para muitos sites, são completamente desnecessárias, adicionando nada além de complexidade, problemas de desempenho e questões de segurança.

Como Funcionam

Ao contrário das formas limitadas e antiquadas de gerar sites estáticos no final dos anos 90, em 2020 o que não falta são opções de geradores de sites estáticos para os desenvolvedores, basta acertar os critérios. Historicamente, podemos separar os sites estáticos em três diferentes eras:

  • 1990's: Sites estáticos eram criados escrevendo manualmente o HTML de todas páginas de um site.
  • 2000's: Editores WYSIWYG. Sites estáticos eram criados com o auxilio de ferramentas como o Microsoft FrontPage, Adobe GoLive e Mozilla Composer entre outros.
  • 2010's: Compiladores de arquivos começam a ser usados para gerar sites estáticos no fim dos anos 00's e a partir daí começa surge uma nova categoria de ferramentas de publicação, os Geradores de Sites Estáticos.

Um Gerador de Site Estático é essencialmente um conjunto de ferramentas para construir sites estáticos com base em um conjunto de arquivos. Eles são ferramentas de publicação, semelhantes a coisas como Adobe Acrobat, que pega um formato editável, como um arquivo do Microsoft Word, e o converte em um formato fácil de consumir, como .PDF. Com GSEs, os desenvolvedores criam um site estático que consiste principalmente em uma série de páginas HTML que são implantadas em um servidor HTTP. Nesse sentido, existem apenas arquivos e pastas, o que significa nenhum banco de dados e nenhuma renderização do lado do servidor. Ao configurar um servidor, os desenvolvedores pegam o site estático criado pelo gerador de site estático e o implantam no servidor. Quando um usuário solicita uma página, o servidor simplesmente encontra o arquivo correspondente e o envia de volta ao usuário.

O gerador de site estático faz uma análise sintática do conteúdo, templates parciais, código Líquid, Markdown e combina tudo criando um site estático. O próprio script do gerador de site estático é escrito em uma linguagem de programação como Ruby, Go, Python, Javascript, etc.

A maioria deles gera um site a partir de um conjunto de arquivos:

  • O conteúdo é produzido em sintaxe leve como Markdown ou Asciidoc.
  • Um mecanismo de modelagem (Liquid, Go Template, Nunjucks) é responsável pela lógica ao gerar o HTML.
  • Um conversor (kramdown, commonmark, blackfriday, Asciidoctor) transforma a sintaxe leve em HTML.
  • A maioria dos geradores de site estático oferece suporte a um ou mais formatos de dados baseados em arquivo como JSON, YAML e TOML para definir os metadados.

O processo é simplificado, eliminando a necessidade de depender muito de bancos de dados ou outras fontes de dados externas. A maioria dos geradores também ajuda a servir conteúdo básico de blogs, sites de empresas, documentação de produtos, galerias de fotos e até mesmo aplicações mais completas quanto plataformas de comércio eletrônico completas.

Isso difere muito de um site WordPress típico, que precisa conduzir várias consultas de banco de dados para renderizar uma página para cada usuário. Isso fica pior se os plug-ins do WordPress estiverem em uso, pois cada plug-in também precisará acessar os dados do banco de dados - e ainda mais tempo para processar tudo. Com geradores de site estáticos, por outro lado, a velocidade e o desempenho são muito melhorados porque tudo o que o servidor da Web precisa fazer é retornar um arquivo - não construir uma página a ser exibida para cada solicitação HTTP enviada por cada cliente. Resumindo, o mesmo conteúdo não precisa ser construído repetidamente.

Por que se usar sites estáticos?

Os sites estáticos oferecem uma série de benefícios.

Menos complexidade: com sites estáticos, tudo que você precisa é um servidor da web que seja capaz de servir arquivos estáticos. Adicionar hospedagem e implantação relativamente básicas é incrivelmente fácil com serviços como Netlify e GitHub.

Custo de Hospedagem - os requisitos de memória e CPU são muito baixos se comparados aos sites dinâmicos. Não a toa, muitos dos serviços fornecem cotas bem generosas de tráfego, tornando fácil a implementação de ambientes diversos para testes, implementação ou ainda testes A/B em ambiente de produção.

Segurança mais forte: Há pouca ou nenhuma funcionalidade do lado do servidor na maioria das configurações estáticas, o que significa menos vetores de ataques. A menos que um hacker possa explorar uma vulnerabilidade encontrada em seu servidor web, os sites estáticos garantem uma experiência mais segura do que a maioria dos sites dinâmicos.

Mais flexibilidade: Alguns geradores de sites estáticos requerem uma boa quantidade de conhecimento técnico. Embora isso possa significar aprender alguns novos conceitos no início, ele vem com muito mais liberdade. Muitos geradores de sites estáticos têm plug-ins muito refinados e podem ser estendidos usando sua linguagem de programação principal.

Velocidades mais rápidas: os geradores de sites estáticos fornecem arquivos pré-compilados (geralmente minificados) aos navegadores, reduzindo em uma grande margem o tempo de carregamento, afinal, tudo que o servidor da web precisa fazer é retornar um arquivo. Também há uma boa quantidade de opções de otimização que podem ser aplicadas a todos os arquivos antes de tudo ser implantado.

Quais são as opções?

Se você deseja construir um site estático, escolher um gerador pode assustar à primeira vista. O objetivo desta lista é ajudar a tornar mais fácil tomar uma decisão mais informada, dependendo de quais são seus objetivos.

Como aviso, a palavra “top” é muito subjetiva. Esta lista consiste em alguns dos geradores de sites estáticos mais populares para vários casos de uso com base em minha experiência pessoal e nem todos podem concordar com as escolhas. Acontece!

Jekyll é provavelmente o gerador de sites estáticos mais usado e já existe há algum tempo - 2008 para ser exato. É simples de usar e sua baixa curva de aprendizado às vezes é citada como a fonte de seu sucesso.

Jekyll ajuda a criar sites e blogs estáticos a partir de texto simples. Com Jekyll, você normalmente trabalhará com conteúdo em Markdown, uma linguagem de marcação leve projetada para formatação de texto. O conteúdo do texto é então combinado com um mecanismo de templates muito popular, o Liquid. Um dos principais pontos fortes do Jekyll para os recém-chegados é grande quantidade de importadores. Existe toda uma série de ferramentas que permite que um site existente seja migrado para o Jekyll com relativa facilidade. Jekyll foi construído com Ruby, então se você está confortável com Ruby, você pode querer dar uma olhada.
Curiosidade: as páginas do GitHub são fornecidas por Jekyll.

Docsify ajuda a gerar sites de documentação rapidamente. Ao contrário de outros geradores populares como o GitBook, ele não gera arquivos HTML estáticos, optando por carregar e analisar de forma inteligente arquivos Markdown, exibindo-os como um site.

Docsify também permite que você escreva componentes Vue diretamente em arquivos Markdown que serão então lidos nativamente. Além do suporte para plug-ins e temas, ele vem com uma tonelada de recursos realmente impressionantes: suporte a PWAs para uso offline, plug-in de pesquisa de texto inteligente, suporte para emoji e compatibilidade com o Internet Explorer 11, entre muitos outros.

Vuepress é um gerador de site estático minimalista baseado em Vue e com uma estrutura de projeto centrada em markdown, colocando o foco na escrita. Criado para dar conta das necessidades de documentação dos próprios subprojetos da Vue, é focado em sites estáticos centrados em conteúdo e fornece recursos sob medida e otimizados para documentações técnicas.

O Vuepress gera HTML estático pré-renderizado para cada página e executa tudo como um aplicativo SPA depois de carregado. Ele também vem com suporte para temas e plug-ins.

Provavelmente o gerador de sites estáticos mais falado hoje em dia, O Gatsby é baseado no React e aproveita o poder do GraphQL para extrair dados de diferentes fontes. Isso significa que ele funciona muito bem com muitos sistemas de gerenciamento de conteúdo, tornando mais fácil colocar sites e aplicativos em funcionamento. Uma solução ideal para agencias de marketing que trabalham com conteúdo omnichannel.

Além disso, o Gatsby é conhecido por sua velocidade, aproveitando recursos como prefetch de outras páginas e carregando apenas as partes de um site que são necessários no momento. Ele também possui um grande ecossistema de plug-ins e pode ser usado para SPAs, ou em outras palavras, uma maneira simples de garantir uma ótima experiência offline.

Docusaurus foi construído para economizar tempo e ajudar a manter o foco na documentação ou conteúdo do seu projeto. A ideia é que as pessoas simplesmente escrevam documentos e postagens de blog com markdown e o Docusaurus os publicará como um conjunto de arquivos HTML estáticos prontos para serem servidos. Isso, por sua vez, permite acesso mais fácil a todo o poder do React para estender ou personalizar o layout de um projeto.

Um recurso muito útil do Docusaurus é o versionamento de documentos que ajuda a manter a documentação sincronizada com os lançamentos do projeto. Ele também suporta pesquisa de documentação Algolia. Em geral, Docusaurus torna a publicação de seu site realmente simples com opções para páginas do GitHub ou outros hosts de arquivos estáticos manualmente, usando um script ou com uma integração contínua como o CircleCI.

Hugo é um gerador de sites estáticos escrito em Go. Ele vem com um processo de build ultrarrápido e torna a criação de sites estáticos bastante simples. É provavelmente o gerador de sites estáticos mais rápido no momento. Uma grande vantagem de usar o Hugo é que ele vem com uma biblioteca de temas contendo mais de uma centena de temas que você pode usar para construir um site.

Outro benefício importante do Hugo é seu caminho mais rápido e simples para começar, com pouquíssima configuração e sem dependências além do executável. Hugo também fornece suporte i18n (internacionalização) completo para sites multilíngues usando o mesmo processo de desenvolvimento dos sites de um único idioma.

Eleventy usa o slogan, “um gerador de site estático mais simples”, e foi criado para ser uma alternativa em JavaScript ao Jekyll. A idéia por trás disso era optar por sair da corrida por um framework único com uma configuração padrão zero-config. Eleventy não é uma estrutura JavaScript - o que significa zero Javascript do lado do cliente. Ele funciona com a estrutura de diretório existente do seu projeto, mas tem opções de configuração flexíveis.

Seu conteúdo é desacoplado para tornar mais fáceis quaisquer migrações futuras, caso você decida usar outra coisa posteriormente. Eleventy também funciona com várias linguagens de template - .html, .md, .11ty.js, .Liquid, .hbs, .ejs, .haml e .pug só para mencionar alguns. O grande destaque é você pode usar todas as linguagens de template em um único projeto - um conceito verdadeiramente incrível!

Scully é a melhor maneira de criar aplicativos e sites estáticos rápidos usando Angular. Muitas pessoas se referem a isso como a resposta do Angular a ascenção do Jamstack. O Scully pré-renderiza cada página em seu aplicativo em HTML e CSS simples. Isso significa que o Scully oferece o melhor dos dois mundos - você pode pré-renderizar todo o seu aplicativo na forma mais básica de HTML e CSS ou ainda ter um aplicativo SPA totalmente escrito em Angular. É um projeto novo e em rápida evolução, então definitivamente vale a pena ficar de olho nele e contribuir se puder.

Semelhante a como o React tem Gatsby, Vue.js tem Gridsome. Embora seja um projeto relativamente novo, ele ainda possui um número impressionante de recursos - suporte para PWAs e SPAs / sites estáticos compatíveis com SEO.

O Gridsome também tem um ecossistema de plug-ins bastante sofisticado, seu suporte GraphQL torna simples e rápido construir sites modernos a partir de quase qualquer fonte de dados. Além de sua implantação simples e segura, construir com o Gridsome também é simplesmente divertido de usar. Vale a pena mencionar que um histórico ou experiência anterior com o Vue realmente ajuda muito a tornar sua experiência de desenvolvimento melhor ao usar o Gridsome.

Sculpin é um gerador de site estático escrito em PHP. Ele converte arquivos Markdown, templates Twig e HTML padrão em um site HTML estático que pode ser facilmente implementado. Se você se sente mais confortável com o PHP, isso é algo que você deve experimentar! Baseado no PHP 7, é uma instalação rápida e fácil usando composer para obter flexibilidade extra em qualquer projeto em que você esteja trabalhando.

Menções Honrosas

Existem muitas opções por aí e eu não poderia terminar este artigo sem mencionar esses três geradores de sites estáticos. Embora possam ser usadas para criar sites estáticos incríveis e de alta performance, essas menções honrosas oferecem mais do que apenas sites estáticos.

Sapper é um framework para construção de aplicativos da web de desempenho extremamente alto usando Svelte. Sapper, que é a abreviação de Svelte app maker, encontrou sua inspiração em Next.js (mais sobre isso abaixo).

Semelhante ao Next.js, o Sapper tem a capacidade de criar páginas renderizadas pelo servidor, bem como definir endpoints de API. Curiosamente, o Sapper oferece aos desenvolvedores a capacidade de exportar páginas como um site estático. É um projeto novo em relação aos outros citados e deve ser incorporado em breve ao Svelte.

Next.js é outra opção incrível que se baseia no React. Next.js pode ser usado para criar PWAs, aplicativos renderizados no servidor e sites estáticos, entre muitas outras coisas. Ele permite que você defina funções serverless como endpoints de API prontos para uso e oferece aos desenvolvedores muito controle sobre como eles constroem e implantam seus aplicativos. Seu objetivo geral é simplificar o desenvolvimento com uma experiência mais suave e menos confusa.

Nuxt.js é um framework Vue.js progressivo para a construção de aplicativos da web divertidos, modulares e de alto desempenho. Ele também permite que você gere um site estático baseado em seu aplicativo Vue. O Nuxt também permite que você ignore o servidor enquanto mantém os benefícios de um ótimo SEO, pré-renderizando todas as suas páginas e incluindo todo o HTML relevante.

Nuxt, Sapper e Next podem ajudá-lo a construir aplicativos da web. Os sites estáticos são na verdade um subconjunto desses aplicativos, portanto, faz todo o sentido que eles possam criar sites estáticos incríveis.

Quem usa?

  • A VTex usa gatsby no seu motor do VTex.io
  • Healthcare.gov passou de 32 servidores para 1.
  • Em 2012, a plataforma que arrecadou US$ 250 milhões de fundos para o Obama foi construída usando Jekyll.
  • O MailChimp usa gerador de site estático para seu site principal.
  • A Vox Media construiu todo um sistema de publicação em torno do Middleman.
  • Carrot, uma grande agência de Nova York e parte da Vice, constrói sites para algumas das maiores marcas do mundo com seu próprio gerador, o Roots.
  • Vários sites do Google, como "A Year In Search" e Web Fundamentals, são estáticos.
  • O site estático da Smashing Magazine foi avaliado em 10 vezes mais rápido do que a implantação anterior do WordPress

Essa lista não é de forma alguma uma tentativa de ser uma lista de melhores, a intenção é apenas apresentar alguns dos mais populares e como variados em propósito eles podem ser. Se você quiser pesquisar um pouco mais, StaticGen é um bom lugar descobrir mais geradores de sites estáticos.

Comments powered by Talkyard.