Configura Gatsby open source con il tuo WordPress per portare una maggiore esperienza utente e prestazioni complessive. Impariamo come utilizzare questo generatore di siti statico.

Gatsby WordPress

Panoramica ## Gatsbyjs è un generatore di siti statico a base di reazione aperta e open source. Utilizza una potente pre-configurazione per creare un sito Web che utilizza solo file statici per carichi di pagina incredibilmente veloci. WordPress è un’ottima piattaforma di blogging open source. Di conseguenza, ci sono molte persone che sanno come capire se un sito è un sito WordPress in modo che possano hackerarlo e rubare informazioni. L’uso di Gatsby WordPress insieme ti darà la stessa potenza della gestione dei contenuti di WordPress e della velocità di Gatsby. In questo articolo, vedremo cos’è Gatsby e perché devi usarlo con il software CMS. Quindi, andremo nei dettagli su come utilizzare WordPress e Gatsby insieme per costruire una straordinaria esperienza del sito Web. Iniziamo!

Cos’è Gatsby

Gatsby è un generatore di siti statico. Ciò significa che Gatsby genera i file HTML statici che vengono caricati sul server del tuo sito Web. Quando un visitatore atterra sul tuo sito, questi file statici vengono serviti al loro browser, invece del contenuto dinamico che WordPress generalmente serve. È un framework gratuito e open source basato su React che aiuta gli sviluppatori a costruire siti Web e app a fuoco bene.

Pro e contro dell’utilizzo di WordPress e Gatsby

Secondo i [documenti ufficiali di Gatsby 5, hanno compilato un tavolo, per il quale la combinazione di Gatsby WordPress è grande e per chi non lo è. Per motivi di facilità, sto elencando quelli qui. {{LINE_23}} {{LINE_24}} {{LINE_25}} WordPress e Gatsby sono fantastici per {{LINE_27}} {{LINE_28}} {{LINE_29}} Team di contenuti che si sentono a proprio agio con l’esperienza di editing di contenuti WordPress {{LINE_31}} {{LINE_32}} Team di sviluppo che apprezzano l’uso di tecnologie popolari e open source {{LINE_34}} {{LINE_35}} Riprogettare i siti con contenuti già archiviati in wordpress {{LINE_37}} {{LINE_38}} Team che vogliono possedere il proprio stack di dati e tecnologia {{LINE_40}} {{LINE_41}} Flussi di lavoro di controllo degli accessi complessi o restrizioni di modellazione dei contenuti {{LINE_43}} {{LINE_44}} Progetti in cui la sicurezza è importante {{LINE_46}} {{LINE_47}} Progetti ad alta domanda in cui le prestazioni sono fondamentali {{LINE_49}} {{LINE_50}} {{LINE_51}} {{LINE_52}} {{LINE_53}} WordPress e Gatsby non sono fantastici per {{LINE_55}} {{LINE_56}} {{LINE_57}} Team che richiedono l’uso dei temi dell’interfaccia utente di WordPress {{LINE_59}} {{LINE_60}} Coloro che cercano un cloud completamente gestito CMS {{LINE_62}} {{LINE_63}} {{LINE_64}} {{LINE_65}} Oltre a questi punti ufficiali, mi piacerebbe elencare alcuni pro e contro dell’uso di Gatsby WordPress insieme {{LINE_67}} {{LINE_68}} {{LINE_69}} Professionisti {{LINE_71}} {{LINE_72}} {{LINE_73}} Velocità di carico più veloci: siti Web statici si caricano più velocemente della dinamica. Di conseguenza, influisce sulla velocità della tua pagina e la classifica SEO. {{LINE_75}} {{LINE_76}} Meno costi del server: poiché i file statici non necessitano di software speciali, quindi le pagine HTML statiche possono essere servite anche da server più economici. {{LINE_78}} {{LINE_79}} Più sicuro: per i siti statici, non ci sono componenti in movimento di parti, quindi nessuna possibilità per gli hacker di sfruttare il tuo software. {{LINE_81}} {{LINE_82}} {{LINE_83}} {{LINE_84}} {{LINE_85}} {{LINE_86}} {{LINE_87}} Contro {{LINE_89}} {{LINE_90}} {{LINE_91}} Curva di apprendimento: richiede ulteriori competenze per gli sviluppatori. Come imparare reactjs e graphql {{LINE_93}} {{LINE_94}} Solo contenuto statico - se è necessario servire qualsiasi contenuto dinamico. Allora Gatsby non fa per te. Può solo server file statici. Pertanto, non è possibile avere alcun sistema di commento che recupera i dati dal database. {{LINE_96}} {{LINE_97}} {{LINE_98}} {{LINE_99}}

Come usare Gatsby con WordPress

Prima di poter installare Gatsby, è necessario installare Nodejs e NPM nell’ambiente del tuo sito Web.

Passaggio 1 - Installa Gatsby

npm install -g gatsby-cli

Questo comando esegue automaticamente l’installatore. Scarica e installa tutte le dipendenze prima di installare Gatsby. Una volta completato, puoi iniziare a creare il tuo primo sito Web Gatsby.

gatsby new gatsby-site

Questo scaricherà il modello di avviamento di Gatsby e lo posizionerà nella directory/Gatsby-WordPress. Una volta completata l’installazione, è possibile aprire la versione di sviluppo del sito

gatsby develop

Ora, nel tuo browser Web, immettere http: // localhost: 8000 e il modello predefinito dovrebbe aprire.

Modello di avviamento Gatsby

Passaggio 2 - Collega Gatsby a WordPress

In questa sezione della Guida di Gatsby WordPress, collegheremo questo generatore di siti statico a WordPress. Hai un sito Web statico di base, ma devi integrarlo con WordPress. Questo punta il tuo sito Gatsby all’indirizzo del tuo blog di WordPress, consentendo di estrarre i dati più recenti quando si esegue il server di sviluppo. Una volta connesso, Gatsby costruirà un sito Web statico in base al tuo modello attuale. Installa il plug -in Gatsby Source WordPress dal repository NPM.

npm install gatsby-source-wordpress

Passaggio 3 - Configura Gatsby

Metti il ​​seguente codice nel file Gatsby-config.js

module.exports = {
  ...
  plugins: [
    ...,
    {
      resolve: `gatsby-source-wordpress`,
      options: {
        // your WordPress source
        baseurl:  `wpexample.com`,
aliases: -  `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 per indicare il tuo sito Web WordPress. Se il tuo sito Web è ospitato localmente, dopo Baseurl puoi utilizzare Localhost: 8888/WordPress invece dell’URL del tuo sito Web. Dopo aver salvato il file, dovrai creare i modelli di pagina.

Passaggio 4 - Modelli di pagina Build

I modelli di pagina di costruzione consentono a questo generatore di siti di generare un post per ogni pagina sul sito Web WordPress. Il plug -in sorgente tirerà i dati di cui hai bisogno 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 chiamato tutti i dati, Gatsby genererà una pagina per ogni post. Utilizzando il comando sviluppa, è possibile navigare su ogni nuova pagina utilizzando l’URL generato.

Conclusione

In questo tutorial di Gatsby WordPress, abbiamo coperto come generare un sito Web Gatsby da WordPress. Abbiamo imparato quali sono i pro e i contro di questi due software open source. Abbiamo anche trattato come installare e iniziare con l’ambiente di sviluppo di Gatsby. Infine, containerize.com sta scrivendo articoli su ulteriori prodotti open source. Pertanto, rimanete in contatto con la categoria della piattaforma open source Blogging per notizie e aggiornamenti regolari.