Um mergulho profundo no gerador de site estático Eleventy

Mas primeiro – vamos revisar rapidamente o que significa um “site estático” e depois o que um gerador fornece. Um site estático é composto de conteúdo estático - como em HTML, CSS, ativos e todo o conteúdo já é compilado antes de ser enviado para um host de site. Isso é diferente de um site dinâmico que compila essas coisas de consultar um banco de dados em tempo de execução (como WordPress) ou que extrai conteúdo de APIs do lado do cliente (como estruturas JavaScript sem renderização do lado do servidor).

Um gerador de site estático é um ambiente e processador de compilação para compilar seu conteúdo em HTML estático. Eles geralmente oferecem ajudantes para fornecer flexibilidade na escrita de seu conteúdo (como suporte a Markdown) e incluem métodos para modelagem. Então, em vez de escrever páginas HTML uma a uma e ter que copiar e colar as partes repetidas, um gerador suportará a quebra dessas coisas em componentes por meio de uma determinada linguagem de modelagem. Em seguida, o processo de construção do gerador reunirá tudo e produzirá o HTML final que pode ser carregado em um host da Web para ser servido como seu site. Dependendo do host que você usa, esse processo de compilação pode até ser feito pelo host.

Existem muitos geradores de sites estáticos disponíveis. Você pode ter ouvido falar ou até mesmo usado como Jekyll, Hugo, Gatsby, Next e Nuxt. Uma lista abrangente é fornecida pelo Jamstack.org.

O que diferencia a Eleventy de outros geradores de sites estáticos?

Eleventy é excepcionalmente rápido tanto durante as compilações quanto no navegador. Isso se deve em grande parte ao fato de não exigir o carregamento de um pacote JavaScript do lado do cliente para servir conteúdo (em comparação com algo como Gatsby). A renderização do lado do servidor nem é uma preocupação aqui, já que a criação da página do sistema de arquivos é padronizada para HTML estático.

O que realmente torna o Eleventy único é a capacidade de selecionar e misturar até dez linguagens de templates diferentes:

A mistura de idiomas pode acontecer no mesmo arquivo ou entre layouts. Por exemplo, costumo escrever meu conteúdo principal com Markdown que alimenta um layout Nunjucks. Em alguns projetos, achei útil poder fazer um loop sobre alguns dados usando Nunjucks enquanto estiver no arquivo Markdown. Essa capacidade de combinar idiomas é muito poderosa e permite que você crie um fluxo de trabalho de gravação e criação que funcione melhor para você e seu projeto.

Eleventy inclui um sinalizador --serve que usa o BrowserSync para habilitar o atendimento ao site localmente e com hot-reload nas alterações de arquivo. Esta é uma grande conveniência e é bom ter em mente se você não estiver procurando por um gerador de site estático, mas talvez uma atualização de ferramentas de construção como o Gulp.

Como parte de ser zero-config, todos os arquivos do seu site podem ficar na raiz do seu projeto. Para alterar os diretórios de entrada e saída, você pode criar uma configuração Eleventy, que deve ser um arquivo raiz chamado .eleventy.js . Aqui está um snippet rápido mostrando como fazer essa modificação:

 module.exports = function (eleventyConfig) { return { dir: { // default: [site root] input: "src", // default: _site output: "public", }, }; };

Como observado anteriormente, o comportamento padrão é a criação de página do sistema de arquivos, que geralmente é de grande benefício, especialmente para iniciar rapidamente. Isso é facilmente substituível atribuindo um permalink personalizado e isso pode ser feito por arquivo, para um diretório inteiro ou dinamicamente para um conjunto de dados. Os links permanentes também oferecem outra superpotência que exploraremos daqui a pouco!

Exclusivamente, durante a compilação, você pode preparar conteúdo, dados e transformações nesse conteúdo e dados usando JavaScript e aproveitando filtros e códigos de acesso (falaremos sobre isso mais tarde). Novamente, tudo isso acontece sem adicionar um pacote JavaScript do lado do cliente, enquanto ainda permite o uso de JavaScript como uma linguagem de modelagem.

Nota importante : Você pode usar com sucesso o Eleventy sem ou com baixo conhecimento de JavaScript.

Ao contrário de outros SSGs como Gatsby, ou ambientes como WordPress, a maioria dos sites Eleventy não requer nenhum plugin. Existem alguns plugins disponíveis, mas eles não são necessários para a funcionalidade essencial.

Ao construir com Eleventy, você pode adicionar recursos conforme necessário. Na verdade, você poderia simplesmente usar HTML e nunca trabalhar com nenhuma das outras linguagens de modelagem. Eleventy é tão complexo quanto o seu projeto exige!

Entendendo os Conceitos Essenciais do Eleventy

Vamos rever alguns bits de terminologia e conceitos que irão ajudá-lo a ter sucesso na criação de seus projetos Eleventy.

Layouts e modelos

Você pode pensar nesses termos como intercambiáveis, mas no contexto da Eleventy, eles têm significados contextuais:

• Modelo é o termo genérico para todos os arquivos de conteúdo.
• Layouts são modelos especiais que envolvem outros conteúdos.

Por exemplo, template refere-se a todos os seus arquivos Markdown, enquanto um layout pode ser um arquivo Nunjucks que contém o clichê HTML5 e um slot para o conteúdo do template. Aprenderemos como fazer isso funcionar na seção sobre como começar.

Filtros e códigos de acesso

Essas são maneiras adicionais de modificar a saída de conteúdo e criar partes de modelo reutilizáveis. Eles estão disponíveis para uso com modelos Nunjucks, Liquid, Handlebars e JavaScript. Filtros e códigos de acesso são definidos em .eleventy.js .

Além de variáveis ​​e operadores disponíveis em sua linguagem de modelagem de escolha, a Eleventy unificou o conceito de filtros nos idiomas listados anteriormente. Os filtros transformam o conteúdo de alguma forma específica para o tipo de conteúdo. Por exemplo, você pode criar um filtro destinado a strings para maiúsculo. Ou você pode ter um filtro destinado a ser usado em arrays para alterar o que é retornado, como escolher um item aleatório. Alguns filtros são fornecidos pela Eleventy, alguns dos quais usaremos no tutorial de introdução.

Os códigos de acesso permitem criar peças de modelo reutilizáveis ​​e são capazes de aceitar argumentos. Eles podem ser autônomos ou pareados, o que significa que envolvem o conteúdo com uma tag inicial e final.

Um dos meus códigos de acesso favoritos é renderizar o ano atual - o que significa que não há mais anos de direitos autorais desatualizados em seu rodapé! Veja como criar um shortcode de year :

 eleventyConfig.addShortcode("year", () => `${new Date().getFullYear()}`);

Para usá-lo em um modelo Nunjucks ou Liquid fica assim: {% year %} .

Você pode revisar os documentos do Eleventy para obter exemplos de códigos de acesso emparelhados.

Coleções

As coleções são grupos de conteúdo relacionado e normalmente são criadas no frontmatter definindo tags . As opções de sintaxe de tag incluem strings únicas, matrizes de linha única — ["tagA", "tagB"] — para vários ou listas no estilo YAML para atribuir várias tags. Por exemplo, posso criar uma coleção de “páginas” adicionando o seguinte frontmatter a todo o conteúdo que desejo incluir nessa coleção:

 --- tags: pages ---

Depois de definir uma coleção, você pode acessá-la por meio da linguagem de modelagem de sua escolha no objeto de collections globais. Para acessar nossa coleção de “páginas” seria parecido com collections.pages . Isso retorna uma matriz de dados dessa coleção e, portanto, você pode executar operações de matriz, como fazer um loop sobre ela, para produzir uma lista de links ou cartões de teaser de artigo. Você pode até suprimir a saída de arquivo normal e usar apenas coleções para gerenciar a exibição de dados, o que é útil para gerenciar o conteúdo do site de página única.

Dados personalizados

Até agora, falamos sobre a criação de conteúdo como arquivos, mas o Eleventy também facilita muito a manutenção de diferentes fontes de dados. Isso é chamado de “dados personalizados” e vive como exportações do módulo JavaScript ou arquivos JSON no diretório _data .

Os dados personalizados podem ser usados ​​para:

• Defina uma matriz JSON básica.
• Retorna os resultados de uma operação de busca.
• Recupere e reformate o conteúdo de um CMS headless.

Eleventy disponibiliza todos os dados de _data em uma variável que corresponde ao nome do arquivo. Por exemplo, se eu criar posts.json , posso acessar isso em meus modelos como posts . Usando Nunjucks, aqui está um exemplo de loop sobre os dados das posts :

 {% for post in posts %} {{ post.title }} {% endfor %}

Paginação e criação de páginas a partir de dados

Em termos de Eleventy, paginação refere-se a iterar sobre um conjunto de dados e definir um modelo para a saída desse “pedaço” de dados. Isso é feito com um arquivo dedicado que define a paginação dentro do frontmatter. O arquivo também inclui a configuração da saída pretendida para os dados, o que significa que também se torna seu próprio modelo. Podemos definir um layout para enviar o conteúdo e também adicionar tags para criar uma coleção para facilitar a referência e flexibilidade para a saída.

Observação : se você usa dados personalizados para recuperar conteúdo de um CMS, a paginação é o método Eleventy que você procura para transformar esses dados em páginas dinamicamente.

Aqui está um exemplo de referência aos dados personalizados de nossas posts , que presumiremos que estamos recuperando por meio de uma busca de um CMS headless. É importante ressaltar que o size é definido como 1, o que significa que cada “pedaço de paginação” deve produzir uma única página de saída. Em seguida, usamos o alias para criar uma referência ao item atual no loop de paginação e, em seguida, usamos essa referência na definição do permalink e no corpo do modelo.

O arquivo que define a paginação pode ficar onde você quiser dentro do seu diretório de entrada. Minha preferência organizacional é criar um diretório de generate e, em seguida, nomeá-lo da mesma forma que a coleção que será criada. Considere o seguinte como src/generate/posts.njk :

 --- pagination: data: posts size: 1 alias: post addAllPagesToCollections: true permalink: "/{{ post.title | slug }}/" tags: posts layout: post templateEngineOverride: njk, md --- {{ post.body | safe }}

Nesse caso, o permalink está atribuindo a página a ser enviada diretamente da raiz do site. Você pode alterar isso para adicionar um prefixo como /posts/{{ post.title | slug }} /posts/{{ post.title | slug }} , por exemplo.

Além disso, se desejar que todas as páginas geradas estejam disponíveis na coleção criada pelas tags, você deverá definir addAllPagesToCollections como true para incluir mais do que o primeiro item.

Por fim, se o seu conteúdo estiver chegando como Markdown em vez de HTML pré-compilado, você precisará usar o templateEngineOverride . No trecho de exemplo, configurei para njk, md o que significa que o conteúdo do modelo precisará ser processado como Nunjucks para converter a variável e, em seguida, Markdown para compilar o conteúdo retornado na variável.

Se você está se perguntando o que significa safe , vamos aprender isso a seguir!

Como começar com Eleventy

Tudo bem, então você está pronto para começar seu primeiro projeto Eleventy! Este breve tutorial ajudará você a obter uma estrutura inicial para continuar construindo. Usaremos os conceitos que já aprendemos e adicionaremos algumas novas ideias também.

A primeira observação importante aqui é que Eleventy é um pacote com escopo definido, então aqui está o comando de instalação:

 npm install @11ty/eleventy

Em seguida, uma conveniência útil que gosto de fazer é adicionar os seguintes scripts ao meu package.json :

 "scripts": { "start": "eleventy --serve", "build": "eleventy" }

Como mencionado anteriormente, o sinalizador --serve habilitará um servidor local via BrowserSync.

Minha preferência é atualizar os diretórios de entrada/saída como já vimos, então agora é hora de criar algum conteúdo dentro do src ou no diretório de entrada de sua escolha.

Para preparar nosso projeto para ser mais flexível e escalável desde o início, sugiro criar pelo menos um layout que contenha o clichê HTML5. Os layouts precisam ser definidos diretamente em um _includes , que é um dos poucos diretórios esperados.

Uma convenção que você encontrará frequentemente entre os iniciantes é chamar esse layout de base . Eu tenho uma preferência por torná-lo um arquivo Nunjucks.

Aqui está um exemplo base.njk :

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>{{ title }}</title> </head> <body> <header> <h1>{{ title }}</h1> </header> <main> {{ content | safe }} </main> </body> </html>

As chaves duplas são a sintaxe do Nunjucks para variáveis. Aqui, nós preparamos para uma variável de title de entrada que em breve será fornecida por meio de matéria prima. A variável de content é fornecida pelo Eleventy e marca o slot para onde todo o conteúdo de entrada não-frontal deve ir. É importante ressaltar que isso é usado em conjunto com o filtro safe fornecido que impede que o HTML compilado seja escapado versus renderizado.

Agora é hora de criar nosso índice do site, que adicionaremos como index.md :

 --- title: Hello Smashing Readers! layout: base.njk --- Thanks for reading — hope you're excited to try Eleventy!

Observe que na matéria de frente adicionamos nosso título, e também definimos o layout.

Neste ponto, podemos executar nosso projeto com o script que adicionamos: npm start . Isso acionará o BrowserSync para configurar localhost:8080 (se estiver disponível), mas você precisará abri-lo manualmente no navegador. Confira esta dica rápida se quiser que ela abra o navegador automaticamente.

A última etapa crítica é adicionar uma folha de estilo. Atualmente, o CSS não é reconhecido como um tipo de arquivo incluído automaticamente, então teremos uma etapa extra de configuração após criarmos nossa folha de estilo.

Você pode adicionar um arquivo CSS onde quiser em seu diretório de entrada, como css/style.css . Em seguida, abra .eleventy.js (ou crie-o na raiz do projeto se você não fez a personalização de entrada/saída) e adicione o seguinte:

 module.exports = function (eleventyConfig) { eleventyConfig.addPassthroughCopy("./src/css/"); eleventyConfig.addWatchTarget("./src/css/"); // - input/output customization if using - };

Primeiro, adicionamos o diretório css como uma “cópia de passagem”, o que significa que o Eleventy deve incluí-lo no push para o diretório de saída. Em seguida, também o adicionamos como um “alvo de observação” para que, à medida que fizermos alterações em nossos estilos enquanto executamos nosso comando de start , o Eleventy acionará uma reconstrução para atualizar nosso site local.

Por fim, precisamos lembrar de adicionar o link à nossa folha de estilo dentro do nosso layout base :

 <link rel="stylesheet" href="{{ '/css/style.css' | url }}" />

Quando definimos a localização da folha de estilo, passamos pelo filtro de url do Eleventy, que ajustará o caminho do arquivo relativo conforme necessário durante a compilação.

Em seguida, vamos criar um tipo de postagem “páginas” para explorar um pouco mais o uso de coleções e layouts. Para fazer isso, adicione o diretório de pages e crie um ou dois arquivos Markdown, incluindo uma chave de title , mas não um layout.

Vamos usar um método ligeiramente diferente para definir o layout desta vez — um arquivo de diretório de dados . Esse arquivo geralmente é formatado como JSON e nos permite adicionar dados que devem ser aplicados a todos os arquivos em um diretório, o que evita ter que duplicá-lo entre os arquivos. O arquivo precisa ter o mesmo nome do diretório para o qual será usado, então crie o arquivo pages.json e adicione o seguinte conteúdo:

 { "layout": "page.njk", "tags": "pages" }

Também avançamos e definimos tags para criar a coleção “pages”. Mas o layout que definimos ainda não existe, então crie _includes/page.njk e adicione o seguinte:

 --- layout: base.njk --- <article> {{ content | safe }} </article>

Aqui estamos usando o conceito Eleventy de encadeamento de layout para poder reutilizar nosso modelo base mas também adicionar um elemento exclusivo para nosso layout de page , que é o <article> . Isso significa que todo o conteúdo de nossas páginas usará o layout da page e os layouts base .

O encadeamento de layout reduz a duplicação ao permitir a reutilização de clichês e estruturas de layout do site básico.

Agora que criamos conteúdo para o tipo de conteúdo pages e o definimos como a coleção “pages” por meio das tags, vamos ver como podemos acessar essa coleção. Aqui, usaremos Nunjucks para fazer um loop sobre a coleção e gerar uma lista de links para cada página. Este loop será adicionado em nosso arquivo index.md .

 {% for post in collections.post -%} - [{{ post.data.title }}]({{ post.url }}) {% endfor %}

No entanto, fizemos algo único, que é que o interior do loop na verdade volta para Markdown para renderizar os links. Essa não é uma maneira obrigatória de lidar com esse cenário, mas pode ser muito útil! Às vezes, dependendo da complexidade, isso pode não funcionar. A verdadeira razão é que o renderizador Markdown é padronizado para a linguagem de templates Liquid , então se você estiver usando os recursos do Nunjucks além dos loops básicos, você terá que deixar a Eleventy saber como processar o arquivo.

Na seção anterior sobre paginação, já analisamos a solução para isso. E isso é fazer uso do templateEngineOverride para indicar que o arquivo deve ser processado como Nunjucks e Markdown. A solução completa a seguir deve ser colocada na frente do template: templateEngineOverride: njk, md .

Neste ponto, você criou um site básico de várias páginas! Se você precisar usar dados externos, volte para a seção sobre paginação.

Outras maneiras de iniciar um projeto Eleventy

Enquanto alguns outros geradores de sites estáticos e ambientes como o WordPress têm o conceito de “temas”, o Eleventy usa o termo “starter”. Há uma coleção crescente para escolher, e muitos podem ser encontrados na listagem nos documentos Eleventy.

Minha preferência é usar Sass com meus projetos Eleventy, e eu tenho um inicializador Sass disponível se você quiser ver como adicioná-lo ao seu processo de construção. Outros podem optar por adicionar o Gulp se estiverem acostumados a esse pipeline de construção para ativos e processamento.

Também criei um inicial mínimo que inclui os recursos discutidos neste artigo e compartilha semelhanças com o resultado do tutorial. Ele também tem um pequeno exemplo de busca de dados externos e mostra como adicionar uma parcial para exibir a navegação do site com base em uma coleção.

Expandindo o básico

Depois de experimentar a criação de seu primeiro site com algum conteúdo básico e talvez alguns dados personalizados, é útil conhecer outras formas de trabalhar com esse conteúdo. Aqui está uma breve visão geral de alguns outros conceitos para estar ciente.

Alterando o tipo de saída do arquivo com links permanentes

Mencionei anteriormente que os permalinks têm um superpoder. E isso é que você pode usá-los para gerar tipos de arquivo não HTML.

Dois exemplos úteis são a criação de um feed RSS e um mapa do site, que normalmente são arquivos XML. O que é realmente poderoso é que você pode continuar usando a linguagem de modelagem de sua escolha para ajudar a gerar esses arquivos, para que você possa fazer um loop sobre os dados da página com o Nunjucks para manter seu feed RSS atualizado, por exemplo.

Personalizando coleções

Às vezes, usar tags para criar coleções pode não ser suficiente. Ou você pode criar variações filtradas de uma coleção existente. Podemos alterar ou criar coleções usando uma série de funções fornecidas. Eles ficarão no arquivo de configuração .eleventy.js .

Neste exemplo, estamos usando a função addCollection para filtrar itens em uma coleção existente. A nova coleção será baseada na existência de customKey no front Matter. Essa chave é retornada do objeto de data que está anexado a todo o conteúdo Eleventy gerado.

 eleventyConfig.addCollection("specialCollection", function (collection) { return collection.getAll().filter((post) => post.data.customKey); });

Você pode revisar outras maneiras de criar, modificar e usar coleções nos documentos do Eleventy.

Trabalhando com a cascata de dados

Eleventy tem um conceito mais completo de como os dados são compilados para um modelo chamado cascata de dados , que apenas começamos a explorar neste guia. Você obterá o máximo do Eleventy se revisar como isso funciona, começando nos documentos. Ben Myers também tem um excelente guia para entender a cascata de dados.

Plugins Eleventy Recomendados

Na introdução, mencionei brevemente que havia plugins disponíveis, mas que nem sempre são necessários. No entanto, existem alguns que costumo usar na maioria dos projetos, que incluem:

• @11ty/eleventy-plugin-rss Se você gostaria de ter um feed RSS, este plugin oficial fornece alguns filtros para ajudá-lo a gerar o feed. O repositório vinculado inclui um feed de amostra, que você também pode encontrar em uso em alguns iniciantes.
• @11ty/eleventy-plugin-syntaxhighlight Em vez de carregar o Prism como um script para destaque de código, este plugin permite que o processamento seja aplicado como parte do processo de construção do Eleventy. Isso significa que os blocos de código são transformados para incluir as classes para aplicar um tema Prism com antecedência, então você só precisará adicionar um tema Prism CSS de sua escolha.
• @11tyrocks/eleventy-plugin-social-images Um recurso que procurei no início da minha exploração do Eleventy foi a capacidade de gerar imagens de compartilhamento de mídia social. Isso me levou a criar um plugin que usa o Puppeteer nos bastidores para tirar o instantâneo. O plug-in vem com modelos pré-construídos, bem como opções de configuração para definir seu próprio arquivo de modelo.

Eu também recomendaria se familiarizar com o restante dos plugins oficiais do Eleventy, pois eles atendem a outras necessidades comuns, incluindo navegação e manuseio de imagens.

Decidindo se o Eleventy é adequado para o seu projeto

Eleventy, como a maioria dos sites estáticos, é melhor para conteúdo que normalmente não precisa ser servido dinamicamente ou sob demanda. Isso não quer dizer que todo o site tenha que ser estático ou que não existam maneiras de tornar o conteúdo dinâmico. Você ainda pode carregar JavaScript para habilitar conteúdo dinâmico, como buscar de APIs ou criar widgets interativos. Você também pode usar serviços como IFTTT ou Zapier para facilitar a reconstrução do seu site se o seu host oferecer suporte à construção de webhooks e você tiver partes que deseja atualizar em uma programação.

Graças aos dados personalizados e à paginação, vimos que era fácil incluir dados externos a partir de um CMS headless ou de qualquer outra API. Portanto, embora seja servido estaticamente, você ainda tem muita flexibilidade em onde você puxa o conteúdo e como o gerencia.

O que eu mais gosto no Eleventy é que ele não impõe muitas opiniões sobre como devo estruturar meu site, além dos poucos diretórios esperados sobre os quais falamos para _includes e _data (e você pode atualizar a convenção de nomenclatura desses também). Isso também pode ser útil se você estiver procurando migrar um site e também poder mover uma estrutura de arquivos existente. No entanto, se você preferir uma arquitetura mais opinativa, poderá procurar uma opção diferente.

Também gosto de como posso moldar o Eleventy para se adequar ao meu modelo mental para um determinado projeto, aproveitando várias linguagens de modelagem, bem como filtros, códigos de acesso e layouts. Os iniciantes também ajudam a dar um impulso para que você possa focar no que é realmente importante: seu conteúdo. E o alto desempenho da saída puramente estática também é um grande benefício.

Se você precisar de um pouco mais em seu processo de construção, você pode adicionar outras ferramentas familiares como Webpack, Gulp ou Parcel. Você pode encontrar um iniciador que já inclua essas coisas. Lembre-se de que você também pode aproveitar os scripts Node que já são inerentes ao processo de construção do Eleventy.

Eleventy é muito capaz de lidar com grandes quantidades de geração de páginas. Ele tem sido usado para alguns sites grandes e complexos, como o web.dev do Google e o site de marketing da Netlify. Também usei o Eleventy para alguns propósitos não convencionais, como geradores de e-mail e componentes da Web, juntamente com alguns outros descritos nesta visão geral.

Recursos adicionais

Espero que este guia tenha despertado seu interesse e preparado você para começar a usar o Eleventy! Ele incluiu muitos pontos que achei um pouco difícil de descobrir quando estava criando meu primeiro projeto com ele. Desde que encontrei o Eleventy pela primeira vez em abril de 2020, construí mais de 20 projetos do Eleventy contando iniciantes, plugins, projetos paralelos e materiais do curso. Muitos deles podem ser encontrados no meu site 11ty.Rocks que também tem tutoriais e dicas. Eleventy é algo que eu realmente gosto de discutir, então sinta-se à vontade para entrar em contato no Twitter!

A seguir estão mais recursos para ajudá-lo em sua jornada para aprender e tirar o máximo proveito do Eleventy:

• Andy Bell oferece um curso pago muito abrangente – “Aprenda Eleventy From Scratch”.
• A série de tutoriais de Tatiana Mac, começando com “Guia para Iniciantes do Eleventy”, fornece explicações completas que não pressupõem nenhuma experiência anterior com geradores de sites estáticos.
• Bryan Robinson oferece um curso do YouTube para converter um tema HTML gratuito em um site Eleventy.

Finalmente, quero observar que a comunidade Eleventy é pequena, mas ativa! Se você tiver dificuldade em encontrar alguma informação, você pode twittar sua pergunta para a conta oficial @eleven_ty. O criador do Eleventy, Zach Leatherman, é rápido em responder ou dar RT em perguntas para ajudá-lo a voltar ao seu caminho!