Geradores de sites estáticos: o que são e como usar o Eleventy

O que é um gerador de sites estáticos (SSG)

SSG é a sigla em inglês para static site generator. O gerador roda no seu computador ou no servidor de build, não na visita do leitor. Quando alguém abre a página, o HTML já está pronto.

Isso muda a conta de velocidade e segurança. Não há consulta a banco a cada acesso, nem painel exposto na internet. O conceito está detalhado em sites estáticos.

A diferença para o HTML escrito à mão é a repetição. Num site de 5 páginas, copiar o cabeçalho não pesa. Num site de 300, cada mudança no menu viraria 300 edições. O gerador resolve isso com layouts.

Por que o Eleventy

O Eleventy é um gerador simples de começar e flexível para crescer. A documentação oficial informa que a versão 3.1.8 precisa de Node.js 18 ou mais recente. Ele não impõe framework de JavaScript no navegador: a página sai como HTML puro.

Outro ponto é a variedade de linguagens. A documentação lista HTML, Markdown, JavaScript, WebC, Nunjucks, Liquid, Handlebars, Mustache, EJS, HAML, Pug e Sass. Na prática, a dupla mais usada é Markdown para o texto e Nunjucks para o layout.

Como instalar e rodar o Eleventy

Antes, instale o Node.js no computador. Depois, os comandos da documentação oficial são estes:

mkdir meu-site
cd meu-site
npm init -y
npm install @11ty/eleventy
npx @11ty/eleventy
npx @11ty/eleventy --serve

1. Crie a pasta do projeto e entre nela.
2. Inicie o projeto com npm init -y.
3. Instale o Eleventy com npm install @11ty/eleventy.
4. Crie um arquivo index.md com um título e um parágrafo.
5. Rode npx @11ty/eleventy --serve e abra o endereço que aparece no terminal.

O site gerado vai para a pasta _site, que é a saída padrão. Não edite nada lá dentro: o Eleventy recria a pasta a cada build. Build é o processo de gerar os arquivos finais.

Templates e layouts

Template é qualquer arquivo que o Eleventy transforma em página. Layout é o molde que envolve o conteúdo: cabeçalho, menu e rodapé escritos uma vez.

O layout fica na pasta _includes. O conteúdo indica qual layout usar no front matter, o bloco entre traços no topo do arquivo.

<!-- _includes/base.njk -->
<!doctype html>
<html lang="pt-BR">
<head>
  <meta charset="utf-8">
  <title>{{ title }}</title>
</head>
<body>
  <header><a href="/">Minha Empresa</a></header>
  <main>{{ content | safe }}</main>
</body>
</html>

---
layout: base.njk
title: Nossos serviços
---
Atendemos residências e empresas.

O Eleventy junta os dois e gera _site/servicos/index.html, se o arquivo se chamar servicos.md. Mudou o rodapé? Você edita só o base.njk.

Dados globais na pasta _data

A pasta _data guarda os dados que todos os modelos enxergam. Segundo a documentação, cada arquivo JSON ou JavaScript ali vira uma variável com o nome do arquivo.

{
  "nome": "Minha Empresa",
  "cidade": "Goiânia",
  "whatsapp": "Link do botão"
}

Salvo como _data/empresa.json, esse conteúdo aparece em qualquer modelo como empresa.nome ou empresa.cidade. Trocou o endereço? Você muda num arquivo e o site inteiro atualiza no próximo build.

O MundoBlá recebe uma comissão da HostGator quando você contrata a hospedagem pelo nosso link, sem custo extra para você. Se o projeto usa gerador ou HTML direto, isso entra no escopo combinado no WhatsApp.

Coleções: listas de posts e páginas

Coleção é um grupo de páginas que você pode listar num modelo. No Eleventy, ela nasce do campo tags. A documentação explica que cada valor de tags vira uma coleção, e que existe também collections.all, com todo o conteúdo.

---
title: Meu primeiro post
tags: post
---

Para listar todos os posts numa página de blog, o loop em Nunjucks fica assim:

<ul>
{%- for post in collections.post -%}
  <li><a href="{{ post.url }}">{{ post.data.title }}</a></li>
{%- endfor -%}
</ul>

Uma página pode estar em mais de uma coleção ao mesmo tempo. Basta listar mais de uma tag.

As tags no Eleventy servem para montar coleções, não para criar hierarquia. Se você quer categorias com página própria, como /blog/receitas/, combine a coleção com a paginação da seção seguinte. Assim cada categoria ganha a sua lista de posts gerada sozinha.

Uma dica de organização: use uma tag fixa para o tipo de conteúdo (post, servico, caso) e outras para o assunto. A listagem do blog lê só a coleção post, e a página de serviços lê só servico. Fica fácil mudar o layout de um grupo sem mexer nos outros.

Milhares de páginas com paginação

A paginação é o recurso que faz o Eleventy gerar páginas em lote a partir de dados. Você aponta o modelo para uma lista, define quantos itens vão em cada página com size e dá um nome ao item com alias. O permalink usa esse nome para criar uma URL por item.

---
pagination:
  data: cidades
  size: 1
  alias: cidade
permalink: "atendimento/{{ cidade.slug }}/index.html"
---
<h1>Atendimento em {{ cidade.nome }}</h1>

Com um _data/cidades.json de 200 itens, saem 200 páginas. É assim que portais criam catálogos, glossários e páginas por cidade. Cuidado: página em lote com texto quase igual é vista como conteúdo raso. Escreva algo próprio para cada item.

Publicar com GitHub e Cloudflare Pages

O projeto Eleventy vai para um repositório do GitHub, onde fica o histórico de cada mudança. O passo a passo está em GitHub para criar sites.

Depois você conecta o repositório à Cloudflare Pages. O guia oficial da Cloudflare para Eleventy indica o comando de build npx @11ty/eleventy e a pasta de saída _site. A cada push, a Cloudflare gera e publica o site, e cada ramo ganha uma URL de pré-visualização.

Os 20.000 arquivos contam imagens, CSS e JavaScript, não só páginas. Num site com milhares de páginas e imagens, faça a conta antes. A comparação de hospedagens está em GitHub Pages ou Cloudflare Pages, e a configuração em Cloudflare Pages.

Quando o Eleventy não é a escolha certa

Se quem publica é uma equipe sem contato com código, o fluxo de Markdown e Git vira barreira. Nesse caso, um CMS com painel ou um painel headless ligado ao gerador pode servir melhor. As opções estão em alternativas ao WordPress.

Se o site tem 5 páginas fixas, o gerador pode ser exagero. O passo a passo do site em HTML resolve com menos ferramenta.

Para começar pelo mapa do tema, veja a resposta curta sobre o Mundo Criação de Sites. A resposta sobre sites sem banco de dados completa o raciocínio, e outras dúvidas têm resposta na página inicial.

Para entender a filosofia por trás do Eleventy, do GitHub e da Cloudflare juntos, volte ao guia Web livre.

Em outros Mundos

O JavaScript e o Node.js usados no Eleventy são tema do Mundo Programação. Para levar as páginas geradas ao topo do Google, passe pelo Mundo SEO.