{"id":68320,"date":"2023-04-27T11:34:14","date_gmt":"2023-04-27T10:34:14","guid":{"rendered":"https:\/\/kinsta.com\/it\/?p=68320&preview=true&preview_id=68320"},"modified":"2023-06-09T16:49:39","modified_gmt":"2023-06-09T15:49:39","slug":"eleventy","status":"publish","type":"post","link":"https:\/\/kinsta.com\/it\/blog\/eleventy\/","title":{"rendered":"Come Creare un Sito Web Statico Originale con Eleventy (11ty)"},"content":{"rendered":"

Con l’avvento dei generatori di siti statici<\/a> (SSG) come Eleventy, creare un sito web statico, originale ed efficiente non \u00e8 mai stato cos\u00ec facile.<\/p>\n

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.<\/p>\n

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

Ecco una demo live<\/a> del sito portfolio statico che realizzeremo con Eleventy.<\/p>\n

\"Un
Un elegante sito portfolio statico<\/figcaption><\/figure>\n

\u00c8 possibile accedere al repository GitHub<\/a> di questo progetto se volete dare un’occhiata pi\u00f9 da vicino.<\/p>\n

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

Cos’\u00e8 Eleventy?<\/h2>\n

Eleventy, noto anche come 11ty, \u00e8 un generatore di siti statici che crea siti web basati su HTML<\/a>, CSS<\/a> e JavaScript<\/a> senza bisogno di database e linguaggi di programmazione backend<\/a>.<\/p>\n

Eleventy \u00e8 noto per la sua semplicit\u00e0 e flessibilit\u00e0, in quanto non obbliga a usare un solo linguaggio o framework di template. Supporta pi\u00f9 di 10 linguaggi di template e permette di utilizzarne quanti se ne vuole in un singolo progetto:<\/p>\n

\"Linguaggi
Linguaggi di template supportati da Eleventy<\/figcaption><\/figure>\n

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.<\/p>\n\n

Come installare Eleventy<\/h2>\n

Installare Eleventy \u00e8 facile. Ecco come fare:<\/p>\n

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

    Nota:<\/strong> quando eseguite il comando npx @11ty\/eleventy<\/code> otterrete questo risultato:<\/p>\n

    [11ty] Wrote 0 files in 0.01 seconds (v2.0.0)<\/code><\/pre>\n
    Qui vengono scritti 0 file perch\u00e9 non ci sono template nella cartella del progetto.<\/p>\n
    Comandi e configurazione di Eleventy<\/h2>\n
    Ora avete creato il vostro progetto Eleventy, ma non \u00e8 tutto. Dovete creare alcune configurazioni e conoscere alcuni comandi di base per il vostro sito statico che pu\u00f2 essere servito al browser.<\/p>\n
    Comandi di Eleventy<\/h3>\n
    Ecco alcuni dei principali comandi di Eleventy che dovreste conoscere:<\/p>\n