{"id":31062,"date":"2019-12-25T23:19:11","date_gmt":"2019-12-26T07:19:11","guid":{"rendered":"https:\/\/kinsta.com\/?p=58518&preview=true&preview_id=58518"},"modified":"2023-06-09T16:57:01","modified_gmt":"2023-06-09T15:57:01","slug":"gatsby-wordpress","status":"publish","type":"post","link":"https:\/\/kinsta.com\/it\/blog\/gatsby-wordpress\/","title":{"rendered":"Introduzione alla Creazione di Siti Web con Gatsby e WordPress (Veloci e Statici)"},"content":{"rendered":"

Come funziona un tipico sito web dinamico, come quelli basati su WordPress? Quando un visitatore inserisce l’URL in un browser o visita il sito cliccando su un link, viene inviata una richiesta al server.<\/p>\n

Il server raccoglie i dati richiesti attraverso le query del database necessarie e genera un file HTML<\/a> per la visualizzazione nel browser. I siti statici, d’altra parte, memorizzano queste risposte in file di testo sul server che vengono immediatamente consegnati a un visitatore.<\/p>\n

I generatori di siti statici sono in giro da molto tempo, ma di recente la loro popolarit\u00e0 \u00e8 cresciuta molto. In questa guida passo passo, scopriremo l’integrazione di WordPress con Gatsby<\/strong>, un generatore di siti statici.<\/p>\n

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

Che Cos’\u00e8 Gatsby?<\/h2>\n

WordPress crea siti web dinamici, che richiedono l’esecuzione sul server di uno stack di PHP<\/a>, MySQL<\/a>, e Apache o Nginx<\/a>. \u00c8 possibile creare una versione statica di WordPress generando un elenco di pagine HTML per tutto il contenuto del vostro sito.<\/p>\n

Questa versione statica di WordPress viene chiamata headless WordPress o serverless WordPress. Questo processo di conversione viene eseguito una sola volta in modo che la stessa pagina possa essere offerta ai visitatori pi\u00f9 volte. Come convertire il vostro sito WordPress in una versione statica? \u00c8 qui che entra in scena Gatsby.<\/p>\n

Gatsby<\/a>, o GatsbyJS, \u00e8 un generatore di siti statici sviluppato con ReactJS<\/a> e alimentato da GraphQL<\/a>. Gatsby consente a chiunque di creare applicazioni ricche di funzionalit\u00e0 e siti web coinvolgenti. Gatsby recupera i dati del vostro sito da una variet\u00e0 di fonti tra cui siti web esistenti, chiamate API e file piani tramite GraphQL e crea il sito statico in base alle impostazioni che specificate nella configurazione.<\/p>\n

Gatsby \u00e8 stato sviluppato solo un anno fa, ma un gran numero di utenti lo sta provando. Ha trovato impiego in una variet\u00e0 di configurazioni. La home page del blog di Data Science and Engineering di Airbnb<\/a> \u00e8 fornita da Gatsby, sebbene i post sul blog siano ospitati su Medium.<\/p>\n

\"airbnb
Airbnb’s Engineering & Data Science<\/figcaption><\/figure>\n

Braun \u00e8 un marchio dell’azienda di beni di consumo P&G. Il suo sito canadese<\/a> \u00e8 servito da Gatsby, mentre la funzione di ricerca sul sito \u00e8 basata su React.<\/p>\n

\"Il
Il sito web canadese di Braun<\/figcaption><\/figure>\n

Inoltre, Gatsby ha solleticato l’interesse degli sviluppatori freelance<\/a> per i loro portfolio<\/a>. Un portfolio come quello di Jacob Castro<\/a> contengono soprattutto contenuti statici, con collegamenti ai lavori e contatti tramite email, cos\u00ec un sito statico \u00e8 perfetto per le sue esigenze.<\/p>\n

\"Il
Il Portfolio di Jacob D. Castro<\/figcaption><\/figure>\n

Perch\u00e9 Scegliere Gatsby?<\/h3>\n

Siti Web Veloci:<\/strong> il vantaggio principale della creazione di un sito statico con Gatsby \u00e8 la velocit\u00e0<\/a>, che i webmaster hanno cercato di ottimizzare a partire dall’annuncio di Google che avrebbe tenuto conto della velocit\u00e0 dei siti nelle classifiche delle ricerche<\/a>. Inoltre, i tempi di caricamento influiscono sulle visualizzazioni delle pagine e sulle conversioni. \u00c8 stato stimato che un ritardo di un secondo nel tempo di caricamento del sito pu\u00f2 portare a una riduzione del 7% delle conversioni<\/a>.<\/p>\n

Sicurezza:<\/strong> con un sito statico avete anche maggiore sicurezza<\/a>. Dato che vengono serviti un mucchio di file statici, non c’\u00e8 molto da hackerare. Inoltre, potete sempre rigenerare i file statici nel caso in cui vengano persi.<\/p>\n

Costi del Server:<\/strong> l’hosting di un sito dinamico richiede che il vostro server sia compatibile con il vostro stack tecnologico. Se lavorate con un sito statico, potete ospitarlo su quasi tutti i server, il che riduce anche i costi associati all’hosting.<\/p>\n

Creare un sito statico con Gatsby ad ogni modifica richiede JavaScript, che pu\u00f2 essere eseguito anche su un computer locale prima di trasferire i file statici sul sito.<\/p>\n

Perch\u00e9 Evitare Gatsby?<\/h3>\n

Nessun Contenuto Dinamico Incorporato:<\/strong> se volete utilizzare Gatsby, dovete ripensare a come controllare e servire i contenuti dinamici, ovvero \u00e8 necessario creare un ibrido statico\/dinamico<\/a> per raggiungere questo obiettivo (maggiori informazioni su questo argomento qui sotto).<\/p>\n

Ad esempio, i commenti<\/a> devono essere ospitati esternamente attraverso un servizio come Disqus<\/a>.<\/p>\n

I moduli di contatto<\/a> dovrebbero inoltre essere reinstradati attraverso un servizio esterno come Google Forms. In breve, perderete il controllo diretto su tali contenuti dinamici, perch\u00e9 le loro risposte non saranno archiviate sui vostri server.<\/p>\n

Build Frequenti Sono Scomode:<\/strong> anche i siti statici presentano frequenti riconversioni. Qualsiasi modifica apportata al vostro sito viene riflessa solo dopo aver rigenerato le pagine e averle ricaricate sul server.<\/p>\n

Competenza Tecnica:<\/strong> Gatsby \u00e8 basato su ReactJS e GraphQL. Alcune conoscenze di JavaScript e un’idea di base di GraphQL, pertanto, sono necessarie per lavorare e trasferire un sito web su Gatsby.<\/p>\n

I siti statici<\/a> sono adatti a coloro che cercano una soluzione a basso costo, con un’elevata sicurezza. Tra i casi d’uso ci sono i siti portfolio per freelance e demo di prodotti.<\/p>\n

Se pensate che i benefici superino gli svantaggi, allora \u00e8 fantastico! Proveremo ora a configurare Gatsby per integrarlo con il nostro sito WordPress<\/a>.<\/p>\n

L’ultima versione del sito Gatsby che costruiamo in questo tutorial \u00e8 disponibile su GitHub<\/a> per il vostro uso.<\/p>\n

Passo 1: Configurare Gatsby<\/h2>\n

In questa sezione, vedremo come installare Gatsby e creare un sito statico di base con Gatsby.<\/p>\n

Prerequisiti<\/h3>\n

Il primo passo per iniziare con Gatsby \u00e8 verificarne i prerequisiti. Gatsby viene servito tramite npm, l’installer del pacchetto di NodeJS. Pertanto, prima di installare Gatsby, avete bisogno di installare NodeJS e npm nel vostro ambiente. Inoltre, Gatsby richiede l’installazione di Git<\/a>, il sistema di gestione del codice sorgente.<\/p>\n