Un tuffo nel generatore di siti statici Eleventy

Ma prima, esaminiamo rapidamente cosa si intende per "sito statico" e quindi cosa fornisce un generatore. Un sito statico è composto da contenuto statico, ad esempio HTML, CSS, risorse e tutti i contenuti sono già compilati insieme prima di essere inviati all'host di un sito Web. Questo è diverso da un sito dinamico che compila queste cose dall'esecuzione di query a un database in fase di esecuzione (come WordPress) o che estrae contenuto dalle API lato client (come i framework JavaScript senza rendering lato server).

Un generatore di siti statici è un ambiente e un processore di build per compilare i tuoi contenuti in HTML statico. Di solito offrono aiutanti per fornire flessibilità nella scrittura dei tuoi contenuti (come il supporto di Markdown) e includono metodi per la creazione di modelli. Quindi, invece di scrivere le pagine HTML una per una e dover copiare e incollare le parti ripetute, un generatore supporterà la suddivisione di queste cose in componenti tramite un determinato linguaggio di modelli. Quindi il processo di creazione del generatore riunirà tutto e produrrà l'HTML finale che può essere caricato su un host web per essere servito come tuo sito web. A seconda dell'host web che utilizzi, questo processo di compilazione può essere eseguito anche dall'host.

Sono disponibili molti generatori di siti statici. Potresti aver sentito parlare o addirittura usato quelli come Jekyll, Hugo, Gatsby, Next e Nuxt. Un elenco completo è fornito da Jamstack.org.

Cosa rende Eleventy diverso dagli altri generatori di siti statici?

Eleventy è eccezionalmente veloce sia durante le build che nel browser. Ciò è in gran parte dovuto al fatto che non è necessario il caricamento di un bundle JavaScript lato client per servire il contenuto (rispetto a qualcosa come Gatsby). Il rendering lato server non è nemmeno un problema qui, dal momento che la creazione della pagina del filesystem è impostata su HTML statico.

Ciò che rende davvero unico Eleventy è la possibilità di selezionare e mescolare fino a dieci diversi linguaggi di template:

Le lingue che si mescolano possono verificarsi nello stesso file o tra layout. Ad esempio, scrivo spesso il mio contenuto principale con Markdown che alimenta un layout Nunjucks. In alcuni progetti, ho trovato utile essere in grado di eseguire il ciclo di alcuni dati utilizzando Nunjucks nel file Markdown. Questa capacità di combinare le lingue è molto potente e ti consente di progettare un flusso di lavoro di scrittura e creazione che funziona meglio per te e il tuo progetto.

Eleventy include un flag --serve che utilizza BrowserSync per abilitare la pubblicazione del sito localmente e con il ricaricamento a caldo in caso di modifiche ai file. Questa è una grande comodità ed è bene tenere a mente se non stai cercando un generatore di siti statici ma forse un aggiornamento da strumenti di compilazione come Gulp.

Come parte della configurazione zero, tutti i file del tuo sito potrebbero risiedere nella radice del tuo progetto. Per modificare le directory di input e output, puoi creare una configurazione Eleventy, che dovrebbe essere un file root chiamato .eleventy.js . Ecco un breve frammento che mostra come apportare questa modifica:

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

Come notato in precedenza, il comportamento predefinito è la creazione della pagina del filesystem, che è generalmente di grande vantaggio, specialmente per iniziare rapidamente. Questo è facilmente sovrascrivibile assegnando un permalink personalizzato e ciò può essere fatto per file, per un'intera directory o dinamicamente per un insieme di dati. I permalink offrono anche un altro superpotere che esploreremo tra poco!

In modo univoco, durante la compilazione, puoi preparare contenuto, dati e trasformazioni su tale contenuto e dati utilizzando JavaScript e sfruttando filtri e shortcode (ne parleremo più avanti). Anche in questo caso, tutto ciò avviene senza aggiungere un bundle JavaScript lato client, consentendo comunque l'uso di JavaScript come linguaggio di creazione di modelli.

Nota importante : puoi utilizzare con successo Eleventy senza o con poca conoscenza di JavaScript.

A differenza di altri SSG come Gatsby o ambienti come WordPress, la maggior parte dei siti Eleventy non richiede alcun plug-in. Sono disponibili alcuni plugin, ma non sono necessari per le funzionalità essenziali.

Quando crei con Eleventy, puoi aggiungere funzionalità quando ne hai bisogno. In effetti, potresti semplicemente usare HTML e non lavorare mai con nessuno degli altri linguaggi di creazione di modelli. Eleventy è solo tanto complesso quanto il tuo progetto richiede!

Comprendere i concetti essenziali di Eleventy

Esaminiamo alcuni bit di terminologia e concetti che ti aiuteranno ad avere successo nella creazione dei tuoi progetti Eleventy.

Layout e modelli

Potresti pensare a questi termini come intercambiabili, ma nel contesto di Eleventy hanno significati contestuali:

• Modello è il termine generico per tutti i file di contenuto.
• I layout sono modelli speciali che avvolgono altri contenuti.

Ad esempio, il modello si riferisce a tutti i tuoi file Markdown, mentre un layout potrebbe essere un file Nunjucks che contiene il boilerplate HTML5 e uno slot per il contenuto del modello. Impareremo come farlo funzionare nella sezione su come iniziare.

Filtri e codici brevi

Questi sono modi aggiuntivi per modificare l'output del contenuto e creare parti di modelli riutilizzabili. Sono disponibili per l'uso con modelli Nunjucks, Liquid, Handlebars e JavaScript. I filtri e gli shortcode sono definiti all'interno di .eleventy.js .

Oltre alle variabili e agli operatori disponibili nella lingua di creazione dei modelli preferita, Eleventy ha unificato il concetto di filtri tra le lingue elencate in precedenza. I filtri trasformano il contenuto in un modo specifico per il tipo di contenuto. Ad esempio, puoi creare un filtro destinato alle stringhe in maiuscolo. Oppure potresti avere un filtro destinato a essere utilizzato sugli array per alterare ciò che viene restituito, come selezionare un elemento casuale. Alcuni filtri sono forniti da Eleventy, alcuni dei quali li useremo nel tutorial introduttivo.

Gli shortcode consentono di creare parti di modelli riutilizzabili e sono in grado di accettare argomenti. Possono essere standalone o accoppiati, il che significa che racchiudono il contenuto con un tag di inizio e fine.

Uno dei miei shortcode preferiti è quello di rendere l'anno in corso, il che significa non più anni di copyright scaduti nel tuo piè di pagina! Ecco come creare uno shortcode year :

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

Per utilizzarlo in un modello Nunjucks o Liquid si presenta così: {% year %} .

Puoi esaminare i documenti di Eleventy per esempi di codici brevi accoppiati.

Collezioni

Le raccolte sono gruppi di contenuti correlati e in genere vengono create all'interno di frontmatter definendo tags . Le opzioni di sintassi dei tag includono stringhe singole, array a riga singola — ["tagA", "tagB"] — per multipli o elenchi in stile YAML per assegnare più tag. Ad esempio, posso creare una raccolta di "pagine" aggiungendo il seguente argomento principale a tutti i contenuti che voglio includere in quella raccolta:

 --- tags: pages ---

Dopo aver definito una raccolta, è possibile accedervi tramite la lingua di creazione dei modelli scelta all'interno dell'oggetto collections globali. Per accedere alla nostra raccolta di "pagine" sembrerebbe collections.pages . Questo restituisce un array di dati di quella raccolta, quindi puoi eseguire operazioni di array come scorrere su di esso per produrre un elenco di collegamenti o schede teaser di articoli. Puoi anche sopprimere il normale output di file e utilizzare solo le raccolte per gestire la visualizzazione dei dati, il che è utile per gestire il contenuto del sito a pagina singola.

Dati personalizzati

Finora abbiamo parlato della creazione di contenuti come file, ma Eleventy semplifica anche la gestione di diverse origini dati. Questo è chiamato "dati personalizzati" e vive come esportazioni di moduli JavaScript o file JSON nella directory _data .

I dati personalizzati possono essere utilizzati per:

• Definisci un array JSON di base.
• Restituisce i risultati di un'operazione di recupero.
• Recupera e riformatta il contenuto da un CMS headless.

Eleventy rende tutti i dati all'interno di _data disponibili sotto una variabile che corrisponde al nome del file. Ad esempio, se creo posts.json , posso accedervi nei miei modelli come posts . Usando Nunjucks, ecco un esempio di loop sui dati dei posts :

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

Impaginazione e creazione di pagine dai dati

In undici termini, l'impaginazione si riferisce all'iterazione su un set di dati e alla definizione di un modello per l'output di quel "pezzo" di dati. Questo viene fatto con un file dedicato che definisce l'impaginazione all'interno di frontmatter. Il file include anche l'impostazione dell'output previsto per i dati, il che significa che diventa anche il proprio modello. Possiamo definire un layout a cui inviare il contenuto e anche aggiungere tag per creare una raccolta per facilità di riferimento e flessibilità per l'output.

Nota : se utilizzi dati personalizzati per recuperare contenuto da un CMS, l'impaginazione è il metodo Eleventy che stai cercando per trasformare i dati in pagine in modo dinamico.

Ecco un esempio di riferimento ai dati personalizzati dei nostri posts che supponiamo stiamo recuperando tramite un recupero da un CMS senza testa. È importante sottolineare che la size è impostata su 1, il che significa che ogni "pezzo di paginazione" dovrebbe produrre una singola pagina di output. Quindi utilizziamo l' alias per creare un riferimento all'elemento corrente nel ciclo di impaginazione, quindi utilizziamo quel riferimento nella definizione del permalink e nel corpo del modello.

Il file che definisce l'impaginazione può risiedere dove vuoi all'interno della tua directory di input. La mia preferenza organizzativa è quella di creare una directory di generate , quindi denominarla come la raccolta che creerà. Considera quanto segue 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 }}

In questo caso, il permalink sta assegnando la pagina da stampare direttamente fuori dalla radice del sito. Puoi cambiarlo per aggiungere un prefisso come /posts/{{ post.title | slug }} /posts/{{ post.title | slug }} , per esempio.

Inoltre, se desideri che tutte le pagine generate siano disponibili nella raccolta creata dai tag, devi impostare addAllPagesToCollections su true per includere più del primo elemento.

Infine, se il tuo contenuto arriva come Markdown invece di HTML precompilato, dovrai utilizzare templateEngineOverride . Nel frammento di esempio, l'ho impostato su njk, md il che significa che il contenuto del modello dovrà essere elaborato sia come Nunjucks per convertire la variabile, sia quindi Markdown per compilare il contenuto restituito nella variabile.

Se ti stai chiedendo cosa significhi safe , lo impareremo dopo!

Come iniziare con Eleventy

Bene, quindi sei pronto per iniziare il tuo primo progetto Eleventy! Questo breve tutorial ti aiuterà a creare una struttura di partenza da cui continuare a costruire. Useremo i concetti che abbiamo già appreso e aggiungeremo anche alcune nuove idee.

La prima nota importante qui è che Eleventy è un pacchetto con ambito, quindi ecco il comando di installazione:

 npm install @11ty/eleventy

Successivamente, una comoda comodità che mi piace fare è aggiungere i seguenti script nel mio package.json :

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

Come accennato in precedenza, il flag --serve abiliterà un server locale tramite BrowserSync.

La mia preferenza è aggiornare le directory di input/output come abbiamo già visto, quindi ora è il momento di creare del contenuto all'interno di src o della directory di input di tua scelta.

Per preparare il nostro progetto in modo che sia più flessibile e scalabile dall'inizio, suggerirei di creare almeno un layout che contenga il boilerplate HTML5. I layout devono essere definiti all'interno di un _includes chiamato direttamente, che è una delle poche directory previste.

Una convenzione che troverai spesso tra i principianti è chiamare questa base di layout . Ho una preferenza per renderlo un file Nunjucks.

Ecco un esempio 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>

Le doppie parentesi graffe sono la sintassi di Nunjucks per le variabili. Qui, ci siamo preparati per una variabile del title in arrivo che verrà fornita a breve tramite argomento introduttivo. La variabile di content è fornita da Eleventy e contrassegna lo slot in cui dovrebbero andare tutti i contenuti non in entrata. È importante sottolineare che questo viene utilizzato insieme al filtro safe fornito che impedisce l'escape dell'HTML compilato rispetto al rendering.

Ora è il momento di creare il nostro indice del sito, che aggiungeremo come index.md :

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

Si noti che nella prima parte abbiamo aggiunto il nostro titolo e definito anche il layout.

A questo punto, possiamo eseguire il nostro progetto con lo script che abbiamo aggiunto: npm start . Ciò attiverà BrowserSync per configurare localhost:8080 (se disponibile) ma dovrai aprirlo manualmente nel browser. Dai un'occhiata a questo suggerimento rapido se desideri che apra il browser automaticamente.

L'ultimo passaggio critico è aggiungere un foglio di stile. Attualmente, CSS non è riconosciuto come un tipo di file incluso automaticamente, quindi avremo un passaggio di configurazione aggiuntivo dopo aver creato il nostro foglio di stile.

Puoi aggiungere un file CSS dove vuoi nella tua directory di input, come css/style.css . Quindi, apri .eleventy.js (o crealo nella radice del progetto se non hai eseguito la personalizzazione di input/output) e aggiungi quanto segue:

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

Innanzitutto, aggiungiamo la directory css come "copia passthrough", il che significa che Eleventy dovrebbe includerla nel push alla directory di output. Quindi lo aggiungiamo anche come "obiettivo di controllo" in modo che mentre apportiamo modifiche ai nostri stili durante l'esecuzione del nostro comando di start , Eleventy attiverà una ricostruzione per aggiornare il nostro sito locale.

Infine, dobbiamo ricordarci di aggiungere il collegamento al nostro foglio di stile all'interno del nostro layout di base :

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

Quando definiamo la posizione del foglio di stile, lo passiamo attraverso il filtro url di Eleventy che regolerà il percorso del file relativo secondo necessità durante la compilazione.

Successivamente, creiamo un tipo di post "pagine" da esplorare utilizzando un po' di più raccolte e layout. Per fare ciò, aggiungi la directory delle pages e crea uno o due file Markdown, incluso un title in primo piano ma non un layout.

Questa volta utilizzeremo un metodo leggermente diverso per definire il layout: un file di directory di dati . Questo file è generalmente formattato come JSON e ci consente di aggiungere dati che dovrebbero essere applicati a tutti i file all'interno di una directory, evitando di doverli duplicare tra i file. Il file deve avere lo stesso nome della directory per cui verrà utilizzato, quindi crea il file pages.json e aggiungi il seguente contenuto:

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

Siamo anche andati avanti e abbiamo definito i tag per creare la raccolta di "pagine". Ma il layout che abbiamo definito in realtà non esiste ancora, quindi crea _includes/page.njk e aggiungi quanto segue:

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

Qui stiamo usando il concetto Eleventy di concatenamento del layout per poter riutilizzare il nostro modello di base ma anche aggiungere un elemento unico per il nostro layout di page , che è l' <article> . Ciò significa che tutto il contenuto delle nostre pagine utilizzerà sia il layout di page che il layout di base .

Il concatenamento del layout riduce la duplicazione consentendo il riutilizzo di boilerplate e strutture di layout del sito di base.

Ora che abbiamo creato il contenuto per il tipo di contenuto delle pages e lo abbiamo definito come raccolta di "pagine" tramite i tag, vediamo come possiamo accedere a quella raccolta. Qui useremo Nunjucks per scorrere la raccolta e produrre un elenco di collegamenti a ciascuna pagina. Questo ciclo verrà aggiunto all'interno del nostro file index.md .

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

Tuttavia, abbiamo fatto qualcosa di unico, ovvero che l' interno del loop torna effettivamente a Markdown per eseguire il rendering dei collegamenti. Questo non è un modo obbligatorio per gestire questo scenario, ma può essere molto utile! A volte, a seconda della complessità, questo potrebbe non funzionare. Il vero motivo è che il renderer Markdown ha come impostazione predefinita il linguaggio di creazione di modelli Liquid , quindi se stai utilizzando le funzionalità di Nunjucks oltre i loop di base, dovrai far sapere a Eleventy come elaborare il file.

Nella sezione precedente sull'impaginazione, in realtà abbiamo già esaminato la soluzione per questo. E questo è utilizzare templateEngineOverride per indicare che il file deve essere elaborato sia come Nunjucks che come Markdown. La seguente soluzione completa deve essere inserita nella parte iniziale del modello: templateEngineOverride: njk, md .

A questo punto, hai creato un sito multipagina di base! Se hai bisogno di usare dati esterni, torna alla sezione sull'impaginazione .

Altri modi per avviare un progetto Eleventy

Mentre altri generatori di siti statici e ambienti come WordPress hanno il concetto di "temi", Eleventy usa il termine "starter". C'è una collezione in crescita tra cui scegliere e molti possono essere trovati nell'elenco all'interno dei documenti Eleventy.

La mia preferenza è usare Sass con i miei progetti Eleventy e ho uno starter Sass disponibile se desideri vedere come aggiungerlo al tuo processo di compilazione. Altri possono scegliere di aggiungere Gulp se sono abituati a quella pipeline di compilazione per le risorse e l'elaborazione.

Ho anche creato uno starter minimo che include le funzionalità discusse in questo articolo e condivide somiglianze con il risultato del tutorial. Ha anche un piccolo esempio di recupero di dati esterni e mostra come aggiungere una navigazione parziale per visualizzare il sito in base a una raccolta.

Espandere le basi

Dopo aver sperimentato la creazione del tuo primo sito con alcuni contenuti di base e forse alcuni dati personalizzati, è utile conoscere altri modi per lavorare con tali contenuti. Ecco una breve panoramica di alcuni altri concetti di cui essere a conoscenza.

Modifica del tipo di output del file con i collegamenti permanenti

Ho detto prima che i permalink hanno un superpotere. Ed è che puoi usarli per generare tipi di file non HTML.

Due esempi utili sono la creazione di un feed RSS e di una mappa del sito, che in genere sono entrambi file XML. La cosa davvero potente è che puoi continuare a utilizzare il linguaggio di creazione dei modelli di tua scelta per aiutare a generare quei file, così puoi scorrere i dati della pagina con Nunjucks per mantenere aggiornato il tuo feed RSS, ad esempio.

Personalizzazione delle raccolte

A volte l'utilizzo di tag per creare raccolte potrebbe non essere sufficiente. Oppure potresti voler creare varianti filtrate di una raccolta esistente. Possiamo modificare o creare raccolte utilizzando una serie di funzioni fornite. Questi vivranno nel file di configurazione .eleventy.js .

In questo esempio, utilizziamo la funzione addCollection per filtrare gli elementi in una raccolta esistente. La nuova raccolta si baserà sull'esistenza di customKey all'interno della materia prima. Questa chiave viene restituita dall'oggetto data che è allegato a tutto il contenuto Eleventy generato.

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

Puoi esaminare altri modi per creare, modificare e utilizzare le raccolte nei documenti Eleventy.

Lavorare con la cascata di dati

Eleventy ha un concetto più completo di come vengono compilati i dati per un modello chiamato cascata di dati che abbiamo appena iniziato ad esplorare in questa guida. Otterrai il massimo da Eleventy se rivedi come funziona, a partire dai documenti. Ben Myers ha anche un'eccellente guida per comprendere la cascata di dati.

Plugin consigliati Eleventy

Nell'introduzione, ho accennato brevemente alla disponibilità di plug-in, ma che non sono sempre necessari. Tuttavia, ce ne sono alcuni che tendo a utilizzare nella maggior parte dei progetti, che includono:

• @11ty/eleventy-plugin-rss Se desideri avere un feed RSS, questo plugin ufficiale fornisce alcuni filtri per aiutarti a generare il feed. Il repository collegato include un feed di esempio, che potresti anche trovare in uso in alcuni starter.
• @11ty/eleventy-plugin-syntaxhighlight Invece di caricare Prism come script per l'evidenziazione del codice, questo plugin consente di applicare tale elaborazione come parte del processo di compilazione Eleventy. Ciò significa che i blocchi di codice vengono trasformati per includere le classi per l'applicazione anticipata di un tema Prism, quindi dovrai solo aggiungere un tema CSS Prism a tua scelta.
• @11tyrocks/eleventy-plugin-social-images Una caratteristica che ho cercato all'inizio della mia esplorazione di Eleventy era la capacità di generare immagini di condivisione sui social media. Questo mi ha portato a creare un plug-in che utilizza Puppeteer dietro le quinte per scattare l'istantanea. Il plug-in viene fornito con modelli predefiniti e opzioni di configurazione per definire il tuo file modello.

Consiglierei anche di familiarizzare con il resto dei plugin ufficiali di Eleventy poiché rispondono ad altre esigenze comuni tra cui la navigazione e la gestione delle immagini.

Decidere se Eleventy è adatto al tuo progetto

Eleventy, come la maggior parte dei siti statici, è la soluzione migliore per i contenuti che in genere non devono essere serviti in modo dinamico o su richiesta. Questo non vuol dire che tutto il sito debba essere statico o che non ci siano modi per rendere dinamici i contenuti. Puoi comunque caricare JavaScript per abilitare contenuti dinamici come il recupero dalle API o la creazione di widget interattivi. Puoi anche utilizzare servizi come IFTTT o Zapier per facilitare la ricostruzione del tuo sito se il tuo host supporta build webhook e hai parti che desideri aggiornare in base a una pianificazione.

Grazie ai dati personalizzati e all'impaginazione, abbiamo visto che era facile includere dati esterni come da un CMS headless o da qualsiasi altra API. Quindi, anche se verrà pubblicato in modo statico, hai ancora molta flessibilità su dove estrai i contenuti e come li gestisci.

La cosa che preferisco di Eleventy è che non impone molte opinioni su come dovrei strutturare il mio sito, a parte le poche directory previste di cui abbiamo parlato per _includes e _data (e puoi anche aggiornare la convenzione di denominazione di quelle). Questo può essere utile anche se stai cercando di migrare un sito ed essere in grado di spostare potenzialmente anche una struttura di file esistente. Tuttavia, se preferisci un'architettura più supponente, potresti cercare un'opzione diversa.

Mi piace anche il modo in cui posso modellare Eleventy per adattarlo al mio modello mentale per un determinato progetto sfruttando più linguaggi di creazione di modelli, nonché filtri, codici brevi e layout. Gli antipasti aiutano anche a dare una spinta in modo che tu possa concentrarti su ciò che è veramente importante: i tuoi contenuti. E anche le elevate prestazioni dell'uscita puramente statica sono un grande vantaggio.

Se hai bisogno di un po' di più nel tuo processo di creazione, puoi aggiungere altri strumenti familiari come Webpack, Gulp o Parcel. Potresti riuscire a trovare un antipasto che includa già queste cose. Tieni presente che puoi anche sfruttare gli script Node che sono già inerenti al processo di compilazione Eleventy.

Eleventy è molto in grado di gestire grandi quantità di generazione di pagine. È stato utilizzato per alcuni siti grandi e complessi come web.dev di Google e il sito di marketing di Netlify. Ho anche utilizzato Eleventy per alcuni scopi non convenzionali, come i generatori di componenti Web e di posta elettronica, insieme ad altri descritti in questa panoramica.

Risorse addizionali

Spero che questa guida abbia suscitato il tuo interesse e ti abbia preparato a iniziare a utilizzare Eleventy! Comprendeva molti punti che ho trovato un po' difficile da scoprire quando stavo creando il mio primo progetto con esso. Da quando ho trovato Eleventy nell'aprile 2020, ho costruito oltre 20 progetti Eleventy contando principianti, plug-in, progetti collaterali e materiali del corso. Molti di questi possono essere trovati sul mio sito 11ty.Rocks che ha anche tutorial e suggerimenti. Eleventy è qualcosa di cui mi piace molto discutere, quindi sentiti libero di contattarci su Twitter!

Di seguito sono riportate altre risorse per aiutarti nel tuo viaggio per imparare e ottenere il massimo da Eleventy:

• Andy Bell offre un corso a pagamento molto completo: "Impara undici da zero".
• La serie di tutorial di Tatiana Mac, che inizia con "Guida per principianti a Eleventy", fornisce spiegazioni complete che presuppongono l'assenza di precedenti esperienze con i generatori di siti statici.
• Bryan Robinson offre un corso su YouTube per convertire un tema HTML gratuito in un sito Eleventy.

Infine, voglio sottolineare che la community di Eleventy è piccola ma attiva! Se hai difficoltà a trovare alcune informazioni, puoi twittare la tua domanda all'account @eleven_ty ufficiale. Il creatore di Eleventy, Zach Leatherman, è pronto a rispondere o alle domande RT per aiutarti a rimetterti in cammino!