Visão geral dos geradores de sites estáticos populares

Todos os geradores de páginas estáticas têm uma tarefa única e aparentemente simples: produzir um arquivo HTML estático e todos os seus recursos.

Há muitos benefícios óbvios em servir um arquivo HTML estático, como armazenamento em cache mais fácil, tempos de carregamento mais rápidos e um ambiente mais seguro em geral. Cada gerador de página estática produz a saída HTML de forma diferente.

No entanto, o objetivo deste post não é mergulhar e discutir os meandros de seu mecanismo, mas comparar o conjunto de recursos que cada estrutura oferece e destacar os aspectos e recursos exclusivos de cada estrutura.

Visão geral de estruturas de páginas estáticas populares

Neste post, examinaremos mais de perto os seguintes frameworks de páginas estáticas: Jekyll , Middleman , Hugo e Hexo . Estes não são de forma alguma os únicos geradores disponíveis, mas são os mais usados, apoiados por grandes comunidades e muitos recursos úteis.

Vamos dar uma olhada em cada um deles e comparar suas características básicas:

• Jekyll
  • escrito em rubi,
  • suporta o mecanismo de modelo Liquid pronto para uso;
• Intermediário
  • escrito em rubi,
  • oferece suporte a mecanismos de modelo ERB e Haml prontos para uso;
• Hugo
  • escrito em Go,
  • suporta o mecanismo de modelo Go pronto para uso;
• Hexo
  • escrito em JavaScript,
  • suporta EJS e Pug pronto para uso.

Nota: Vale ressaltar que cada um desses geradores de páginas estáticas pode ser personalizado e estendido usando plugins e extensões, permitindo que você cubra a maioria ou todas as suas necessidades.

Configurando geradores de sites estáticos

A documentação para cada um desses frameworks é abrangente e nada menos que excelente e você pode obtê-la aqui:

Documentação do Jekyll

Documentação do intermediário

Documentação Hugo

Documentação hexadecimal

Se você simplesmente seguir os guias de instalação, deverá ter o ambiente de desenvolvimento pronto em questão de minutos. Uma vez instalado, você pode iniciar um novo projeto executando comandos do terminal.

Por exemplo, é assim que você inicia um novo projeto em diferentes estruturas:

Jekyll

jekyll new my_website

Intermediário

middleman init my_website

Hugo

hugo new my_website

Hexo

hexo init my_website

Configuração

A configuração geralmente é armazenada em um único arquivo. Cada gerador de site estático tem suas especificidades, mas muitas configurações são as mesmas em todos os quatro.

Você pode especificar onde os arquivos de origem são armazenados ou onde gerar as fontes construídas. É sempre útil ignorar os dados que não serão usados ​​no processo de compilação definindo a opção exclude ou skip_render . Você também pode usar o arquivo de configuração para armazenar configurações globais, como título do projeto ou autor.

Migrando para um gerador estático

Se você já tem um projeto Wordpress pronto, você pode migrá-lo para um gerador de páginas estáticas com relativa facilidade.

Para o Jekyll, você pode usar o plugin Jekyll Exporter. Para Middleman, você pode usar uma ferramenta de linha de comando chamada wp2middleman. Você pode usar o Wordpress para o Hugo Exporter para migração do Hugo e, para o Hexo, você pode ler nosso guia sobre como migrar do Wordpress para o Hexo que escrevi no ano passado.

O princípio é quase idêntico e bastante direto - primeiro exporte todo o conteúdo para um formato adequado e depois inclua-o na pasta correta.

Contente

Os geradores de páginas estáticas usam Markdown para o conteúdo principal. Markdown é poderoso e pode-se aprender rapidamente. Escrever conteúdo no Markdown parece natural por causa de sua sintaxe simples. O documento parece limpo e organizado.

Você deve colocar os artigos em uma pasta especificada no arquivo de configuração global. Os nomes dos artigos devem seguir a convenção especificada pelo gerador.

No Jekyll, você deve colocar um artigo no diretório _posts . O nome do artigo deve ter o seguinte formato: YEAR-MONTH-DAY-title.MARKUP. Outros geradores têm regras semelhantes e fornecem um comando para criar um novo artigo.

Aqui estão os comandos para criar um novo artigo em Middleman, Hugo e Hexo:

Intermediário

middleman article my_article

Hugo

hugo new posts/my_article.md

Hexo

hexo new post my_article

No Markdown, você está limitado a um conjunto específico de sintaxe. Felizmente para nós, todos os geradores também podem processar HTML bruto. Por exemplo, se você quiser adicionar uma âncora com uma classe específica, poderá adicioná-la como faria em um arquivo HTML comum:

This is a text with <a class="my-class" href="#">a link</a> .

Front Matter

Front Matter é um bloco de dados no topo do arquivo Markdown. Você pode definir variáveis ​​personalizadas para armazenar os dados necessários para criar um conteúdo melhor. Em vez de escrever HTML no Markdown, o que pode levar a uma estrutura de documento confusa e feia, você pode definir uma variável na frente.

Por exemplo, é assim que você pode adicionar tags ao seu artigo.

 tags: - web - dev - featured

Modelos em geradores de páginas estáticas

Os geradores de páginas estáticas usam uma linguagem de modelagem para processar os modelos. Para inserir dados em um modelo, você precisa usar tags. Por exemplo, para exibir o título da página no Jekyll, você pode escrever:

{{ page.title }}

Vamos tentar exibir uma lista de tags da matéria principal em nosso post no Jekyll. Você precisa verificar se uma variável está disponível. Em seguida, você precisa percorrer as tags e exibi-las em uma lista não ordenada.

 {%- if page.tags -%} <ul> {%- for tag in page.tags -%} <li>{{ tag }}</li> {%- endfor -%} </ul> {%- endif -%}

Intermediário:

 <% if current_page.data.tags %> <ul> <% for tag in current_page.data.tags %> <li><%= tag %></li> <% end %> </ul> <% end %>

Hugo:

 {{ if .Params.Tags }} <ul> {{ range .Params.Tags }} <li>{{ . }}</li> {{ end }} </ul> {{ end }}

Hexo:

 <% if (post.tags) { %> <ul> <% post.tags.forEach(function(tag) { %> <li><%= tag.name %></li> <% } ); %> </ul> <% } %>

Observação: é uma boa prática verificar se existe uma variável para evitar que um processo de compilação falhe. Isso pode economizar horas de depuração e testes.

Usando variáveis

Um gerador de página estática fornece variáveis ​​globais disponíveis para entrega de modelos. Diferentes tipos de variáveis ​​contêm informações diferentes. Por exemplo, um site de variável global no Hexo contém informações sobre postagens, páginas, categorias e tags de um site.

Conhecer as variáveis ​​disponíveis e como usá-las pode facilitar a vida de um desenvolvedor. Hugo usa as bibliotecas de modelos do Go para modelagem. Trabalhar com variáveis ​​no Hugo pode ser um problema se você não estiver familiarizado com o contexto, ou “o ponto” como eles chamam.

Middleman não tem variáveis ​​globais. No entanto, você pode ativar a extensão middleman-blog que permitiria acessar algumas variáveis, como uma lista de artigos. Se você quiser adicionar variáveis ​​globais, poderá fazer isso extraindo dados para arquivos de dados.

Arquivos de dados

Quando você deseja armazenar dados que não estão disponíveis em arquivos Markdown, você deve usar arquivos de dados. Por exemplo, se você precisar salvar a lista de seus links sociais que deseja exibir no rodapé do seu site. Todos os geradores de páginas estáticas são compatíveis com arquivos YAML e JSON. Além disso, Jekyll suporta arquivos CSV e Hugo suporta arquivos TOML.

Vamos armazenar esses links sociais em nosso arquivo de dados. Como todos os geradores são compatíveis com o formato YAML, vamos salvar os dados no arquivo social.yml:

 - name: Twitter href: https://twitter.com/malimirkeccita - name: LinkedIn href: http://github.com/maliMirkec/ - name: GitHub href: https://www.linkedin.com/in/starbist/

Jekyll armazena arquivos de dados no diretório _data por padrão. Middleman e Hugo usam o diretório de dados e o Hexo usa source/_data directory .

Para gerar os dados, você pode usar o seguinte código:

Jekyll

 {%- if site.data.social -%} <ul> {% for social in site.data.social %} <li><a href="{{ social.href }}">{{ social.name }}</li> {%- endfor -%} </ul> {%- endif -%}

Intermediário

 <% if data.social %> <ul> <% data.social.each do |s| %> <li><a href="<%= s.href %>"><%= s.name %></li> <% end %> </ul> <% end %>

Hugo

 {{ if $.Site.Data.social }} <ul> {{ range $.Site.Data.social }} <li><a href="{{ .href }}">{{ .name }}</a></li> {{ end }} </ul> {{ end }}

Hexo

 <% if (site.data.social) { %> <ul> <% site.data.social.forEach(function(social){ %> <li><a href="<%= social.href %>"><%= social.name %></a></li> <% }); %> </ul> <% } %>

Ajudantes

Os modelos geralmente oferecem suporte à filtragem de dados. Por exemplo, se você quiser colocar o título em maiúscula, você pode fazer assim:

{{ page.title | upcase }}

Middleman tem sintaxe semelhante:

<%= current_page.data.title.upcase %>

Hugo usa o seguinte comando:

{{ .Title | upper }}

Hexo tem sintaxe diferente, mas o resultado é o mesmo.

<%= page.title.toUpperCase() %>

Como os geradores de páginas estáticas lidam com recursos

O gerenciamento de ativos é tratado de forma diferente nos geradores de páginas estáticas. Jekyll compila arquivos de ativos onde quer que sejam colocados. Middleman lida apenas com ativos armazenados na pasta de origem. O local padrão para ativos no Hugo é o diretório de ativos. A Hexo sugere colocar ativos no diretório global de origem.

SASS

Jekyll suporta Sass fora da caixa, mas você deve seguir algumas regras. Middleman também suporta Sass fora da caixa. Hugo compila Sass através de Hugo Pipes para Sass. O Hexo faz isso via plugin.

ES6

Se você quiser usar os recursos modernos de JavaScript do es6, instale um plugin. Pode haver mais de uma versão de um plug-in semelhante, portanto, convém verificar o código ou ver os problemas em aberto ou o compromisso mais recente para encontrar o melhor.

Imagens

A otimização de imagem também não é suportada por padrão. Além disso, como os plugins es6, há mais de um plugin para otimizar imagens. Faça sua lição de casa e tente encontrar o melhor plugin para o trabalho. Como alternativa, você pode usar uma solução de terceiros. No meu blog que é construído com o Hexo, estou usando o plano gratuito Cloudinary. Desenvolvi uma tag cloudinary e estou fornecendo imagens responsivas e otimizadas por meio de transformações Cloudinary.

Plug-ins, Extensões

Os geradores de páginas estáticas têm bibliotecas potentes que permitem personalizar seu site. Cada plugin serve a um propósito diferente. Você pode encontrar uma ampla variedade de plugins, desde o LiveReload para um melhor ambiente de desenvolvimento até a geração de Sitemap ou feed RSS.

Você pode escrever um novo plugin ou extensão. Antes de fazer isso, verifique se existe um plugin semelhante. Veja a lista de plugins Jekyll, extensões Middleman e plugins Hexo. Hugo não tem plugins ou extensões. No entanto, ele suporta códigos de acesso personalizados.

Códigos de acesso no Markdown

Shortcodes são trechos de código que você pode colocar em documentos Markdown. Esses snippets geram código HTML. Hugo e Hexo suportam códigos de acesso. Existem códigos de acesso embutidos, como figure em Hugo:

{{< figure src="/lint/to/image.jpg" title="My image" >}}

Shortcode do youtube hexo:

{% youtube video_id %}

Se você não conseguir encontrar um código de acesso adequado, poderá criar um novo. Por exemplo, o Hexo não suporta incorporações de CanIUse, e eu desenvolvi uma nova tag que suporta a incorporação de CanIUse. Não se esqueça de publicar seu plugin no npm ou no site oficial do gerador. A comunidade ficará grata se você fizer isso.

CMS

Os geradores de páginas estáticas podem ser uma sobrecarga para uma pessoa não técnica. Aprender a usar comandos ou Markdown não é algo fácil para todos. Nesse caso, um usuário pode se beneficiar do Sistema de Gerenciamento de Conteúdo para sites JAMstack. Nesta lista, você pode encontrar um sistema que melhor se adapte às suas necessidades. Saiba que leva algum tempo para configurar o CMS, mas a longo prazo você e outros usuários podem se beneficiar da publicação de conteúdo com mais eficiência.

Bônus: Modelos JAMstack

Se você não quiser gastar muito tempo configurando seu projeto, poderá se beneficiar dos modelos JAMstack. Alguns desses modelos já estão pré-configurados com CMS, o que pode economizar muito tempo.

Você também pode aprender muito examinando o código. Tente instalar um modelo, compare-o com outros e escolha o melhor para você.

Empacotando

Os geradores de páginas estáticas são uma maneira rápida e confiável de criar um site. Você pode até construir sites não triviais e altamente personalizados com um gerador hoje em dia.

Por exemplo, a Smashing Magazine mudou-se para o JAMstack no ano passado e conseguiu acelerar significativamente seu site. Existem outros exemplos bem-sucedidos de sites estáticos e todos eles compartilham o mesmo princípio – produzir recursos estáticos e entregá-los por meio de redes de entrega de conteúdo para carregamento mais rápido e uma experiência de usuário superior.

Há muito mais que você pode fazer com seu site estático: desde o uso da API REST do Wordpress como back-end até o uso de funções do Lambda. Existem excelentes soluções mesmo para sites simples, como usar HTTPS pronto para uso ou lidar com envios de formulários.

Espero que esta visão geral das estruturas de página estática tenha ajudado você a perceber seu potencial e considere usá-las na próxima vez que pensar em um novo projeto.