Tutorial: crea il tuo sito con WordPress e Gatsby

La creazione di un sito Web statico con WordPress è possibile con WordPress headless. Questi tipi di siti web si caricano più velocemente, perché i file statici vengono salvati sul tuo server. La domanda è: come si costruisce un sito headless con WordPress?

È qui che entra in gioco un generatore di siti statici come Gatsby. Questi generatori ti aiutano a creare siti Web statici ricchi di funzionalità in WordPress. Tuttavia, è necessario integrarli correttamente con l'installazione di WordPress per ottenere il massimo da essi. Questa integrazione include l'installazione, la generazione e la configurazione di WordPress Gatsby.

In questo articolo, vedremo cos'è Gatsby e perché potresti volerlo usare con WordPress. Descriveremo quindi in dettaglio come utilizzare Gatsby e se dovresti. Iniziamo!

Cos'è Gatsby?

In poche parole, Gatsby è un generatore di siti statici. Ciò significa che Gatsby genera i file HTML statici che vengono caricati sul server del tuo sito web. Quando un visitatore arriva sul tuo sito, questi file statici vengono serviti al suo browser, invece del contenuto dinamico che WordPress generalmente offre.

Per generare questi file, Gatsby recupera i dati per il tuo sito Web da una serie di fonti. Ciò include siti Web esistenti, chiamate API e file flat tramite GraphQL. Il tuo sito Web statico viene quindi creato in base alle configurazioni che hai impostato.

Rispetto ad altri generatori di siti statici, Gatsby è relativamente nuovo. Tuttavia, questo non ha impedito a molte aziende di provarlo. Uno dei più grandi esempi è il blog Airbnb Engineering & Data Science, che è alimentato da Gatsby.

Perché usare Gatsby con WordPress?

Poiché è possibile creare un sito Web statico con WordPress, potresti chiederti perché dovresti utilizzare WordPress e Gatsby insieme. Sebbene WordPress sia potente da solo, Gatsby offre alcuni vantaggi che potresti desiderare per il tuo sito Web, tra cui velocità più elevate e costi del server inferiori. Comprendere i vantaggi e gli svantaggi di Gatsby può aiutarti a prendere una decisione informata.

Vantaggi dell'utilizzo di Gatsby

Gatsby offre una serie di vantaggi che qualsiasi sito Web può sfruttare, tra cui:

• Velocità di caricamento più elevate. I siti web statici si caricano più velocemente di quelli dinamici e questo può influire sull'ottimizzazione per i motori di ricerca (SEO). La velocità di caricamento della pagina è un segnale utilizzato dai motori di ricerca e influisce sulla frequenza di rimbalzo del tuo sito web.
• Costi del server ridotti. I siti Web dinamici richiedono stack e server tecnologici compatibili. I siti Web statici no e puoi ospitarli su qualsiasi server. Ciò può ridurre i costi del server.
• Sicurezza migliorata. I siti Web statici offrono una maggiore sicurezza. I file HTML statici forniti non offrono molto agli hacker con cui lavorare. Se questi file vengono persi per qualsiasi motivo, puoi anche rigenerarli con Gatsby.

Il tuo sito web può beneficiare di tutti questi vantaggi. Tuttavia, dovresti valutarli rispetto agli svantaggi dell'utilizzo di Gatsby.

Contro dell'uso di Gatsby

Nessun sistema software è perfetto e Gatsby presenta alcuni inconvenienti che devi conoscere:

• Conoscenze tecniche necessarie. Gatsby è basato su ReactJS e utilizza GraphQL. Per usarlo, è necessaria una certa conoscenza di JavaScript. Dovrai anche avere una conoscenza di base di GraphQL per creare un sito web.
• Nessun contenuto dinamico. Gatsby genera solo siti web statici. Se desideri contenuti dinamici come i moduli di contatto, devono essere reindirizzati tramite un provider di terze parti.

Mentre molti sviluppatori ritengono che i pro di Gatsby superino i contro, entrambi sono importanti da capire in anticipo.

Come uso Gatsby con WordPress?

La configurazione di Gatsby può richiedere del tempo e ci sono alcuni passaggi che dovrai seguire. Devi installare Gatsby prima di poter iniziare a generare il tuo sito e configurarlo. Inoltre, ci sono alcune considerazioni iniziali da fare.

Passaggio 1: verifica i prerequisiti

Prima di poter installare Gatsby, devi installare NodeJS e npm nell'ambiente del tuo sito web. Git è richiesto anche per la gestione del codice. I passaggi per installare i prerequisiti variano a seconda del sistema operativo in esecuzione.

Se hai Windows, puoi installare NodeJS e Git tramite il programma di installazione nella pagina di download. Lo stesso è possibile con Mac. Tuttavia, se esegui Linux, è necessario un programma di installazione del pacchetto come apt.

Passaggio 2: installa Gatsby

Dopo aver installato NodeJS e Git, puoi iniziare a installare Gatsby. Il metodo più semplice per farlo è utilizzare il seguente comando nel terminale software:

 npm install -g gatsby-cli

Questo comando esegue automaticamente il programma di installazione. Prima scaricherà e installerà tutte le dipendenze prima di installare Gatsby. Una volta completato, puoi iniziare a creare il tuo primo sito Web Gatsby.

Passaggio 3: crea un sito Gatsby

Per creare il tuo sito Web Gatsby, dovrai eseguire il seguente comando:

 gatsby new gatsby-site

Questo comando clona il modello iniziale di Gatsby e lo inserisce nella directory /gatsby-wordpress . Una volta completata la clonazione e l'installazione, puoi aprire la versione di sviluppo del sito. Questo viene fatto usando il seguente comando:

 gatsby develop

Mentre l'ambiente di sviluppo è in esecuzione, puoi visitare localmente il tuo nuovo sito web. Nel tuo browser web, inserisci http://localhost:8000 e il tuo modello predefinito dovrebbe aprirsi.

Se vedi questa pagina, puoi iniziare a costruire il tuo sito web. Ciò significa creare i file statici nella directory pubblica di quel sito web. Il seguente comando avvia automaticamente la produzione dei file statici tohse:

 gatsby build

Questo comando genera anche i pacchetti di codice JavaScript pre-instradamento per il tuo sito web. Puoi quindi utilizzare il comando serve per visualizzare localmente il tuo nuovo sito web:

 gatsby serve

Questo comando funzionerà solo se hai già eseguito il comando build.

Passaggio 4: collega Gatsby a WordPress

Ora hai un sito web statico di base, ma devi integrarlo con WordPress. Questo indirizza il tuo sito Gatsby all'indirizzo del tuo blog WordPress, consentendogli di estrarre i dati più recenti quando esegui il server di sviluppo. Una volta connesso, Gatsby creerà un sito Web statico basato sul tuo attuale modello WordPress.

Per connettere i due, dovrai installare il plug-in Gatsby per WordPress. Il seguente comando si occuperà di questo:

 npm install gatsby-source-wordpress

Dopo aver installato il plugin, puoi iniziare a configurare Gatsby.

Passaggio 5: configura Gatsby

Per configurare Gatsby, devi lavorare con il file gatsby-config.js . In quel file, aggiungi il seguente codice:

 module.exports = { ... plugins: [ ..., { resolve: `gatsby-source-wordpress`, options: { // your WordPress source baseUrl: `wpexample.com`, protocol: `https`, // is it hosted on wordpress.com, or self-hosted? hostingWPCOM: false, // does your site use the Advanced Custom Fields Plugin? useACF: false } }, ] }

Aggiorna questo codice in modo che punti al tuo sito Web WordPress. Se il tuo sito web è ospitato localmente, dopo baseUrl puoi usare localhost:8888/wordpress invece dell'URL del tuo sito web. Dopo aver salvato il file, dovrai creare i tuoi modelli di pagina.

Passaggio 6: crea modelli di pagina

La creazione di modelli di pagina consente a Gatsby di generare un post per ogni pagina del tuo sito Web WordPress. Il plug-in di origine estrarrà i dati necessari da WordPress per queste pagine, ma dovrai creare il modello di progettazione.

Nel tuo file gatsby-node.js , aggiungi il seguente codice:

 const path = require(`path`) const { slash } = require(`gatsby-core-utils`) exports.createPages = async ({ graphql, actions }) => { const { createPage } = actions // query content for WordPress posts const result = await graphql(` query { allWordpressPost { edges { node { id slug } } } } `) const postTemplate = path.resolve(`./src/templates/post.js`) result.data.allWordpressPost.edges.forEach(edge => { createPage({ // will be the url for the page path: edge.node.slug, // specify the component template of your choice component: slash(postTemplate), // In the ^template's GraphQL query, 'id' will be available // as a GraphQL variable to query for this posts's data. context: { id: edge.node.id, }, }) }) }

Dopo aver richiamato tutti i dati da WordPress, Gatsby genererà una pagina per ogni post. Utilizzando il comando di sviluppo, puoi navigare in ogni nuova pagina utilizzando l'URL generato.

Dovrei usare Gatsby per WordPress?

Sebbene Gatsby possa migliorare la velocità e la sicurezza del tuo sito Web, non è la scelta giusta per tutti. Se il tuo sito web ha contenuti statici che non cambiano spesso, Gatsby può essere utile. Tuttavia, se hai bisogno di contenuti dinamici sul tuo sito web, WordPress tradizionale potrebbe essere la scelta migliore.

Fai il massimo con il tuo sito su WP Engine

Gatsby è un efficace generatore di siti web statici che puoi facilmente integrare con WordPress. Ci sono passaggi che devi seguire per installare e configurare il sistema. Devi anche avere una certa conoscenza di Gatsby e GraphQL prima di iniziare.

I contenuti statici possono migliorare la velocità e la sicurezza del tuo sito web, ma hai bisogno anche dell'host giusto. WP Engine offre le migliori risorse per il tuo sito Web per creare un'eccellente esperienza digitale. Questo ti lascia più tempo per concentrarti sullo sviluppo!