Tutorial: Construiește-ți site-ul cu WordPress și Gatsby

Crearea unui site web static cu WordPress este posibilă cu WordPress fără cap. Aceste tipuri de site-uri web se încarcă mai repede, deoarece fișierele statice sunt salvate pe serverul dvs. Întrebarea este cum construiești un site web fără cap cu WordPress?

Aici intervine un generator de site-uri static precum Gatsby. Acești generatori vă ajută să construiți site-uri web statice bogate în funcții în WordPress. Cu toate acestea, trebuie să le integrați corect cu instalarea WordPress pentru a profita la maximum de ele. Această integrare include instalarea, generarea și configurarea WordPress Gatsby.

În acest articol, ne vom uita la ce este Gatsby și de ce ați putea dori să-l utilizați cu WordPress. Apoi vom detalia cum să utilizați Gatsby și dacă ar trebui. Să începem!

Ce este Gatsby?

Mai simplu spus, Gatsby este un generator de site static. Aceasta înseamnă că Gatsby generează fișierele HTML statice care sunt încărcate pe serverul site-ului dvs. Când un vizitator ajunge pe site-ul dvs., aceste fișiere statice sunt trimise browserului său, în locul conținutului dinamic pe care WordPress îl oferă în general.

Pentru a genera aceste fișiere, Gatsby preia date pentru site-ul dvs. dintr-o serie de surse. Acestea includ site-uri web existente, apeluri API și fișiere plate prin GraphQL. Site-ul dvs. web static este apoi construit pe baza configurațiilor pe care le-ați setat.

În comparație cu alte generatoare statice de site, Gatsby este relativ nou. Cu toate acestea, acest lucru nu a împiedicat multe companii să-l încerce. Unul dintre cele mai mari exemple este blogul Airbnb Engineering & Data Science, care este dezvoltat de Gatsby.

De ce să folosiți Gatsby cu WordPress?

Deoarece este posibil să creați un site web static cu WordPress, s-ar putea să vă întrebați de ce ar trebui să utilizați WordPress și Gatsby împreună. În timp ce WordPress este puternic în sine, Gatsby oferă câteva beneficii pe care le-ați putea dori pentru site-ul dvs., inclusiv viteze mai mari și costuri mai mici ale serverului. Înțelegerea avantajelor și dezavantajelor lui Gatsby vă poate ajuta să luați o decizie în cunoștință de cauză.

Avantajele folosirii lui Gatsby

Gatsby oferă o serie de beneficii de care poate profita orice site web, inclusiv:

• Viteze de încărcare mai mari. Site-urile web statice se încarcă mai repede decât cele dinamice, iar acest lucru vă poate afecta optimizarea pentru motoarele de căutare (SEO). Viteza de încărcare a paginii este un semnal folosit de motoarele de căutare și afectează ratele de respingere ale site-ului dvs.
• Costuri reduse cu serverul. Site-urile web dinamice necesită stive de tehnologie și servere compatibile. Site-urile web statice nu și le puteți găzdui pe orice server. Acest lucru vă poate reduce costurile serverului.
• Securitate îmbunătățită. Site-urile web statice oferă securitate îmbunătățită. Fișierele HTML statice difuzate nu oferă prea multe pentru hackeri să lucreze. Dacă aceste fișiere sunt pierdute din orice motiv, le puteți regenera și cu Gatsby.

Site-ul dvs. poate beneficia de toate aceste avantaje. Cu toate acestea, ar trebui să le cântăriți față de dezavantajele utilizării lui Gatsby.

Contra folosirii lui Gatsby

Niciun sistem software nu este perfect, iar Gatsby are câteva dezavantaje despre care trebuie să știți:

• Sunt necesare cunoștințe tehnice. Gatsby este construit pe ReactJS și folosește GraphQL. Pentru a-l utiliza, este necesară o anumită înțelegere a JavaScript. De asemenea, va trebui să aveți cunoștințe de bază despre GraphQL pentru a crea un site web.
• Fără conținut dinamic. Gatsby generează doar site-uri web statice. Dacă doriți conținut dinamic, cum ar fi formularele de contact, acestea trebuie să fie redirecționate printr-un furnizor terță parte.

În timp ce mulți dezvoltatori consideră că avantajele lui Gatsby depășesc dezavantajele, ambele sunt importante de înțeles în avans.

Cum folosesc Gatsby cu WordPress?

Configurarea lui Gatsby poate dura ceva timp și există anumiți pași pe care va trebui să îi faceți. Trebuie să instalați Gatsby înainte de a începe să vă generați site-ul și să îl configurați. În plus, există câteva considerații inițiale de făcut.

Pasul 1: Verificați cerințele preliminare

Înainte de a putea instala Gatsby, trebuie să instalați NodeJS și npm în mediul site-ului dvs. web. Git este, de asemenea, necesar pentru gestionarea codului. Pașii de instalare a cerințelor preliminare variază, în funcție de sistemul de operare pe care îl rulați.

Dacă aveți Windows, puteți instala NodeJS și Git prin programul de instalare de pe pagina de descărcare. Același lucru este posibil și cu Mac. Cu toate acestea, dacă rulați Linux, este necesar un program de instalare a pachetelor, cum ar fi apt.

Pasul 2: Instalați Gatsby

După instalarea NodeJS și Git, puteți începe să instalați Gatsby. Cea mai ușoară metodă de a face acest lucru este să utilizați următoarea comandă în terminalul software:

 npm install -g gatsby-cli

Această comandă rulează programul de instalare automat. Mai întâi va descărca și instala toate dependențele înainte de a instala Gatsby. După ce ați terminat, puteți începe să vă creați primul site web Gatsby.

Pasul 3: Creați un site Gatsby

Pentru a vă crea site-ul Gatsby, va trebui să rulați următoarea comandă:

 gatsby new gatsby-site

Această comandă clonează șablonul de pornire Gatsby și îl plasează în directorul /gatsby-wordpress . Odată ce clonarea și instalarea sunt finalizate, puteți deschide versiunea de dezvoltare a site-ului. Acest lucru se face folosind următoarea comandă:

 gatsby develop

În timp ce mediul de dezvoltare rulează, puteți vizita local noul site web. În browserul dvs. web, introduceți http://localhost:8000 și șablonul implicit ar trebui să se deschidă.

Dacă vedeți această pagină, puteți începe să vă construiți site-ul. Aceasta înseamnă crearea fișierelor statice în directorul public al site-ului respectiv. Următoarea comandă începe automat producția de fișiere statice:

 gatsby build

Această comandă generează, de asemenea, pachetele de cod JavaScript pre-rutare pentru site-ul dvs. web. Puteți utiliza apoi comanda serve pentru a afișa local noul site web:

 gatsby serve

Această comandă va funcționa numai dacă ați rulat deja comanda de compilare.

Pasul 4: Conectați Gatsby la WordPress

Acum aveți un site web static de bază, dar trebuie să îl integrați cu WordPress. Acest lucru indică site-ul dvs. Gatsby către adresa blogului dvs. WordPress, permițându-i să extragă cele mai recente date atunci când rulați serverul de dezvoltare. Odată conectat, Gatsby va construi un site web static bazat pe șablonul dvs. WordPress actual.

Pentru a le conecta pe cele două, va trebui să instalați pluginul Gatsby pentru WordPress. Următoarea comandă se va ocupa de asta:

 npm install gatsby-source-wordpress

După instalarea pluginului, puteți începe configurarea Gatsby.

Pasul 5: Configurați Gatsby

Pentru a configura Gatsby, trebuie să lucrați cu fișierul gatsby-config.js . În acel fișier, adăugați următorul cod:

 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 } }, ] }

Actualizați acest cod pentru a indica site-ul dvs. WordPress. Dacă site-ul dvs. este găzduit local, după baseUrl puteți utiliza localhost:8888/wordpress în loc de adresa URL a site-ului dvs. După salvarea fișierului, va trebui să creați șabloanele de pagină.

Pasul 6: Creați șabloane de pagină

Crearea de șabloane de pagină îi permite lui Gatsby să genereze o postare pentru fiecare pagină de pe site-ul dvs. WordPress. Pluginul sursă va extrage datele de care aveți nevoie din WordPress pentru aceste pagini, dar va trebui să creați șablonul de design.

În fișierul dvs. gatsby-node.js , adăugați următorul cod:

 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, }, }) }) }

După ce a apelat toate datele din WordPress, Gatsby va genera o pagină pentru fiecare postare. Folosind comanda develop, puteți naviga la fiecare pagină nouă folosind adresa URL generată.

Ar trebui să folosesc Gatsby pentru WordPress?

Deși Gatsby poate îmbunătăți viteza și securitatea site-ului dvs., nu este alegerea potrivită pentru toată lumea. Dacă site-ul tău web are conținut static care nu se schimbă des, Gatsby poate fi benefic. Cu toate acestea, dacă aveți nevoie de conținut dinamic pe site-ul dvs., WordPress tradițional ar putea fi alegerea mai bună.

Faceți cel mai mult cu site-ul dvs. pe WP Engine

Gatsby este un generator de site web static eficient pe care îl puteți integra cu ușurință cu WordPress. Există pași pe care trebuie să îi urmați pentru a instala și configura sistemul. De asemenea, trebuie să aveți cunoștințe despre Gatsby și GraphQL înainte de a începe.

Conținutul static poate îmbunătăți viteza și securitatea site-ului dvs., dar aveți nevoie și de gazda potrivită. WP Engine oferă cele mai bune resurse pentru site-ul dvs. pentru a crea o experiență digitală excelentă. Acest lucru vă lasă mai mult timp pentru a vă concentra pe dezvoltare!