{"id":59141,"date":"2023-04-27T07:34:22","date_gmt":"2023-04-27T10:34:22","guid":{"rendered":"https:\/\/kinsta.com\/pt\/?p=59141&preview=true&preview_id=59141"},"modified":"2023-10-27T03:04:30","modified_gmt":"2023-10-27T06:04:30","slug":"eleventy","status":"publish","type":"post","link":"https:\/\/kinsta.com\/pt\/blog\/eleventy\/","title":{"rendered":"Como Criar um Site Est\u00e1tico Elegante com Eleventy (11ty)"},"content":{"rendered":"

Com o aumento dos geradores de sites est\u00e1ticos (SSGs)<\/a> como o Eleventy, nunca foi t\u00e3o f\u00e1cil criar um site est\u00e1tico<\/a> elegante e eficiente.<\/p>\n

Neste artigo, exploraremos como usar o Eleventy para criar um site de portf\u00f3lio est\u00e1tico impressionante e funcional sem precisar de uma linguagem ou banco de dados do lado do servidor.<\/p>\n

Voc\u00ea tamb\u00e9m aprender\u00e1 como implantar seu site est\u00e1tico diretamente do seu reposit\u00f3rio GitHub para a hospedagem de site est\u00e1tico<\/a> da Kinsta, colocando seu site no ar rapidamente em um dom\u00ednio .kinsta.page<\/em> gratuito.<\/p>\n

Aqui est\u00e1 uma demonstra\u00e7\u00e3o em tempo real<\/a>\u00a0do site de portf\u00f3lio est\u00e1tico que voc\u00ea criar\u00e1 com o Eleventy.<\/p>\n

\"Stylish
Site de portf\u00f3lio est\u00e1tico elegante.<\/figcaption><\/figure>\n

Voc\u00ea pode acessar o reposit\u00f3rio do GitHub<\/a> deste projeto se quiser dar uma olhada mais de perto.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

O que \u00e9 Eleventy?<\/h2>\n

O Eleventy, tamb\u00e9m conhecido como 11ty, \u00e9 um gerador de sites est\u00e1ticos que cria sites com base em HTML<\/a>, CSS<\/a> e JavaScript<\/a> sem a necessidade de bancos de dados e linguagens de programa\u00e7\u00e3o de backend<\/a>.<\/p>\n

O Eleventy \u00e9 conhecido por sua simplicidade e flexibilidade, pois n\u00e3o obriga voc\u00ea a usar apenas uma linguagem ou framework de template. Ele suporta mais de 10 linguagens de template e permite que voc\u00ea use quantas quiser em um \u00fanico projeto:<\/p>\n

\"Template
Onze linguagens de template.<\/figcaption><\/figure>\n

O Eleventy, como a maioria dos SSGs, permite que voc\u00ea crie o conte\u00fado do seu site est\u00e1tico usando componentes reutiliz\u00e1veis em vez de criar documentos HTML completos para cada p\u00e1gina.<\/p>\n\n

Como instalar o Eleventy<\/h2>\n

\u00c9 f\u00e1cil instalar o Eleventy. Veja como:<\/p>\n

    \n
  1. Certifique-se de que voc\u00ea tenha o Node.js<\/a> instalado em seu computador. Voc\u00ea pode verificar executando o comando node -v<\/code> em seu terminal. Voc\u00ea n\u00e3o est\u00e1 dispon\u00edvel? Veja como instalar o Node.js<\/a> em seu computador.<\/li>\n
  2. Crie um novo diret\u00f3rio para seu projeto.<\/li>\n
  3. Abra o terminal e execute o comando npm init -y<\/code> no diret\u00f3rio do seu projeto para inicializar um novo projeto Node.js, criando um arquivo package.json<\/strong> com as configura\u00e7\u00f5es padr\u00e3o.<\/li>\n
  4. Execute o comando npm install @11ty\/eleventy --save-dev<\/code> para instalar o pacote como uma depend\u00eancia de desenvolvimento em seu projeto.<\/li>\n
  5. E pronto! Agora voc\u00ea pode executar o Eleventy executando o comando npx @11ty\/eleventy<\/code> no diret\u00f3rio do seu projeto. Isso gerar\u00e1 os arquivos do site e os enviar\u00e1 para um diret\u00f3rio _site<\/strong> (ou o diret\u00f3rio configurado por voc\u00ea) na pasta do projeto.<\/li>\n<\/ol>\n

    Observa\u00e7\u00e3o:<\/strong> Quando voc\u00ea executar o comando npx @11ty\/eleventy<\/code>. Voc\u00ea obter\u00e1 esta sa\u00edda:<\/p>\n

    [11ty] Wrote 0 files in 0.01 seconds (v2.0.0)<\/code><\/pre>\n
    Aqui, 0 arquivos s\u00e3o gravados porque n\u00e3o h\u00e1 templates na pasta do seu projeto.<\/p>\n
    Comandos e configura\u00e7\u00e3o do Eleventy<\/h2>\n
    Agora voc\u00ea tem seu projeto Eleventy criado, mas isso n\u00e3o \u00e9 tudo. Voc\u00ea precisa criar algumas configura\u00e7\u00f5es e conhecer alguns comandos b\u00e1sicos para o seu site est\u00e1tico que podem ser servidos no navegador.<\/p>\n
    Comandos do Eleventy<\/h3>\n
    Aqui est\u00e3o alguns dos principais comandos do Eleventy que voc\u00ea deve conhecer:<\/p>\n