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

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 maneira diferente.

como construir um conselho consultivo

No entanto, o objetivo desta postagem não é mergulhar e discutir as complexidades de seu mecanismo, mas comparar o conjunto de recursos que cada framework oferece e destacar os aspectos e recursos exclusivos de cada framework.

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

Nesta postagem, daremos uma olhada mais de perto nas seguintes estruturas de página estática: Jekyll , Intermediário , Hugo , e Hexo . Esses não são de forma alguma os únicos geradores, mas são os mais usados, apoiados por grandes comunidades e muitos recursos úteis.

Vamos dar uma olhada em cada um deles e comparar seus recursos básicos:

• Jekyll
  • escrito em Ruby,
  • suporta o mecanismo de template Liquid fora da caixa;
• Intermediário
  • escrito em Ruby,
  • suporta motores de template ERB e Haml fora da caixa;
• Hugo
  • escrito em Go,
  • suporta o mecanismo de template Go pronto para uso;
• Hexo
  • escrito em JavaScript,
  • suporta EJS e Pug fora da caixa.

Relacionado: O back-end: usando Gatsby.js e Node.js para atualizações estáticas do site

Nota: Vale ressaltar que cada um desses geradores de páginas estáticas pode ser customizado e estendido usando plug-ins 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 Jekyll

Documentação do intermediário

Documentação do Hugo

Documentação Hexo

Se você simplesmente seguir os guias de instalação, deverá ter o ambiente de desenvolvimento pronto em questão de minutos. Depois de instalado, você pode iniciar um novo projeto executando comandos no 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 especificações, 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 origens construídas. É sempre útil pular dados que não serão usados ​​no processo de construção, definindo exclude ou skip_render opção. Você também pode usar o arquivo de configuração para armazenar configurações globais como o título do projeto ou o autor.

Migrando para um gerador estático

Se você já tem um Projeto Wordpress pronto para usar, você pode migrá-lo para um gerador de página estática com relativa facilidade.

Para Jekyll, você poderia Exportador Jekyll plugar. Para Middleman, você pode usar uma ferramenta de linha de comando chamada wp2middleman . Você pode usar Wordpress para Hugo Exportador para a migração de Hugo, e para Hexo, você pode ler nosso guia sobre como migrar do Wordpress para 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, em seguida, inclua-o na pasta certa.

Conteúdo

Geradores de páginas estáticas usam Markdown para o conteúdo principal. Markdown é poderoso e pode ser aprendido 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 _posts diretório. O nome do artigo deve ter o seguinte formato: ANO-MÊS-DIA-titulo.MARKUP. Outros geradores têm regras semelhantes e fornecem um comando para a criação de 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 determinado conjunto de sintaxe. Felizmente para nós, todos os geradores também podem processar HTML bruto. Por exemplo, se você deseja adicionar uma âncora com uma classe específica, pode adicioná-la como faria em um arquivo HTML normal:

This is a text with a link .

Matéria frontal

O assunto inicial é 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 em Markdown, o que poderia levar a uma estrutura de documento desordenada e feia, você poderia definir uma variável no primeiro assunto.

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

tags: - web - dev - featured

Modelos em geradores de página estática

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

{{ page.title }}

Vamos tentar exibir uma lista de tags do assunto principal em nossa postagem em 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.

os compradores são altamente sensíveis ao preço quando

{%- if page.tags -%}

{%- for tag in page.tags -%}
• {{ tag }}
{%- endfor -%}

{%- endif -%}

Intermediário:

Hugo:

{{ if .Params.Tags }}

{{ range .Params.Tags }}
• {{ . }}
{{ end }}

{{ end }}

Hexo:

Nota: É uma boa prática verificar se existe uma variável para evitar que um processo de construçã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 a entrega de modelos. Diferentes tipos de variáveis ​​contêm informações diferentes. Por exemplo, um site de variável global em Hexo contém informações sobre postagens, páginas, categorias e tags de um site.

Saber as variáveis ​​disponíveis e como usá-las pode tornar a vida do desenvolvedor mais fácil. Hugo usa as bibliotecas de modelos de 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.

O intermediário não tem variáveis ​​globais. No entanto, você pode ligar o blog do intermediário extensão que permite que você tenha acesso a 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 nos 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é de seu site. Todos os geradores de página estática suportam arquivos YAML e JSON. Além disso, Jekyll oferece suporte a arquivos CSV e Hugo oferece suporte a arquivos TOML.

Vamos armazenar esses links sociais em nosso arquivo de dados. Como todos os geradores suportam 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 em _data diretório por padrão. Middleman e Hugo usam diretório de dados, e Hexo usa source/_data directory.

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

Jekyll

{%- if site.data.social -%}

{% for social in site.data.social %}
• {{ social.name }}
{%- endfor -%}

{%- endif -%}

Intermediário

Hugo

{{ if $.Site.Data.social }}

{{ range $.Site.Data.social }}
• {{ .name }}
{{ end }}

{{ end }}

Hexo

Ajudantes

Os modelos geralmente oferecem suporte à filtragem de dados. Por exemplo, se quiser deixar o título em maiúsculas, você pode fazer desta forma:

{ page.title }

Middleman tem sintaxe semelhante:

Hugo usa o seguinte comando:

{ upper }

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

python o que é um atributo

Como os geradores de página estática lidam com ativos

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

SASS

Jekyll apoia Sass fora da caixa, mas você deve seguir algumas regras . O intermediário também oferece suporte ao Sass fora da caixa. Hugo compila Sass através Hugo Pipes para Sass . Hexo faz isso via plugar .

ES6

Se você deseja usar os recursos JavaScript modernos do es6, deve instalar um plugin. Pode haver mais de uma versão de um plug-in semelhante, então você pode querer verificar o código ou ver os problemas abertos ou o último compromisso para encontrar o melhor.

Imagens

A otimização de imagem também não é suportada por padrão. Além disso, como os plug-ins es6, há mais de um plug-in 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 é compilado com Hexo, estou usando o plano gratuito Cloudinary. Eu desenvolvi um tag cloudinary , e estou fornecendo imagens responsivas e otimizadas por meio de transformações Cloudinary.

Plugins, Extensões

Os geradores de páginas estáticas têm bibliotecas potentes que permitem que você personalize seu site. Cada plugin tem um propósito diferente. Você pode encontrar uma ampla variedade de plug-ins, desde 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. Vejo Lista de plugins Jekyll , Extensões de intermediários , e Plugins Hexo . Hugo não tem plug-ins ou extensões. No entanto, ele oferece suporte a códigos de acesso personalizados.

Shortcodes no Markdown

Shortcodes são fragmentos 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 integrados, como a figura em Hugo:

{{}}

Hexo youtube shortcode:

{% youtube video_id %}

Se você não conseguir encontrar um shortcode adequado, pode criar um novo. Por exemplo, Hexo não suporta incorporações CanIUse, e eu desenvolvi uma nova tag que suporta a incorporação 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

Geradores de páginas estáticas podem ser 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 de Sistema de gerenciamento de conteúdo para sites JAMstack . Nesta lista, você pode encontrar o sistema que melhor se adapta à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 quer gastar muito tempo configurando seu projeto, você pode se beneficiar Modelos JAMstack . Alguns desses modelos já vêm pré-configurados com o CMS, o que pode economizar muito tempo.

Você também pode aprender muito examinando o código. Tente instalar um template, 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 construir um site. Você pode até mesmo construir sites não triviais e altamente personalizados com um gerador hoje em dia.

Por exemplo, Revista Smashing mudaram-se para o JAMstack no ano passado e conseguiram acelerar significativamente o site. Existem outros exemplos de sucesso de sites estáticos e todos eles compartilham o mesmo princípio - produzir recursos estáticos e distribuí-los por meio de redes de distribuição de conteúdo para carregamento mais rápido e uma experiência superior do usuário.

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

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

Relacionado: Lado do cliente x lado do servidor x pré-renderização para aplicativos da web

Compreender o básico

O que é uma página da web estática?

Uma página da web estática é composta por conteúdo fixo, codificado em HTML. Ele fornece exatamente o mesmo HTML para cada usuário. Essa ausência de geração automatizada torna as páginas estáticas extremamente rápidas.

O que é uma página da web dinâmica?

Uma página da web dinâmica depende de servidores para construir dinamicamente cada página quando um usuário solicita seu acesso. Isso permite que a página exiba conteúdo diferente cada vez que é visualizada.

Qual é a diferença entre sites estáticos e dinâmicos?

Ao contrário de uma página da web estática, uma página dinâmica depende de scripts do lado do servidor. Isso permite um maior grau de flexibilidade e gerenciamento de conteúdo mais fácil. As páginas estáticas tendem a ser mais rápidas, mais confiáveis ​​e requerem muito menos recursos.

O que é um gerador de site estático?

Um gerador de site estático (às vezes abreviado como SSG) cria uma página HTML estática usando arquivos de origem, permitindo assim uma abordagem híbrida. Em teoria, isso significa que você pode colher alguns benefícios das páginas estáticas, sem abrir mão da praticidade de um CMS.