Como Criar um Site Estático Elegante com Eleventy (11ty)

Com o aumento dos geradores de sites estáticos (SSGs) como o Eleventy, nunca foi tão fácil criar um site estático elegante e eficiente.

Neste artigo, exploraremos como usar o Eleventy para criar um site de portfólio estático impressionante e funcional sem precisar de uma linguagem ou banco de dados do lado do servidor.

Você também aprenderá como implantar seu site estático diretamente do seu repositório GitHub para a hospedagem de site estático da Kinsta, colocando seu site no ar rapidamente em um domínio .kinsta.page gratuito.

Aqui está uma demonstração em tempo real do site de portfólio estático que você criará com o Eleventy.

Você pode acessar o repositório do GitHub deste projeto se quiser dar uma olhada mais de perto.

O que é Eleventy?

O Eleventy, também conhecido como 11ty, é um gerador de sites estáticos que cria sites com base em HTML, CSS e JavaScript sem a necessidade de bancos de dados e linguagens de programação de backend.

O Eleventy é conhecido por sua simplicidade e flexibilidade, pois não obriga você a usar apenas uma linguagem ou framework de template. Ele suporta mais de 10 linguagens de template e permite que você use quantas quiser em um único projeto:

O Eleventy, como a maioria dos SSGs, permite que você crie o conteúdo do seu site estático usando componentes reutilizáveis em vez de criar documentos HTML completos para cada página.

Como instalar o Eleventy

É fácil instalar o Eleventy. Veja como:

1. Certifique-se de que você tenha o Node.js instalado em seu computador. Você pode verificar executando o comando node -v em seu terminal. Você não está disponível? Veja como instalar o Node.js em seu computador.
2. Crie um novo diretório para seu projeto.
3. Abra o terminal e execute o comando npm init -y no diretório do seu projeto para inicializar um novo projeto Node.js, criando um arquivo package.json com as configurações padrão.
4. Execute o comando npm install @11ty/eleventy --save-dev para instalar o pacote como uma dependência de desenvolvimento em seu projeto.
5. E pronto! Agora você pode executar o Eleventy executando o comando npx @11ty/eleventy no diretório do seu projeto. Isso gerará os arquivos do site e os enviará para um diretório _site (ou o diretório configurado por você) na pasta do projeto.

Observação: Quando você executar o comando npx @11ty/eleventy. Você obterá esta saída:

[11ty] Wrote 0 files in 0.01 seconds (v2.0.0)

Aqui, 0 arquivos são gravados porque não há templates na pasta do seu projeto.

Comandos e configuração do Eleventy

Agora você tem seu projeto Eleventy criado, mas isso não é tudo. Você precisa criar algumas configurações e conhecer alguns comandos básicos para o seu site estático que podem ser servidos no navegador.

Comandos do Eleventy

Aqui estão alguns dos principais comandos do Eleventy que você deve conhecer:

• npx @11ty/eleventy: Esse comando é usado para criar seu site e enviar o resultado para a pasta _site (ou qualquer pasta que você tenha configurado como diretório de saída).
• npx @11ty/eleventy --serve: Esse comando iniciará um servidor local para que você possa visualizar o site no navegador. Quando você fizer qualquer alteração no site, o projeto será automaticamente reconstruído e atualizado no navegador.
• npx @11ty/eleventy --serve --port=8081: Este comando inicia o servidor Eleventy e especifica uma porta personalizada na qual o servidor ficará ouvindo (Listen).
• npx @11ty/eleventy --watch: Esse comando observará os arquivos do projeto em busca de alterações e reconstruirá automaticamente o site quando necessário.

Você não precisa memorizar esses comandos, pois pode adicioná-los aos comandos gerais no objeto scripts do seu arquivo package.json:

"scripts": {
    "build": "npx @11ty/eleventy",
    "start": "npx @11ty/eleventy --serve",
    "watch": "npx @11ty/eleventy --watch"
  },

Agora você pode usar npm start para atender ao seu aplicativo em vez de npx @11ty/eleventy --serve, e também pode executar npm run build em vez de npx @11ty/eleventy.

Como configurar seu site estático com o Eleventy

O Eleventy é “zero-config” por padrão e tem opções de configuração flexíveis. Aqui estão algumas das principais opções de configuração que você deve conhecer:

• input: Essa opção permite que você especifique o diretório dos arquivos do seu projeto. A prática recomendada é que você use src.
• output: Essa opção permite que você especifique o diretório para o qual o site criado deve ser enviado. Por padrão, o Eleventy envia a saída para a pasta _site. (Não há necessidade de alterar isso).
• templateFormats: Essa opção permite que você especifique quais extensões de arquivo devem ser processadas como templates. Por padrão, o Eleventy processa arquivos .html, .njk e .md como templates.

Esses são apenas alguns dos comandos e opções de configuração disponíveis no Eleventy. Para configurar seu projeto Eleventy, crie um arquivo .eleventy.js na raiz do seu projeto. Depois, cole esse código no arquivo para dar ao seu projeto uma estrutura que inclui um diretório de entrada:

module.exports = function (eleventyConfig) {
    return {
        dir: {
            input: 'src',
        },
    };
};

Observação: eleventyConfig é passado como um argumento, fornecendo mais opções de configuração que serão usadas posteriormente neste projeto.

Como visualizar um site Eleventy

Agora você conhece alguns comandos-chave que podem ser usados para visualizar seu site estático Eleventy, mas quando você executa o comando npm run build (npx @11ty/eleventy), nada é exibido. Isso acontece porque você não tem um arquivo de template.

Você pode criar uma pasta src na pasta raiz do seu projeto e, em seguida, criar alguns arquivos de template, como index.html, ou usar a linguagem de template de sua preferência para representar a página inicial:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Eleventy Static Site</title>
    </head>
    <body>
        Hello World!
    </body>
</html>

Se você executar o comando npm run build, uma pasta _site será criada com o arquivo estático gerado. Com certeza você vai querer que isso seja exibido no seu navegador e ativar alguns recursos de atualização automática. Isso é possível executando o comando npx @11ty/eleventy --serve, que você agora configurou como npm start. Isso disponibilizará seu site em http://localhost:8080/.

Como criar um site de portfólio estático com o Eleventy

Agora você sabe como criar um site estático com o Eleventy. Vamos criar o projeto de portfólio.

Você pode criar um novo projeto Eleventy do zero ou usar nossos arquivos iniciais, que incluem as imagens, CSS e conteúdo para este projeto, para acelerar as coisas. No GitHub, Use this template > Create a new repository para copiar esses ativos e os arquivos de configuração inicial para um novo repositório próprio e, em seguida, baixá-los para sua máquina local.

Seu projeto terá a seguinte estrutura:

├── node_modules/
├── public/
├── src/
     ├── _includes
     ├── layouts
     ├── assets
     ├── css
     ├── projects
     └── index.njk
├── .eleventy.js
├── .gitignore
├── package.lock.json
└── package.json

Como usar templates no Eleventy

Ao usar o Eleventy, há três tipos principais de templates que você precisa entender. Esses templates podem ser criados com o Nunjucks, que permite que você defina variáveis, loops, condicionais e outras lógicas que podem ser usadas para gerar o conteúdo da página dinamicamente.

• Templates de página: Eles definem a estrutura e o conteúdo de páginas individuais em seu site.
• Templates de layout: Definem a estrutura geral e o design da(s) página(s) do seu site. Geralmente incluem elementos comuns, como cabeçalhos, rodapés, menus de navegação e barras laterais, que são compartilhados em várias páginas.
• Templates partials: Definem seções pequenas e reutilizáveis da marcação HTML do seu site. São usados para definir elementos comuns, como cabeçalhos, rodapés, menus de navegação e barras laterais, que podem ser incluídos em templates de layout e de página.

Agora que você entende cada um desses tipos de templates, vamos criar templates para o site de portfólio estático.

Como criar layouts no Eleventy

Dentro do diretório src, crie um diretório _includes. Nele, você encontrará todos os nossos layouts e partições.

Você pode criar uma pasta de layouts para organizar todos os seus templates, usando sua linguagem de template preferida, como Nunjucks.

Crie um arquivo base.njk para conter o layout geral de todas as suas páginas.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="icon" href="/assets/favicon.jpeg" />
        <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
            integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
            crossorigin="anonymous"
            referrerpolicy="no-referrer"
        />
        <link rel="stylesheet" href="/css/global.css" />
        <title>J.'s Portfolio</title>
    </head>
    <body>
        <div>
            {{ content | safe }}
        </div>
    </body>
</html>

No código acima, uma marcação HTML geral é criada e a Font Awesome é incluída de um CDN para que você possa ter acesso aos ícones. Além disso, a variável content é passada para que você inclua todo o conteúdo de qualquer página que use esse layout.

Mas essa não é a história completa do layout. Seu layout terá algumas seções que aparecerão em todas as páginas, como a barra de navegação e o rodapé. Vamos criar partials para cada uma dessas seções.

Como usar partials no Eleventy

Todos os partials são armazenados no diretório _includes. Para uma organização adequada, você pode armazená-los em uma pasta de componentes dentro do diretório _includes. Crie um arquivo navbar.njk e armazene o código abaixo para seus Partials de Navbar.

<div class="nav-container">
    <div class="logo">
        <a href="/">
            J.
        </a>
    </div>
    <div class="nav">
        <a href="/projects" class="link">
            Projects
        </a>
        <a href="https://docs.google.com/document/d/10ZosQ38Z3804KYPcb_aZp9bceoXK-q3GrkHjYshqIRE/edit?usp=sharing" class="cta-btn">Resume</a>
    </div>
</div>

A seguir, crie um arquivo footer.njk para os seus Partials de Rodapé:

<hr />
<div class="footer-container">
    <p>© 2023 Joel's Portfolio</p>
    <div class="social_icons">
        <a
            href="https://twitter.com/olawanle_joel"
            aria-label="Twitter"
            target="_blank"
            rel="noopener noreferrer"
        >
            <i class="fa-brands fa-twitter"></i>
        </a>
        <a
            href="https://github.com/olawanlejoel"
            aria-label="GitHub"
            target="_blank"
            rel="noopener noreferrer"
        >
            <i class="fa-brands fa-github"></i>
        </a>
        <a
            href="https://www.linkedin.com/in/olawanlejoel/"
            aria-label="LinkedIn"
            target="_blank"
            rel="noopener noreferrer"
        >
            <i class="fa-brands fa-linkedin"></i>
        </a>
    </div>
</div>

Adicione esses partials à sua página ou template de layout usando a declaração {% include %}. Veja como ficará o template layouts/base.njk quando você incluir os Partials de Navbar e Rodapé:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="icon" href="/assets/favicon.jpeg" />
        <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
            integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
            crossorigin="anonymous"
            referrerpolicy="no-referrer"
        />
        <link rel="stylesheet" href="/css/global.css" />
        <title>J.'s Portfolio</title>
    </head>
    <body>
        <div>
            {% include "components/navbar.njk" %}
                {{ content | safe }}
            {% include "components/footer.njk" %}
        </div>
    </body>
</html>

Quando você executar o comando npm start, esse layout não aparecerá porque não foi adicionado a um template de página. Crie um template de página e adicione esse layout.

Como criar templates de página no Eleventy

Na pasta src, crie um arquivo index.njk para servir como página inicial do site do seu portfólio. Essa página usará o layout básico:

---
layout: layouts/base.njk
title: Home
---
<h1> This is the {{title}} Page. </h1>

Quando você executar o comando npm start, seu site estático será carregado em http://localhost:8080/. Esta é a aparência da saída:

Como usar CSS e imagens no Eleventy

Você perceberá que no arquivo layouts/base.njk, um arquivo CSS é vinculado para estilizar a página do portfólio, mas quando o site é carregado, os estilos CSS não são afetados porque o arquivo CSS não foi adicionado à pasta_site.

Para fazer o CSS funcionar, configure no seu arquivo .eleventy.js usando o parâmetro eleventyConfig. Isso permite que o Eleventy saiba que o(s) arquivo(s) CSS existe(m) e também fique atento a possíveis alterações no arquivo CSS.

Na pasta src, você pode criar uma pasta css para armazenar todos os arquivos CSS que usará no seu projeto, mas, para este artigo, você pode usar um arquivo CSS – global.css. Você pode então configurar a pasta css para que ela configure todos os arquivos na pasta:

eleventyConfig.addPassthroughCopy('src/css');
eleventyConfig.addWatchTarget('src/css');

O mesmo vale para imagens. Se você adicionar alguma imagem na sua página, ela não aparecerá até que você configure a pasta onde suas imagens estão armazenadas. Crie uma pasta de assets para armazenar todas as suas imagens e configure essa pasta.

eleventyConfig.addPassthroughCopy('src/assets');

É assim que o seu arquivo de configuração ficará agora:

module.exports = function (eleventyConfig) {
    eleventyConfig.addPassthroughCopy('src/assets');
    eleventyConfig.addPassthroughCopy('src/css');
    eleventyConfig.addWatchTarget('src/css');

    return {
        dir: {
            input: 'src',
        },
    };
};

Quando você executar npm start, o estilo CSS funcionará e sua página inicial terá a seguinte aparência:

Criação de partials e adição à página inicial

Agora você conseguiu criar um layout e adicioná-lo à sua página inicial (index.njk). Vamos personalizar a página inicial para conter algumas informações sobre você, como mais informações sobre você, suas habilidades e informações de contato.

Você pode decidir adicionar seu código e marcações diretamente ao template index.njk, mas vamos criar partials individuais para as informações Hero, About, skills e contact.

Os partials do Hero

Esta é a primeira seção abaixo da barra de navegação, cujo objetivo principal é dar aos usuários uma ideia do que é o site.

<div class="hero-container">
    <img src='assets/profile.jpeg' class="profile-img" alt="Joe's personal headshot" />
    <div class="hero-text">
        <h1>Hey, I'm Joe 👋</h1>
        <p>
            I'm a software developer based in Lagos, Nigeria. I specialize in building (and occasionally designing) exceptional websites, applications, and everything in between.
        </p>
        <div class="social-icons">
            <a href="https://twitter.com/olawanle_joel">
                <i class="fa-brands fa-twitter"></i>
            </a>
            <a href="https://github.com/olawanlejoel">
                <i class="fa-brands fa-github"></i>
            </a>
            <a href="https://www.linkedin.com/in/olawanlejoel/">
                <i class="fa-brands fa-linkedin"></i>
            </a>
        </div>
    </div>
</div>

Alguns detalhes sobre você estão incluídos no código acima, juntamente com alguns ícones sociais para conectar links aos seus perfis de mídia social.

Os partials do Hero devem ter a seguinte aparência:

Você pode adicionar mais conteúdo à seção Hero, alterar os estilos no arquivo css/globals.css ou até mesmo criar sua própria versão dessa seção.

Os partials Sobre

A seção Sobre fornece às pessoas que visitam seu portfólio mais informações sobre você em quantos parágrafos você desejar. Ela pode ser uma página separada se você tiver mais informações para contar.

<div class="about-container">
    <h2>About Me</h2>
    <div class="flex-about">
        <div class="about-text">
            <p>
                As a developer, I have always been passionate about creating elegant and effective solutions to complex problems. I have a strong foundation in software development, with a focus on web technologies such as HTML, CSS, and JavaScript. I enjoy working on both the front-end and back-end of applications, and I am always looking for ways to optimize performance, improve user experience, and ensure the highest level of code quality.
            </p>
            <p>Throughout my career, I have worked on a wide range of projects, from simple static websites to complex enterprise-level applications. I am experienced in working with a variety of development tools and frameworks, including React, Angular, Vue.js, Node.js, and Laravel. I am always eager to learn and explore new technologies, and I am constantly seeking out opportunities to improve my skills and knowledge.</p>
        </div>
        <div class="about-img">
            <Image src='/assets/about.jpeg' class="profile-img" alt="Joe and animal relaxing and having fun" />
        </div>
    </div>
</div>

O código contém informações sobre você (uma imagem e algum texto). Esta é a aparência que a seção Sobre deve ter:

Os partials de Habilidades

Esta seção é usada para exibir as tecnologias que você usa ou adora usar.

<div class="skills-container">
    <h2>Skills</h2>
    <div class="grid-skills">
        <div class="skill-card html">
            <i class="fa-brands fa-html5 html-icon"></i>
            <p>HTML</p>
        </div>
        <div class="skill-card css">
            <i class="fa-brands fa-css3-alt css-icon"></i>
            <p>CSS</p>
        </div>
        <div class="skill-card js">
            <i class="fa-brands fa-js-square js-icon"></i>
            <p>JavaScript</p>
        </div>
        <div class="skill-card react">
            <i class="fa-brands fa-react react-icon"></i>
            <p>React</p>
        </div>
        <div class="skill-card node">
            <i class="fa-brands fa-node-js node-icon"></i>
            <p>Node</p>
        </div>
        <div class="skill-card python">
            <i class="fa-brands fa-python python-icon"></i>
            <p>Python</p>
        </div>
    </div>
</div>

O código acima cria um cartão para conter o ícone de tecnologia com fonte incrível e o nome de cada habilidade. Você também pode adicionar mais estilos e modificar o código para torná-lo mais atraente e distinto. É assim que a seção de habilidades deve ficar:

Os partials de Contato

Já que isso é um portfólio, você deveria adicionar uma forma dos possíveis clientes/empregadores entrarem em contato com você. Uma maneira seria adicionar um e-mail.

<div class="contact-container">
    <h2>Get In Touch</h2>
    <p>If you want us to work together, have any question or want me to speak at your event, my inbox is always open. Whether just want to say hi, I'll try my best to get back to you! Cheers!</p>
    <a href="mailto:[email protected]" class='cta-btn'>Say Hello</a>
</div>

Substitua o endereço de e-mail na tag a pelo seu próprio, de modo que o botão inicie um aplicativo de e-mail para que as pessoas enviem uma mensagem para você.

Você criou com êxito todos os partials para sua página inicial. Em seguida, você precisa incluí-los no arquivo index.njk para que possam ser exibidos na página inicial:

---
layout: layouts/base.njk
title: Home
---
{% include "components/hero.njk" %}
{% include "components/about.njk" %}
{% include "components/skills.njk" %}
{% include "components/contact.njk" %}

Quando você executar o comando npm start, sua página inicial exibirá todos os Partials adicionadas de acordo.

Como usar as coleções no Eleventy

Na Eleventy, as coleções são uma forma de agrupar conteúdo relacionado para que você possa gerar páginas com base nesse conteúdo. Por exemplo, se você tiver arquivos markdown de conteúdo semelhante (artigos de blog) armazenados em uma pasta de blog do seu projeto, poderá usar coleções para buscá-los e exibir uma lista de todo o conteúdo. Além disso, você pode criar um layout para lidar com como esses conteúdos são exibidos.

As coleções são definidas no arquivo de configuração .eleventy.js e podem incluir dados de várias fontes, como arquivos markdown ou JSON.

Para este site de portfólio, vamos criar um diretório de projetos no diretório src, para armazenar o conteúdo markdown de cada projeto. Esse conteúdo incluirá detalhes sobre o projeto, o problema resolvido, as tecnologias usadas, os desafios encontrados e as lições aprendidas.

Você pode criar um arquivo markdown com o nome do projeto (quotes-generator.md) e colar o código abaixo:

---
title: Quotes Generator
description: "Helps you generates quotes from about 1600 quotes written by different authors . Quotes are automatically copied to your clipboards."
gitHubURL: "https://github.com/olawanlejoel/random-quote-generator"
image: "/assets/quotes-banner.jpeg"
---

The quotes generator project is a software tool designed to display random inspirational or thought-provoking quotes to users. This project aims to solve the problem of lack of motivation or inspiration by providing users with a quick and easy way to access inspiring quotes.

### Technologies Used
The technologies used in this project include HTML, CSS, and JavaScript. The application utilizes an API to fetch random quotes and display them to the user.

### Challenges and Lessons Learned
One of the main challenges faced during this project was designing the user interface to be visually appealing and responsive on different devices. The team had to consider various design elements such as font sizes, colors, and layout to create a user-friendly and aesthetically pleasing interface.

Another challenge was handling errors and edge cases such as network connectivity issues or invalid API responses. The team had to implement error handling and fallback mechanisms to ensure that the application would continue to function smoothly under various conditions.

Throughout the project, the team learned valuable lessons about front-end development, such as the importance of clean and efficient code, effective debugging and troubleshooting, and responsive design principles. They also learned the importance of utilizing APIs to access and display data from external sources.

Overall, the quotes generator project was a valuable learning experience that allowed the team to develop their technical and creative skills, and create a useful tool for users looking for daily inspiration or motivation.

Observação: se você usou o template inicial, já deve tê-los, caso contrário, poderá copiá-los do diretório de projetos do nosso template inicial no GitHub.

O frontmatter no topo desses arquivos torna os valores disponíveis para serem injetados nos seus templates.

Como esses arquivos Markdown estão no diretório src, o Eleventy os tratará como templates e gerará uma página HTML para cada um deles. Seu URL será algo como /projects/quotes-generator.

No entanto, o Eleventy não saberá qual layout usar para essas páginas porque elas ainda não têm um valor de layout em seu frontmatter.

Primeiro, vamos montar o layout desse conteúdo. Depois, criaremos uma coleção e adicionaremos tudo em forma de lista numa página dedicada a projetos.

Como antes, crie um arquivo de layout (project.njk) na pasta de layouts. Para evitar repetições, como esse arquivo usará a marcação HTML padrão, você ajustará o layout base.njk criando um bloco para indicar a seção do seu layout que será alterada.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="icon" href="/assets/favicon.jpeg" />
        <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
            integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
            crossorigin="anonymous"
            referrerpolicy="no-referrer"
        />
        <link rel="stylesheet" href="/css/global.css" />
        <title>J.'s Portfolio</title>
    </head>
    <body>
        <div>
            {% include "components/navbar.njk" %}
                {% block content %} 
                    {{ content | safe }}
                {% endblock %}
            {% include "components/footer.njk" %}
        </div>
    </body>
</html>

O bloco recebe um nome de conteúdo porque você pode ter muitos blocos em seus templates. Agora você pode estender isso ao layout project.njk, de modo que só precisa especificar o bloco de conteúdo:

{% extends "layouts/base.njk" %}

{% block content %}
    <div class="project-layout">
        <h2>{{title}}</h2>
        <img src="{{image}}" alt="image" class="banner-img" />
        <a href="{{gitHubURL}}" class="cta-btn pt-btn">
            <div class="small-icons">
                GitHub <i class="fa-brands fa-github"></i>
            </div>
        </a>
        {{ content | safe }}
    </div>
{% endblock %}

No código acima, você está especificando como cada projeto será exibido. Você obterá o title, a image e o gitHubURL do frontmatter e, em seguida, adicionará outro conteúdo usando a variável de conteúdo ({{ content | safe }}).

O próximo passo seria adicionar o layout ao front matter de cada projeto:

---
layout: layouts/project.njk
title: Quotes Generator
description: "Helps you generates quotes from about 1600 quotes written by different authors . Quotes are automatically copied to your clipboards."
gitHubURL: "https://github.com/olawanlejoel/random-quote-generator"
image: "/assets/quotes-banner.jpeg"
---

…

Ao recarregar a URL de cada projeto, por exemplo, /projects/quotes-generator, você notará que ele agora usa o layout criado:

Como usar coleções em templates

Cada um dos seus projetos agora é exibido de forma agradável com o layout especificado, mas como as pessoas podem acessar esses projetos? Você precisa criar uma lista na qual as pessoas possam clicar para acessarem cada projeto. É aqui que entram as coleções.

Para usar coleções, defina isso no arquivo de configuração .eleventy.js usando o método addCollection().

module.exports = function (eleventyConfig) {
    // …

    eleventyConfig.addCollection('projects', (collection) => {
        return collection.getFilteredByGlob('src/projects/*.md');
    });

    return {
        // ...
    };
};

No código acima, o método addCollection() é usado para definir uma coleção chamada projects. A função de callback passada para addCollection() retorna todos os arquivos markdown no diretório de projetos usando o método getFilteredByGlob().

Após definir uma coleção, você pode usá-la em um template para gerar páginas com base nesse conteúdo. Vamos criar um template de página projects.njk, que usaria o layout base.njk:

---
layout: layouts/base.njk
title: Projects
---
<div class="projects-container">
    <h2>Projects</h2>
    <div class="projects-grid">
        {% for project in collections.projects %}
            <div class="project-card">
                <div class="project-header">
                    <i class="fa-regular fa-folder-open folder-icon"></i>
                    <div class="small-icons">
                        <a href={{project.data.gitHubURL}}><i class="fa-brands fa-github"></i></a>
                    </div>
                </div>
                <h3>{{project.data.title}}</h3>
                <p>{{project.data.description}}</p>
                <a href="{{project.url}}" class="cta-btn">Read more</a>
            </div>
        {% endfor %}
    </div>
</div>

No código acima, a declaração {% for %} é usada para percorrer todos os projetos na coleção e gerar um cartão de projeto para cada um.

Você terá acesso a todas as variáveis usando project.data.[key]. Por exemplo, o código acima exibirá o título, a descrição e a URL do GitHub do projeto. Você também pode acessar a URL do projeto usando project.url.

Quando você executa o comando npm start e navega até a página de projetos, esta é a aparência da página quando você adiciona muitos projetos:

Como usar shortcodes

Os shortcodes são uma forma de definir tags HTML personalizadas ou valores dinâmicos JavaScript que você pode reutilizar em seus templates. Por exemplo, você pode definir um shortcode para gerar o ano atual e adicioná-lo ao seu site.

No arquivo de configuração .eleventy.js, você pode definir um shortcode usando o método addShortcode(). Por exemplo, o código a seguir define um shortcode chamado year:

module.exports = function (eleventyConfig) {
    // ...
    eleventyConfig.addShortcode('year', () => {
        return `${new Date().getFullYear()}`;
    });
    return {
        // ...
    };
};

O shortcode year acima retornará o ano atual, que você pode adicionar a qualquer template do seu projeto. Por exemplo, em vez de codificar o ano no rodapé deste site, você pode adicioná-lo dinamicamente usando {% year %}, para que ele se atualize a cada ano:

<hr />
<div class="footer-container">
    <p>© {% year %} Joel's Portfolio</p>
    <div class="social_icons">
        // ...
    </div>
</div>

Quando a página for renderizada, a saída incluirá o ano atual na tag HTML p.

Como adicionar um tema a um site Eleventy

Adicionar um tema a um site Eleventy pode ser uma ótima maneira de personalizar a aparência do seu site rapidamente. Oficialmente, o Eleventy se refere aos temas como iniciantes (eles significam o mesmo). Muitos sites oferecem temas gratuitos do Eleventy, como os temas oficiais do Eleventy e os temas Jamstack.

Tudo o que você precisa fazer é selecionar seu tema ou starter favorito e, em seguida, acessar o repositório do GitHub para cloná-lo em seu computador local. Certifique-se de que você leia a documentação para saber as etapas de configuração e personalização dos projetos.

Execute npm install para instalar todos os pacotes usados e, em seguida, execute npm start para servir seu aplicativo localmente para http://localhost:8080/.

Como implantar um site Eleventy

Agora você conseguiu criar um site estático de portfólio estiloso com Eleventy. Ter esse tipo de site apenas na sua máquina local não é suficiente. Você vai querer hospedá-lo on-line para compartilhá-lo com seu público.

A Kinsta é uma plataforma de nuvem que permite hospedar sites estáticos, incluindo Eleventy. Isso pode ser feito enviando seu código para o seu provedor Git preferido (Bitbucket, GitHub ou GitLab) e, finalmente, implantando na Kinsta.

Antes de enviar seus arquivos para qualquer provedor Git, crie um arquivo .gitignore na raiz do seu projeto para especificar os arquivos e pastas que o Git deve ignorar ao enviar seu código:

# dependencies
/node_modules

# run
/_site

Envie seu site Eleventy para o GitHub

Para este guia, vamos usar o GitHub. Crie um repositório no GitHub, e então você pode usar comandos git para enviar seu código.

Inicialize seu repositório Git local abrindo seu terminal, navegando até o diretório que contém seu projeto e executando o seguinte comando:

git init

Agora adicione seu(s) código(s) ao repositório Git local usando o seguinte comando:

git add .

Você agora pode commitar suas mudanças usando o seguinte comando:

git commit -m "my first commit"

Nota: Substitua “my first commit” por uma mensagem breve descrevendo suas alterações.

Finalmente, envie seu código para o GitHub usando os seguintes comandos:

git remote add origin [repository URL]
git push -u origin master

Nota: Substitua [URL do repositório] pela URL do seu repositório no GitHub.

Se for bem-sucedido, você agora pode implantar na Kinsta!

Implantando seu site Eleventy na Kinsta

A implantação na Kinsta acontece em questão de segundos. Uma vez que seu repositório esteja pronto, siga essas etapas para implantar seu site estático na Kinsta:

1. Faça login ou crie uma conta para visualizar o painel do MyKinsta.
2. Autorize a Kinsta com seu provedor Git.
3. Clique em Sites Estáticos na barra lateral esquerda e depois clique em Adicionar site.
4. Selecione o repositório e o branch de onde deseja implantar.
5. Atribua um nome único ao seu site.
6. Adicione as configurações de build no seguinte formato:
   • Comando build: npm run build
   • Versão do Node: 18.16.0
   • Diretório de publicação: _site
7. Finalmente, clique em Criar site.

E é isso! Agora você tem um site implantado em questão de segundos. Um link é fornecido para acessar a versão implantada do seu site.

Como alternativa à Hospedagem de Site Estático, você pode optar por implantar seu site estático com a Hospedagem de Aplicativos da Kinsta, que oferece maior flexibilidade de hospedagem, uma gama mais ampla de benefícios e acesso a recursos mais robustos. Por exemplo, escalonamento, implantação personalizada usando um Dockerfile e análises abrangentes que incluem dados em tempo real e históricos.

Resumo

Neste artigo, você aprendeu como criar um site elegante com o Eleventy, como personalizar um site estático da Eleventy desde o início e como criar um bom site de portfólio.

Quer você esteja criando um blog pessoal, um site de portfólio ou uma loja on-line, o Eleventy pode ajudá-lo a atingir seus objetivos com o mínimo de esforço e o máximo de impacto.

Então, por que não experimentar hoje e hospedar na Kinsta de forma gratuita? Temos um template “Hello World” do Eleventy que você pode usar para começar ainda mais rápido.

Agora é a sua vez: o que você acha do Eleventy? Você já utilizou o Eleventy para criar alguma coisa? Fique à vontade para compartilhar seus projetos e experiências conosco na seção de comentários abaixo.