Come Creare un Sito Web Statico Originale con Eleventy (11ty)

Con l’avvento dei generatori di siti statici (SSG) come Eleventy, creare un sito web statico, originale ed efficiente non è mai stato così facile.

In questo articolo scopriremo come utilizzare Eleventy per creare un sito web statico e funzionale senza bisogno di un linguaggio lato server o di un database.

Impareremo anche a distribuire un sito web statico direttamente dal repository GitHub alla piattaforma di Hosting di Applicazioni di Kinsta, rendendo il vostro sito web attivo in tempi brevi su un dominio gratuito .kinsta.app.

Ecco una demo live del sito portfolio statico che realizzeremo con Eleventy.

È possibile accedere al repository GitHub di questo progetto se volete dare un’occhiata più da vicino.

Cos’è Eleventy?

Eleventy, noto anche come 11ty, è un generatore di siti statici che crea siti web basati su HTML, CSS e JavaScript senza bisogno di database e linguaggi di programmazione backend.

Eleventy è noto per la sua semplicità e flessibilità, in quanto non obbliga a usare un solo linguaggio o framework di template. Supporta più di 10 linguaggi di template e permette di utilizzarne quanti se ne vuole in un singolo progetto:

Eleventy, come la maggior parte dei SSG, permette di costruire i contenuti di un sito statico utilizzando componenti riutilizzabili invece di creare documenti HTML completi per ogni pagina.

Come installare Eleventy

Installare Eleventy è facile. Ecco come fare:

1. Assicuratevi di avere installato Node.js sul vostro computer. Potete effettuare una verifica eseguendo il comando node -v nel vostro terminale. Non è disponibile? Ecco come installare Node.js sul computer.
2. Create una nuova cartella per il vostro progetto.
3. Aprite il terminale ed eseguite il comando npm init -y nella directory del progetto per inizializzare un nuovo progetto Node.js, creando un file package.json con le impostazioni predefinite.
4. Eseguite il comando npm install @11ty/eleventy --save-dev per installare il pacchetto come dipendenza di sviluppo nel vostro progetto.
5. Ecco fatto! Ora potete eseguire Eleventy lanciando il comando npx @11ty/eleventy nella directory del vostro progetto. Questo genererà i file del vostro sito e li invierà alla directory _site (o alla directory da voi configurata) nella cartella del progetto.

Nota: quando eseguite il comando npx @11ty/eleventy otterrete questo risultato:

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

Qui vengono scritti 0 file perché non ci sono template nella cartella del progetto.

Comandi e configurazione di Eleventy

Ora avete creato il vostro progetto Eleventy, ma non è tutto. Dovete creare alcune configurazioni e conoscere alcuni comandi di base per il vostro sito statico che può essere servito al browser.

Comandi di Eleventy

Ecco alcuni dei principali comandi di Eleventy che dovreste conoscere:

• npx eleventy: Questo comando viene utilizzato per creare il sito e inviare il risultato alla cartella _site (o alla cartella che avete configurato come directory di output).
• npx @11ty/eleventy --serve: Questo comando avvia un server locale in modo che possiate vedere l’anteprima del sito nel browser. Quando apportate delle modifiche al sito, il progetto verrà automaticamente ricostruito e aggiornato nel browser.
• npx @11ty/eleventy --serve --port=8081: Questo comando avvia il server Eleventy e specifica una porta personalizzata su cui il server sarà in ascolto.
• npx @11ty/eleventy --watch: Questo comando controlla che i file del progetto non vengano modificati e ricostruisce automaticamente il sito quando necessario.

Non sarà necessario memorizzare questi comandi perché potrete aggiungerli ai comandi generali nell’oggetto scripts del file package.json:

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

Ora potete utilizzare npm start per servire la vostra applicazione al posto di npx @11ty/eleventy --serve, e potrete anche eseguire npm run build al posto di npx eleventy.

Come configurare un sito statico con Eleventy

Eleventy è “zero-config” per impostazione predefinita e dispone di opzioni di configurazione flessibili. Ecco alcune opzioni di configurazione chiave che dovreste conoscere:

• input: Questa opzione permette di specificare la directory dei file del progetto. È consigliabile utilizzare src.
• output: Questa opzione permette di specificare la cartella in cui il sito costruito deve essere inviato. Per impostazione predefinita, Eleventy invia l’output alla cartella _site. (Molti sviluppatori usano public).
• templateFormats: Questa opzione permette di specificare quali estensioni di file devono essere elaborate come template. Per impostazione predefinita, Eleventy elabora i file .html, .njk e .md come template.

Questi sono solo alcuni dei comandi e delle opzioni di configurazione disponibili in Eleventy. Per configurare il vostro progetto Eleventy, create un file .eleventy.js nella root del progetto. Quindi incollate questo codice nel file per dare al progetto una struttura che includa le directory di input e output:

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

Nota: eleventyConfig viene passato come argomento per fornire ulteriori opzioni di configurazione che verranno utilizzate in seguito in questo progetto.

Come visualizzare l’anteprima di un sito Eleventy

Ora conoscete alcuni comandi chiave che possono essere utilizzati per visualizzare l’anteprima del vostro sito web statico Eleventy, ma quando eseguite il comando, ad esempio npx @11ty/eleventy, non viene servito nulla. Questo perché non è presente alcun file di template.

Potete creare una cartella src nella cartella principale del progetto, quindi creare alcuni file template come index.html o utilizzare il linguaggio template che preferite per rappresentare la home page:

<!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 ora eseguite il comando npx @11ty/eleventy, verrà creata una cartella pubblica con il file statico generato. Sicuramente vorrete che questo file venga inviato al vostro browser e che venga abilitata la funzione di ricarica a caldo. Questo è possibile eseguendo il seguente comando:

npx @11ty/eleventy --serve

Questo servirà il sito su http://localhost:8080/.

Questi comandi sono piuttosto difficili da memorizzare e da utilizzare sempre. Li avete già aggiunti alla sintassi familiare nel file package.json, quindi potrete usare npm start per servire l’applicazione su http://localhost:8080/.

Come creare un sito web statico di portfolio con Eleventy

Ora sapete come creare un sito statico con Eleventy. Creiamo il progetto del portfolio.

È possibile creare un nuovo progetto Eleventy da zero, ma magari preferite avere già delle immagini, CSS e contenuti pronti per il progetto, quindi abbiamo creato un template di repository GitHub per aiutarvi a velocizzare le cose. In GitHub, selezionate Use this template > Create a new repository per copiare queste risorse e i file di configurazione iniziali in un nuovo repository, quindi scaricateli sul vostro computer locale.

Il progetto avrà la seguente struttura:

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

Come usare i template in Eleventy

Quando si usa Eleventy, ci sono tre tipi principali di template che dovete conoscere. Questi template possono essere creati con Nunjucks, che permette di definire variabili, cicli, condizionali e altre logiche che possono essere utilizzate per generare dinamicamente il contenuto della pagina.

• Template di pagina: Definiscono la struttura e il contenuto delle singole pagine del sito web.
• Template di layout: Definiscono la struttura e il design generale delle pagine del sito web. Di solito includono elementi comuni come header, footer, menu di navigazione e barre laterali, che vengono condivisi tra più pagine.
• Template parziali: Definiscono piccole sezioni riutilizzabili del markup HTML del sito web. In genere vengono utilizzati per definire elementi comuni come header, footer, menu di navigazione e barre laterali, che possono essere inclusi nei template di layout e di pagina.

Ora che abbiamo compreso ciascuno di questi tipi di template, è il momento di creare i template per il sito web statico di un portfolio.

Come creare i layout in Eleventy

All’interno della cartella src, create una cartella _includes. Questa conterrà tutti i layout e i partial.

Potete poi creare una cartella layouts (per una corretta organizzazione) per contenere tutti i vostri layout. Questi layout sono dei template e possono utilizzare il linguaggio di template che preferite, come Nunjucks, che utilizziamo qui.

Creiamo un file base.njk per contenere il layout generale di tutte le pagine.

<!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>

Nel codice qui sopra, viene creato un markup HTML generale e Font Awesome viene incluso da un CDN in modo che possiate avere accesso alle sue icone. Inoltre, viene passata la variabile content in modo da includere tutti i contenuti delle pagine che utilizzano questo layout.

Ma questo non è l’intero layout. Il vostro layout avrà alcune sezioni che appariranno in ogni pagina, come la navbar e il foot. Creiamo dei partial per ciascuna di queste sezioni.

Come usare i partial in Eleventy

Tutti i partial sono memorizzati nella cartella _includes. Per una corretta organizzazione, potete memorizzarli in una cartella. In questo caso, create una cartella components all’interno della cartella _includes e create i template navbar e footer.

Ecco i partial della navbar in navbar.njk:

<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>

Ecco i template parziali del foot in footer.njk:

<hr />
<div class="footer-container">
    <p>© {% year %} 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>

Aggiungete questi partial alla vostra pagina o al template di layout. Questo può essere fatto utilizzando l’istruzione {% include %}. Ecco come apparirà il template layouts/base.njk quando includerete i template navbar e footer:

<!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 eseguite il comando npm start, questo layout non apparirà perché non è stato aggiunto a un template di pagina. Create un template di pagina e aggiungete questo layout.

Come creare template di pagina in Eleventy

Nella cartella src, create un file index.njk che servirà come pagina iniziale del vostro sito web portfolio. Questa pagina utilizzerà il layout di base:

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

Quando eseguirete il comando npm start, il vostro sito statico verrà caricato su http://localhost:8080/. Ecco come apparirà l’output:

Come usare i CSS e le immagini in Eleventy

Ora conoscete i vari template esistenti, come funzionano e come possono essere utilizzati insieme. Tuttavia, noterete che nel file layouts/base.njk è collegato un file CSS per lo stile della pagina del portfolio, ma quando il sito viene caricato, gli stili CSS non vengono modificati perché il file CSS non viene aggiunto alla cartella public.

Per risolvere questo problema, dovrete configurare il file .eleventy.js utilizzando il parametro eleventyConfig. In questo modo Eleventy saprà che il/i file CSS esistono e terrà d’occhio le eventuali modifiche al file CSS.

Nella cartella src, potrete creare una cartella css per memorizzare tutti i file CSS che utilizzerete nel progetto, ma per questo articolo userete un solo file CSS: global.css. Potrete quindi configurare la cartella css in modo che configuri tutti i file all’interno della cartella:

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

Lo stesso vale per le immagini. Se aggiungete un’immagine alla vostra pagina, noterete che non viene visualizzata. Affinché vengano visualizzate, dovrete configurare la cartella in cui sono archiviate le immagini. Creiamo una cartella assets per memorizzare tutte le nostre immagini e configuriamo la cartella assets.

eleventyConfig.addPassthroughCopy('src/assets');

Ecco come apparirà il vostro file di configurazione:

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

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

Quando eseguite npm start, lo stile CSS funzionerà e la vostra home page avrà questo aspetto:

Creare i partial e aggiungerli alla home page

Siete riusciti a creare un layout e ad aggiungerlo alla vostra pagina iniziale (index.njk). È il momento di personalizzare la pagina iniziale per inserire alcune informazioni, come ad esempio ulteriori informazioni su di voi, le vostre competenze e le informazioni di contatto.

Potete decidere di aggiungere i codici e il markup direttamente al template index.njk, ma creiamo dei partial individuali per le informazioni su Home, About, competenze e contatti.

I partial dell’Hero

Questa è la prima sezione al di sotto della barra di navigazione, il cui scopo principale è quello di dare agli utenti un’idea dell’argomento del sito web.

<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>

Nel codice qui sopra sono inclusi alcuni dettagli su di voi e alcune icone social per collegare i link ai vostri profili sui social media.

I partial dell’Hero dovrebbero avere questo aspetto:

Potete aggiungere altri contenuti alla sezione Hero, modificare gli stili nel file css/globals.css o creare una vostra versione di questa sezione.

La sezione About

La sezione About fornisce alle persone che visitano il portfolio ulteriori informazioni su di voi in un numero di paragrafi a piacere. Può essere una pagina separata se avete diverse informazioni da raccontare.

<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>

Il codice contiene informazioni su di voi (un’immagine e del testo). Ecco come dovrebbe apparire la sezione About:

I partial delle Competenze

Questa sezione è utilizzata per mostrare le tecnologie che utilizzate o che preferite utilizzare.

<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>

Il codice qui sopra crea una scheda che contiene l’icona della tecnologia e il nome di ogni abilità. Potete anche aggiungere altri stili e modificare il codice per renderlo più accattivante e distinto. Ecco come dovrebbe apparire la sezione delle competenze:

Partial dei Contatti

Trattandosi di un portfolio, dovreste aggiungere un mezzo per consentire ai potenziali clienti di contattarvi, per esempio inviandovi un’email.

<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>

Sostituite l’indirizzo e-mail nel tag a con il vostro, in modo che il pulsante lanci un’applicazione di posta elettronica che permetta alle persone di inviarvi un messaggio.

Ora avete creato con successo tutti i partial per la vostra home page. Adesso è il momento di includerli nel file index.njk in modo che vengano visualizzati nella home page:

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

Quando eseguirete il comando start, la vostra home page visualizzerà di conseguenza tutti i partial aggiunti.

Come usare le raccolte in Eleventy

In Eleventy, le raccolte, o collection, sono un modo per raggruppare contenuti correlati in modo da poter generare pagine basate su tali contenuti. Ad esempio, se avete dei file markdown con contenuti simili (articoli di un blog) archiviati in una cartella blog del vostro progetto, potete usare le raccolte per recuperarli e visualizzare un elenco di tutti i contenuti. Inoltre, potrete creare un layout per gestire la visualizzazione di questi contenuti.

Le raccolte sono definite nel file di configurazione .eleventy.js e possono includere dati provenienti da varie fonti, come file markdown o JSON.

Per questo sito web di portfolio, creiamo una cartella projects nella cartella src, per memorizzare il contenuto markdown di ogni progetto. Questo contenuto includerà i dettagli del progetto, il problema risolto, le tecnologie utilizzate, le sfide incontrate e le lezioni apprese.

Potete creare un file markdown con il nome del progetto (quotes-generator.md) e incollare il codice qui sotto:

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

Nota: se avete usato il template di partenza, dovreste averli già, altrimenti potete copiarli dalla directory projects del nostro template di partenza su GitHub.

Il frontmatter all’inizio di questi file, come i template, rende disponibili dei valori da inserire nei vostri template.

Poiché questi file Markdown si trovano nella cartella src, Eleventy li tratterà come template e genererà una pagina HTML per ciascuno di essi. Il loro URL sarà qualcosa come /projects/quotes-generator.

Eleventy, tuttavia, non saprà quale layout utilizzare per queste pagine perché non hanno ancora un valore di layout nel loro frontmatter.

Creiamo innanzitutto un layout per questi contenuti prima di creare una raccolta e aggiungerli come elenco a una pagina dedicata ai progetti.

Come in precedenza, create un file di layout (project.njk) nella cartella layouts. Per evitare ripetizioni, dato che questo file utilizzerà il markup HTML predefinito, modificate il layout base.njk creando un blocco per indicare la sezione del layout da modificare.

<!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>

Al blocco viene dato un nome contenuto perché potete avere molti blocchi all’interno dei vostri template. Ora potete estendere questa procedura al vostro layout project.njk, in modo da dover specificare solo il blocco content:

{% 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 %}

Nel codice qui sopra, state specificando come verrà visualizzato ogni progetto. Il codice prende il titolo, l’immagine e gitHubURL dal frontmatter e poi aggiunge altri contenuti utilizzando la variabile content ({{ content | safe }}).

Il passo successivo sarà quello di aggiungere una chiave e un valore di layout al frontmatter di ogni progetto:

---
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"
---

…

Quando ricaricate l’URL di ogni progetto, ad esempio /projects/quotes-generator, noterete che ora utilizza il layout creato:

Come usare le raccolte nei template

Ciascuno dei vostri progetti viene ora visualizzato con il layout specificato, ma come possono gli utenti accedere a questi progetti? Sarà necessario creare un elenco su cui le persone possano cliccare per accedere a ciascun progetto. È qui che entrano in gioco le collection.

Per utilizzare le collection, dovete definirle nel file di configurazione .eleventy.js utilizzando il metodo addCollection().

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

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

    return {
        // ...
    };
};

Nel codice qui sopra, il metodo addCollection() viene utilizzato per definire una collection chiamata progetti. La funzione di callback passata a addCollection() restituisce tutti i file markdown presenti nella cartella projects utilizzando il metodo getFilteredByGlob().

Una volta definita una raccolta, potete usarla in un template per generare pagine basate su quei contenuti. Creiamo un template di pagina projects.njk, che utilizzerà il layout base.njk, ma il suo contenuto sarà costituito dai progetti della collection projects:

---
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>

Nel codice qui sopra, l’istruzione {% for %} viene utilizzata per scorrere tutti i progetti della raccolta progetti e generare una scheda progetto per ognuno di essi.

Potrete accedere a tutte le variabili utilizzando project.data.[key]. Ad esempio, il codice qui sopra mostrerà il titolo, la descrizione e l’URL GitHub del progetto. Potete anche accedere all’URL del progetto utilizzando project.url.

Ecco come apparirà la pagina quando aggiungerete molti progetti nel momento in cui eseguirete il comando start e navigherete nella pagina dei progetti:

Come usare gli shortcode

Gli shortcode sono un modo per definire tag HTML personalizzati o valori dinamici JavaScript che potete riutilizzare nei template. Ad esempio, potete definire uno shortcode per generare l’anno corrente e aggiungerlo al sito web.

Nel file di configurazione .eleventy.js, potrete definire uno shortcode utilizzando il metodo addShortcode(). Ad esempio, il codice seguente definisce uno shortcode chiamato anno:

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

Lo shortcode anno restituirà l’anno corrente, che potrete aggiungere a qualsiasi template del progetto. Ad esempio, invece di inserire l’anno nel foot di questo sito web, potete aggiungerlo dinamicamente utilizzando il metodo {% year %}, in modo che si aggiorni da solo ogni anno:

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

Quando la pagina viene renderizzata, l’output includerà l’anno corrente all’interno del tag HTML p.

Come aggiungere un tema a un sito Eleventy

Aggiungere un tema a un sito Eleventy può essere un ottimo modo per personalizzare rapidamente l’aspetto del sito. Ufficialmente, Eleventy si riferisce ai temi come a degli starter, ma è chiaro che si tratta della stessa cosa. Molti siti web forniscono temi Eleventy gratuiti, come gli starter ufficiali di Eleventy e i temi di Jamstack.

Tutto ciò che dovete fare è selezionare il tema o lo starter che preferite, quindi accedere al suo repository GitHub per clonarlo nel vostro computer locale. Assicuratevi di leggere la documentazione per conoscere i passi da seguire per configurare e personalizzare i progetti.

Eseguite npm install per installare tutti i pacchetti utilizzati e poi eseguite npm start per servire la vostra applicazione in locale a http://localhost:8080/.

Come distribuire un sito Eleventy

Siete riusciti a creare un sito web statico di portfolio originale ed elegante con Eleventy. Avere questo tipo di sito web sul vostro computer locale, però, non è sufficiente. Sarà necessario ospitarlo online per condividerlo con chiunque.

Kinsta è una piattaforma cloud che vi permette di ospitare siti web statici, tra cui Eleventy. Questo può essere fatto effettuando il push dei vostri codici su GitHub e infine distribuendoli su Kinsta.

Effttuare il push di un sito Eleventy su GitHub

Per prima cosa, create un repository su GitHub; in questo modo avrete accesso all’URL del repository. Poi potrete utilizzare i comandi git per eseguire il push dei codici.

Prima di inviare i file a GitHub, è meglio creare un file .gitignore per specificare alcuni file e cartelle che git deve ignorare quando invia i codici. Create un file .gitignore nella cartella principale e aggiungete quanto segue:

# dependencies
/node_modules

# run
/public

Ora potete inizializzare il vostro repository Git locale aprendo il terminale, navigando nella directory che contiene il progetto ed eseguendo il seguente comando:

git init

Ora aggiungete il codice al repository Git locale utilizzando il seguente comando:

git add

Ora potrete effettuare il commit delle modifiche utilizzando il seguente comando:

git commit -m "my first commit"

Nota: è possibile sostituire “my first commit” con un breve messaggio che descriva le vostre modifiche.

Infine, inviate il codice a GitHub utilizzando i seguenti comandi:

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

Nota: assicuratevi di sostituire “[URL del repository]” con l’URL del vostro repository GitHub.

Una volta completati questi passaggi, il vostro codice verrà inviato a GitHub e sarà accessibile attraverso l’URL del tuo repository.

Ora potete effettuare il deploy su Kinsta!

Distribuzione del sito Eleventy su Kinsta

Il deploy su Kinsta avviene in pochi minuti. Iniziate dal cruscotto My Kinsta per accedere o creare il vostro account. Successivamente, autorizzerete Kinsta su GitHub.

Cliccate quindi su Applicazioni nella barra laterale di sinistra, poi su Aggiungi servizio e infine su Applicazione dal menu a tendina:

Apparirà una finestra attraverso la quale potrete selezionare il repository che desiderate distribuire. Selezionate il branch che desiderate distribuire se ci sono più branch nel repository.

Potete quindi assegnare un nome a questa applicazione. Selezionate un data center tra quelli disponibili su 25 e poi Kinsta rileverà automaticamente il comando di avvio.

La vostra applicazione inizierà ad essere distribuita. In pochi minuti, verrà fornito un link per accedere alla versione distribuita del vostro sito web. In questo caso, si tratta di https://ty-portfolio-lvjy7.kinsta.app/.

Riepilogo

In questo articolo abbiamo imparato come creare un sito web elegante con Eleventy, come personalizzare un sito statico Eleventy dalle fondamenta e come costruire un bel sito portfolio.

Che stiate realizzando un blog personale, un sito di portfolio o un negozio online, Eleventy può aiutarvi a raggiungere i vostri obiettivi con il minimo sforzo e il massimo risultato.

Allora perché non provarlo oggi stesso e distribuirlo gratuitamente su Kinsta? Abbiamo un template Eleventy “Hello World” da utilizzare per iniziare a creare ancora più rapidamente.

Ora tocca a voi: cosa ne pensate di Eleventy? Avete mai utilizzato Eleventy per costruire qualcosa? Sentitevi liberi di condividere con noi i vostri progetti e la vostra esperienza nella sezione commenti qui sotto.

Joel Olawanle Kinsta

Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 200 technical articles majorly around JavaScript and it's frameworks.

• Sito Web
• LinkedIn
• Twitter
• YouTube