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.
Il server raccoglie i dati richiesti attraverso le query del database necessarie e genera un file HTML 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.
I generatori di siti statici sono in giro da molto tempo, ma di recente la loro popolarità è cresciuta molto. In questa guida passo passo, scopriremo l’integrazione di WordPress con Gatsby, un generatore di siti statici.
Che Cos’è Gatsby?
WordPress crea siti web dinamici, che richiedono l’esecuzione sul server di uno stack di PHP, MySQL, e Apache o Nginx. È possibile creare una versione statica di WordPress generando un elenco di pagine HTML per tutto il contenuto del vostro sito.
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ù volte. Come convertire il vostro sito WordPress in una versione statica? È qui che entra in scena Gatsby.
Gatsby, o GatsbyJS, è un generatore di siti statici sviluppato con ReactJS e alimentato da GraphQL. Gatsby consente a chiunque di creare applicazioni ricche di funzionalità e siti web coinvolgenti. Gatsby recupera i dati del vostro sito da una varietà 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.
Gatsby è stato sviluppato solo un anno fa, ma un gran numero di utenti lo sta provando. Ha trovato impiego in una varietà di configurazioni. La home page del blog di Data Science and Engineering di Airbnb è fornita da Gatsby, sebbene i post sul blog siano ospitati su Medium.
Braun è un marchio dell’azienda di beni di consumo P&G. Il suo sito canadese è servito da Gatsby, mentre la funzione di ricerca sul sito è basata su React.
Inoltre, Gatsby ha solleticato l’interesse degli sviluppatori freelance per i loro portfolio. Un portfolio come quello di Jacob Castro contengono soprattutto contenuti statici, con collegamenti ai lavori e contatti tramite email, così un sito statico è perfetto per le sue esigenze.
Perché Scegliere Gatsby?
Siti Web Veloci: il vantaggio principale della creazione di un sito statico con Gatsby è la velocità, che i webmaster hanno cercato di ottimizzare a partire dall’annuncio di Google che avrebbe tenuto conto della velocità dei siti nelle classifiche delle ricerche. Inoltre, i tempi di caricamento influiscono sulle visualizzazioni delle pagine e sulle conversioni. È stato stimato che un ritardo di un secondo nel tempo di caricamento del sito può portare a una riduzione del 7% delle conversioni.
Sicurezza: con un sito statico avete anche maggiore sicurezza. Dato che vengono serviti un mucchio di file statici, non c’è molto da hackerare. Inoltre, potete sempre rigenerare i file statici nel caso in cui vengano persi.
Costi del Server: 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.
Creare un sito statico con Gatsby ad ogni modifica richiede JavaScript, che può essere eseguito anche su un computer locale prima di trasferire i file statici sul sito.
Perché Evitare Gatsby?
Nessun Contenuto Dinamico Incorporato: se volete utilizzare Gatsby, dovete ripensare a come controllare e servire i contenuti dinamici, ovvero è necessario creare un ibrido statico/dinamico per raggiungere questo obiettivo (maggiori informazioni su questo argomento qui sotto).
Ad esempio, i commenti devono essere ospitati esternamente attraverso un servizio come Disqus.
I moduli di contatto dovrebbero inoltre essere reinstradati attraverso un servizio esterno come Google Forms. In breve, perderete il controllo diretto su tali contenuti dinamici, perché le loro risposte non saranno archiviate sui vostri server.
Build Frequenti Sono Scomode: 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.
Competenza Tecnica: Gatsby è 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.
I siti statici 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.
Se pensate che i benefici superino gli svantaggi, allora è fantastico! Proveremo ora a configurare Gatsby per integrarlo con il nostro sito WordPress.
L’ultima versione del sito Gatsby che costruiamo in questo tutorial è disponibile su GitHub per il vostro uso.
Passo 1: Configurare Gatsby
In questa sezione, vedremo come installare Gatsby e creare un sito statico di base con Gatsby.
Prerequisiti
Il primo passo per iniziare con Gatsby è 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, il sistema di gestione del codice sorgente.
Se utilizzate Windows, potete installare NodeJS e Git tramite il programma di installazione nella pagina di download. Su Mac, potete scaricare gli installer o usare homebrew.
brew install nodejs
brew install gitSe lavorate con Linux, potete installare NodeJS tramite un installer di pacchetti come apt.
sudo apt update
sudo apt install nodejs gitInstallare Gatsby
Dopo aver installato con successo NodeJS e Git, siete pronti per installare Gatsby! Il modo più semplice è eseguire il seguente comando sul terminale (utilizzate la linea di comando npm su Windows):
npm install -g gatsby-cliL’installer installa prima le dipendenze e poi Gatsby. Ora siete pronto per creare il vostro primo sito Gatsby.
Costruire e Distribuire il Primo Sito Gatsby
Eseguite questo comando per creare un sito Gatsby.
gatsby new gatsby-wordpressGatsby crea un sito nella directory /gatsby-wordpress clonando lo starter template di Gatsby. Potete fornire un diverso template di avvio da clonare. Una volta completata la clonazione e installate le dipendenze, è possibile eseguire una versione di sviluppo del sito con il seguente comando.
cd gatsby-wordpress
gatsby developPotrete, quindi, visitare la versione di sviluppo del sito all’indirizzo http://localhost:8000.
L’ultimo passo è costruire il vostro sito statico. Il comando che segue crea i file statici nella directory pubblica. Per caricarlo su un server, potete semplicemente caricare i contenuti di questa directory nella directory principale del server. Potreste voler aggiungere un prefisso di percorso come www.example.com/blog/ come URL principale per le vostre build.
gatsby buildPer avviare un server HTML in locale per visualizzare questo versione statica del vostro sito, dovete utilizzare il comando serve. Ricordate che funziona solo dopo aver eseguito il comando build.
gatsby serveOra che avete creato con successo un sito statico di base con Gatsby, proviamo a integrarlo con WordPress.
Passo 2: Come Collegare Gatsby a WordPress
In questa sezione integrerete il vostro sito WordPress con Gatsby. Dovete puntare Gatsby all’indirizzo del vostro blog WordPress per consentirgli di estrarre i dati più recenti quando eseguite il server di sviluppo o generate pagine statiche.
La procedura di connessione di Gatsby a WordPress consiste nel recuperare i vostri dati WordPress, che sono attivati da una build. Una volta che Gatsby ha recuperato i dati di WordPress, crea il sito statico basato sul template corrente.
La procedura utilizza il sito WordPress come origine dei post su Gatsby. Per facilitare questo scambio, è necessario installare il plugin Gatsby per WordPress con il seguente comando:
npm install gatsby-source-wordpressConfigurare Gatsby
Aggiungete questo plugin al file di configurazione di Gatsby gatsby-config.js.
Quindi aggiungete il codice che segue al file per connettere Gatsby alla vostra origine di WordPress. In questo esempio, utilizziamo un sito WordPress ospitato localmente su MAMP. Nota a margine, dovreste modificare il titolo e la descrizione del sito in siteMetadata.
module.exports = {
siteMetadata: {
...
},
plugins: [
...
{
resolve: `gatsby-source-wordpress`,
options: {
// Specify the URL of the WordPress source
baseUrl: `localhost:8888/wordpress`,
protocol: `http`,
// Indicates if a site is hosted on WordPress.com
hostingWPCOM: false,
// Specify which URL structures to fetch
includedRoutes: [
'**/posts',
'**/tags',
'**/categories'
]
}
}
Recuperare gli Articoli con GraphQL
Dopo aver specificato l’origine del sito WordPress nel file di configurazione, è necessario specificare quali dati devono essere estratti dal sito. Gatsby utilizza GraphQL, un linguaggio di query open source per le API, per prelevare in blocco i post di WordPress.
Prima di finalizzare le query da selezionare, è possibile selezionare in modo interattivo il contenuto che volete recuperare da WordPress. Avviate il server di sviluppo e andate all’URL: http://localhost:8000/___graphql per aprire l’editor di GraphQL.
Dopo aver finalizzato il contenuto da estrarre, potrete aggiungere le query GraphQL al file index.js.
Per ora prendiamo solo il titolo e il riassunto di ogni post. Potremo aggiungere altri campi in seguito.
import React from "react"
import { graphql } from "gatsby"
import Layout from "../components/layout"
import SEO from "../components/seo"
export default ({ data }) => {
return (
<Layout>
<SEO title="home" />
<h4>Posts</h4>
{data.allWordpressPost.edges.map(({ node }) => (
<div>
<p>{node.title}</p>
<div dangerouslySetInnerHTML={{ __html: node.excerpt }} />
</div>
))}
</Layout>
)
}
export const pageQuery = graphql`
query {
allWordpressPost(sort: { fields: [date] }) {
edges {
node {
title
excerpt
}
}
}
}
Quando controllerete il sito di sviluppo, noterete che tutti i post di WordPress che sono stati estratti sono visualizzati con i titoli e i riassunti:
Anche se questo non sembra carino, avete prelevato con successo i dati rilevanti da WordPress. Il passo successivo è creare una nuova pagina per ogni post.
Passo 3: Creare un Template Pagina di Base
In questa sezione, dovrete eseguire Gatsby per creare un post per ogni singola pagina dal vostro sito WordPress e includere link a questi post tramite slug.
Creare una Pagina per Ogni Post
Il primo passo dopo aver estratto tutti i post dall’origine WordPress è quello di istruire Gatsby a creare una pagina per ogni articolo. Il compito è eseguito utilizzando l’azione createPage.
Aggiungete il seguente codice a gatsby-node.js. Si noti che stiamo ricevendo anche il contenuto, l’autore, la data e lo slug di ogni post:
const path = require(`path`)
exports.createPages = ({ graphql, actions }) => {
const { createPage } = actions
return graphql(`
{
allWordpressPost(sort: {fields: [date]}) {
edges {
node {
title
excerpt
slug
date(formatString: "MM-DD-YYYY")
author {
name
}
}
}
}
}
`).then(result => {
result.data.allWordpressPost.edges.forEach(({ node }) => {
createPage({
// Decide URL structure
path: node.slug,
// path to template
component: path.resolve(`./src/templates/blog-post.js`),
context: {
// This is the $slug variable
// passed to blog-post.js
slug: node.slug,
},
})
})
})Dopo aver estratto i dati da GraphQL, il codice crea una pagina per ogni post. All’interno del post, potete specificare la struttura dell’URL della pagina basata sullo slug utilizzando il percorso.
In alternativa, potete ottenere l’ID del post e specificarlo nell’URL. La variabile del componente punta al template attraverso il quale deve essere eseguito il rendering del post. Infine, passiamo lo slug come contesto del template. Ciò è necessario affinché il template richieda il post corretto dall’elenco dei post recuperati.
In teoria, dovreste passare una variabile che identifichi in modo univoco un post come contesto.
Riavviate il server di sviluppo dopo aver apportato modifiche al file gatsby-node.js per rendere effettive queste modifiche.
Creare un Template per Visualizzare un Post
Create una directory “templates” nella directory “src”. Create un nuovo file blog-post.js nella directory dei template e inserite il seguente codice:
import React from "react"
import Layout from "../components/layout"
import { graphql } from "gatsby"
export default ({ data }) => {
const post = data.allWordpressPost.edges[0].node
console.log(post)
return (
<Layout>
<div>
<h1>{post.title}</h1>
<div dangerouslySetInnerHTML={{ __html: post.content }} />
<p> By: {post.author.name} </p>
<p> On: {post.date} </p>
</div>
</Layout>
)
}
export const query = graphql`
query($slug: String!) {
allWordpressPost(filter: { slug: { eq: $slug } }) {
edges {
node {
title
content
slug
date(formatString: "MM-DD-YYYY")
author {
name
}
}
}
}
}La query GraphQL preleva la data e i nomi dell’autore, che viene visualizzato verso la fine del post. Potete prelevare campi aggiuntivi utilizzando l’editor GraphQL e visualizzarli nella pagina dei post.
Link alle Pagine in Index
Avete creato una nuova pagina per ogni post. Ma è necessario aggiungere un link a questi post nella pagina index. Andate su index.js e modificate il codice in modo da aggiungere un link a ciascun post:
import React from "react"
import { Link, graphql } from "gatsby"
import Layout from "../components/layout"
import SEO from "../components/seo"
export default ({ data }) => {
return (
<Layout>
<SEO title="home" />
<h1>My WordPress Blog</h1>
<h4>Posts</h4>
{data.allWordpressPost.edges.map(({ node }) => (
<div>
<Link to={node.slug}>
<p>{node.title}</p>
</Link>
<div dangerouslySetInnerHTML={{ __html: node.excerpt }} />
</div>
))}
</Layout>
)
}
export const pageQuery = graphql`
query {
allWordpressPost(sort: { fields: [date] }) {
edges {
node {
title
excerpt
slug
}
}
}
}Ecco lo stato della pagina index:
Quando si fa clic su un collegamento, ecco la pagina del post, resa da blog-post.js:
Passo 4: Attività Avanzate di Migrazione
Anche se potreste aver importato con successo ogni post di WordPress, eseguiamo alcuni task avanzati per essere sicuri di non avere problemi in futuro. In questa sezione, potete lavorare in modo efficiente con le immagini e aggiungere il timestamp della data dell’ultima modifica ai vostri dati.
Conversioni dei Percorsi delle Immagini
Uno dei nostri post originali, “Post with Image!”, conteneva un’immagine. Se passate alla pagina corrispondente su Gatsby, noterete che l’immagine viene visualizzata, ma l’origine dell’immagine è la stessa di WordPress. In questo esempio, punta all’immagine WordPress ospitata in locale.
Se le immagini sono ospitate all’esterno, questo non costituirà un problema perché continuerete a puntare verso il server delle vostre immagini. Tuttavia, se archiviate le immagini all’interno della vostra installazione di WordPress, con i post dovrete prelevare anche le immagini!
Questo viene risolto dal plugin inline images. Innanzitutto, installate il plugin gatsby-image e poi il plugin gatsby-wordpress-inline-images.
npm install gatsby-image
npm install gatsby-wordpress-inline-imagesPoi aggiungete le seguenti righe al vostro file gastby-config.js.
module.exports = {
siteMetadata: {
...
},
plugins: [
...
{
resolve: `gatsby-source-wordpress`,
options: {
...
// If useACF is true, then the source plugin will try to import the WordPress ACF Plugin contents.
// This feature is untested for sites hosted on WordPress.com
useACF: true,
plugins: [
{
resolve: `gatsby-wordpress-inline-images`,
options:
{
baseUrl: `localhost:8888/wordpress`,
protocol: `http`
}
}
]
}
}
],
}Riavviando il server di sviluppo dopo aver apportato queste modifiche, le immagini saranno scaricate dal sito WordPress e memorizzate in locale. Potete verificarlo dal percorso della stessa immagine.
Visualizzare la Data dell’Ultima Modifica
Se gestite un blog in cui aggiornate regolarmente i vostri post, potreste voler informare i lettori sull’ultimo aggiornamento effettuato. In precedenza, nella query GraphQL è stata estratta la “data di creazione”. Questa sezione spiega come estrarre anche il timestamp “ultima modifica”.
Per aggiungere il timestamp dell’ultima modifica effettuata da WordPress al vostro post di Gatsby, dovete aggiungere il modified all’elenco degli elementi della vostra query GraphQL. È un timestamp come date, quindi dovete anche aggiungere il parametro formatString. Ecco la modifica al file blog-post.js:
...
<Layout>
<div>
...
<p> On: {post.date} </p>
<p> Last modified: {post.modified} </p>
</div>
</Layout>
...
export const query = graphql`
query($slug: String!) {
{
allWordpressPost {
edges {
node {
...
modified(formatString: "MM-DD-YYYY")
}
}
}
}
Una volta aggiunto questo codice, sarete in grado di vedere il timestamp dell’ultima modifica sulla pagina dei post di Gatsby:
Riepilogo
Prendere la decisione di convertire un sito WordPress in un sito statico sfruttando Gatsby può essere un compito impegnativo. Per farlo, è necessario seguire questi passaggi:
- Installare Gatsby per creare un sito starter
- Collegare Gatsby all’origine WordPress tramite GraphQL
- Creare template per i post del blog
- Importare tutte le vostre immagini da WordPress
- Visualizzare il timestamp dell’ultima modifica da WordPress
Ora tocca a avete: avete già provato Gatsby? Qual è la vostra esperienza? Ditecelo nei commenti!
Shaumik is a data analyst by day, and a comic book enthusiast by night (or maybe, he's Batman?) Shaumik has been writing tutorials and creating screencasts for over five years. When not working, he's busy automating mundane daily tasks through meticulously written scripts!
Lascia un commento