Sådan bygger du en hjemmeside med Gatsby og WordPress

I den moderne æra inden for webudvikling er hastighed og ydeevne ikke bare luksus; de er nødvendigheder. Udviklere og indholdsskabere søger konstant måder at kombinere brugervenligheden af ​​et traditionelt Content Management System (CMS) med den høje ydeevne af moderne frontend-teknologier. Det er her, den kraftfulde kombination af Gatsby og WordPress kommer i spil.

Med en afkoblet arkitektur kan du bruge et WordPress-websted som et headless CMS til at administrere dit indhold, mens Gatsby håndterer præsentationslaget. Denne tilgang giver dig mulighed for at bygge et Gatsby-websted, der er lynhurtigt, yderst sikkert og optimeret til søgemaskiner.

Denne guide gennemgår opbygningen af ​​en højtydende Gatsby- og WordPress-hjemmeside. Vi dækker alt fra opsætning af din WordPress-installation til implementering af statiske HTML-filer til et globalt Content Delivery Network (CDN).

TL;DR: Opbygning af en højtydende Gatsby- og WordPress-hjemmeside

• Brug WordPress som et headless CMS og Gatsby som en statisk hjemmesidegenerator for at kombinere fleksibilitet i indholdsstyring med lynhurtige sideindlæsninger.

• Forudbygg sider med Gatsby fra WordPress-data via GraphQL for næsten øjeblikkelig gengivelse, forbedret SEO og højere Lighthouse-scorer.

• Optimer dit websted med SEO-bestpraksis , responsive billeder og metadata fra plugins som Yoast SEO ved hjælp af WPGraphQL.

• Implementer på statiske hostingplatforme som Netlify, Vercel eller Gatsby Cloud med kontinuerlig implementering for at holde indholdet opdateret automatisk.

Hvorfor vælge Gatsby med WordPress til din hjemmeside?

En sammenlægning af Gatsby og WordPress tilbyder "det bedste fra begge verdener". Du får den omfattende redigeringsoplevelse fra verdens mest populære CMS og hastigheden fra en React-baseret statisk hjemmesidegenerator.

Forbedr hjemmesidens hastighed og ydeevne med Gatsby

Et standard WordPress-websted genererer sider dynamisk, hver gang en bruger anmoder om dem. Dette kræver, at serveren forespørger databasen, behandler PHP-scripts og gengiver HTML undervejs. Selvom caching hjælper, resulterer det ofte i langsommere indlæsningstider under tung trafik .

I modsætning hertil forudbygger et Gatsby-websted sider til statiske HTML-filer under kompileringstiden. Når en bruger besøger dit websted, vises de statiske filer øjeblikkeligt uden nogen form for backend-behandling. Dette resulterer i næsten øjeblikkelig sideindlæsning.

De fleste Gatsby-websteder opnår betydeligt højere Lighthouse-scorer sammenlignet med traditionelle dynamiske websteder . Ved at vise præ-renderet indhold sikrer du, at dine besøgende får den hurtigst mulige oplevelse.

Brug WordPress som et fleksibelt headless CMS

For marketingteams og bloggere WordPress-backend et velkendt og kraftfuldt værktøj. Det tilbyder en intuitiv brugerflade til administration af WordPress-blogindlæg, -sider og -medier. Ved at bruge WordPress som et fleksibelt headless CMS adskiller du indholdsoprettelsen fra koden.

I denne arkitektur henter Gatsby data fra WordPress API'en (specifikt via GraphQL) og bygger webstedet.

Redaktører kan fortsætte med at bruge det WordPress-dashboard, de elsker, ved hjælp af WordPress-plugins til SEO og indholdsstyring, uden at bekymre sig om frontend-infrastrukturen.

Denne adskillelse sikrer, at udviklere kan fokusere på brugergrænsefladen, mens indholdsskabere fokuserer på indholdet af opslaget.

Forbedr skalerbarhed og sikkerhed med statiske websteder

Statiske websteder er i sagens natur mere sikre end traditionelle dynamiske websteder. Da der ikke kører nogen database- eller serversidekode på det offentligt vendte websted, er der ingen angrebsflade for SQL-injektion eller ondsindet PHP-udførelse.

Din WordPress-installation kan enten være placeret på en privat server eller bag en firewall, helt skjult for offentligheden.

Derudover er statiske sider nemme at skalere. Da outputtet består af simpel HTML, CSS og JavaScript, kan det hostes på et CDN.

Det betyder, at din Gatsby- og WordPress-hjemmeside kan håndtere massive trafikstigninger uden at gå ned, da de statiske filer er distribueret på tværs af servere verden over.

Forudsætninger for at bygge en Gatsby- og WordPress-hjemmeside

Før du dykker ned i koden, skal du sørge for at have de nødvendige værktøjer installeret. Du skal have en grundlæggende forståelse af React og kommandolinjen.

• Node.js og npm: Gatsby kræver Node.js. Download og installer den nyeste LTS-version fra den officielle Node.js-hjemmeside.

• Gatsby CLI: Dette værktøj automatiserer oprettelsen af ​​et nyt Gatsby-websted. Installer det globalt ved hjælp af terminalen: npm install -g gatsby-cli

• WordPress-installation: Du skal bruge en live WordPress-instans. Denne kan hostes lokalt (ved hjælp af værktøjer som Local by Flywheel) eller på en webhost.

• WPGraphQL-plugin: For at Gatsby kan trække data effektivt, skal du installere WPGraphQL-plugin'et på dit WordPress-websted. Dette plugin omdanner dit WordPress-websted til en GraphQL API, som er det forespørgselssprog, Gatsby bruger.

• WPGatsby-plugin: Dette plugin fungerer sammen med WPGraphQL for at holde Gatsby-kildekoden til WordPress synkroniseret og aktiverer funktioner som forhåndsvisning af indhold.

Trin til at bygge en hjemmeside med Gatsby og WordPress

Nu hvor forudsætningerne er opfyldt, lad os se på den trinvise vejledning til at oprette din Gatsby-hjemmeside.

Trin 1: Opsætning af dit Gatsby-projekt med WordPress

Det første trin er at initialisere projektet og forbinde det til din datakilde.

Initialiser et nyt Gatsby-websted ved hjælp af WordPress-startskabeloner

Gatsby CLI gør det nemt at opbygge et nyt projekt. Du kan starte fra bunden eller bruge en skabelon. I denne guide opretter vi et standardwebsted og konfigurerer plugin'et manuelt for bedre at forstå processen.

Åbn din terminal og kør:

gatsby ny my-wordpress-gatsby-side cd my-wordpress-gatsby-side

Denne kommando opretter en mappe med alle de nødvendige konfigurationsfiler. Installer derefter Gatsby- kildekode-plugins for at oprette forbindelse til WordPress:

npm installation af gatsby-source-wordpress

Konfigurer gatsby-config.js til at hente data fra WordPress

Åbn filen gatsby-config.js i din kodeeditor. Dette er kernen i din Gatsby-konfiguration. Du skal tilføje plugin'et gatsby-source-wordpress til plugins-arrayet.

Dette kildekode-plugin forbinder dit Gatsby-projekt med WordPress-kildekoden i basis-URL'en.

modul.eksport = { plugins: [ { løsning: `gatsby-source-wordpress`, indstillinger: { url: `https://din-wordpress-site.com/graphql`, }, }, `gatsby-plugin-billede`, `gatsby-plugin-sharp`, `gatsby-transformer-sharp`, ], }

Erstat URL'en med dit faktiske WordPress API-slutpunkt . Denne konfiguration fortæller Gatsby, hvor den skal søge efter WordPress-data.

Start udviklingsserveren og udforsk GraphQL-data

Start nu udviklingsserveren for at bekræfte forbindelsen.

Gatsby udvikler

Når serveren starter, kan du tilgå GraphiQL Explorer (normalt på http://localhost:8000/___graphql). Dette værktøj giver dig mulighed for at inspicere alle data, der hentes fra din WordPress-backend.

Du kan skrive en GraphQL-forespørgsel for at se dine WordPress-indlæg, sider og forfattere. Dette bekræfter, at Gatsby henter data korrekt.

Trin 2: Opbygning af dynamiske sider fra WordPress-indhold

Når dataene er forbundet, er den næste fase programmatisk oprettelse af sider . Dette omdanner dine WordPress-blogindlæg til statiske sider.

Effektiv forespørgsel på WordPress-indhold ved hjælp af GraphQL

For at generere sider skal du først forespørge dataene. Vi bruger filen gatsby-node.js til at styre, hvordan Gatsby genererer sider.

Du skal skrive en forespørgsel for at udvælge alle de data, der er nødvendige for dine sider, såsom ID, slug og URI.

// gatsby-node.js exports.createPages = async ({ actions, graphql, reporter }) => { const { createPage } = actions const result = await graphql(` { allWpPost { nodes { id uri } } } `) if (result.errors) { reporter.panicOnBuild("Fejl ved indlæsning af indhold fra WordPress", result.errors) return } const posts = result.data.allWpPost.nodes // ... logik for oprettelse af side følger }

Opret genanvendelige skabeloner til annoncer og enkeltindlæg

Du kan ikke oprette en indlægsside uden en skabelon. Opret en fil på src/templates/blog-post.js. Denne komponent vil gengive det individuelle blogindlæg.

Inde i src/templates/blog-post.js importerer du layoutkomponenter og eksporterer en forespørgsel, der henter det specifikke opslagsindhold baseret på det ID, der er sendt fra gatsby-node.js.

import React from "react" import { graphql } from "gatsby" import Layout from "../components/layout" const BlogPost = ({ data }) => { const post = data.wpPost return (}    * ...<Layout><h1> {opslag.titel}</h1><div dangerouslySetInnerHTML={{ __html: post.content }} /></Layout> ) } export const query = graphql` query($id: String!) { wpPost(id: { eq: $id }) { title content } } ` eksporter standard blogindlæg

Tilbage i gatsby-node.js, iterer gennem indlæggene og brug handlingen createPage. Peg komponentstien til din src/templates/blog-post.js-fil.

Naviger mellem sider ved hjælp af Gatsby-linkkomponenten

For at navigere mellem dine nye sider uden at genindlæse browseren skal du bruge Link-komponenten. I din indeksside eller arkivskabeloner, hvor du viser WordPress-blogindlæg sorteret efter dato, skal du erstatte standardankertags med Gatsby Links.

import { Link } fra "gatsby" // Inde i din komponentmapping gennem indlæg<Link to={post.uri}><h2> {opslag.titel}</h2></Link>

Dette sikrer, at din Gatsby- og WordPress-hjemmeside opfører sig som en Single Page Application (SPA), der indlæser indhold med det samme, når brugeren klikker.

Trin 3: SEO-optimering til din Gatsby- og WordPress-hjemmeside

En af de største fordele ved en statisk hjemmesidegenerator er dens SEO-fordele . Du skal dog aktivt konfigurere den.

Implementer bedste praksis for centrale SEO-metoder i Gatsby

Du bør oprette en genanvendelig SEO-komponent. Denne komponent vil håndtere metatags i de statiske HTML-filer.

Importer SEO-komponenter til hver sideskabelon.

eksportkonst Hoved = ({data}) =><SEO title="{data.wpPost.title}" />

Forbedr metadata ved hjælp af WPGraphQL SEO-plugins

Hvis du bruger AIOSEO eller RankMath på din WordPress-blog, kan du trække disse metadata ind i Gatsby. Installer plugin'et wp-graphql-rankmath-seo på WordPress.

Dette eksponerer et SEO-felt i din GraphQL-forespørgsel. Du kan nu få adgang til de brugerdefinerede metabeskrivelser og titler, der er angivet i WordPress-dashboardet. Dette sikrer, at din indholdsstrategi i CMS'et oversættes perfekt til Gatsby-webstedet.

Optimer billeder og medier for forbedret søgesynlighed

Store billeder kan skade dine Core Web Vitals . Gatsby udmærker sig ved billedoptimering. Ved hjælp af gatsby-plugin-image-plugin'et kan du automatisk generere responsive billeder, der ikke kan indlæses hurtigt.

Når du forespørger på WordPress-indlæg, skal du anmode om gatsbyImage-feltet for dine fremhævede billeder. Gatsby vil behandle medierne fra WordPress-kildens baseurl og oprette optimerede versioner i den offentlige mappe under opbygningen.

Trin 4: Implementering og hosting af dit Gatsby-websted

Dit Gatsby-projekt er bygget; nu skal det lanceres.

Byg en produktionsklar Gatsby-hjemmeside

For at forberede dit websted til implementering skal du køre build-kommandoen: gatsby build

Denne kommando udløser Gatsby-byggeprocessen. Den kompilerer dine React-komponenter, henter data fra WordPress og udskriver rene statiske filer (HTML, CSS, JS) i den offentlige mappe. Du kan teste dette lokalt ved hjælp af Gatsby-serveren.

Vælg den bedste hostingplatform og CDN til hurtig levering

Du kan hoste WordPress hvor som helst, men dit Gatsby-websted bør være placeret på en specialiseret statisk vært. Populære muligheder inkluderer Netlify, Vercel eller Gatsby Cloud.

Disse platforme er optimeret til statiske websteder. Du forbinder blot dit GitHub-repository. Hver gang du pusher kode, kører platformen en Gatsby-build og implementerer de nye statiske sider på et globalt CDN.

Opsæt kontinuerlig implementering med WordPress Webhooks

Du ønsker, at din hjemmeside opdateres, hver gang du udgiver et nyt blogindlæg på WordPress. Du ønsker ikke at køre en build manuelt hver gang.

For at automatisere dette skal du konfigurere WordPress webhooks.

• Gå til din hostingudbyder (f.eks. Netlify) og opret en “Build Hook” URL.
• I WordPress skal du installere WPGatsby-pluginnet eller et webhook-plugin.
• Indsæt Build Hook-URL'en i indstillingerne.

Når du nu klikker på "Opdater" eller "Udgiv" på et WordPress-indlæg, udløser det en build på din host. Dit Gatsby- og WordPress-websted forbliver automatisk synkroniseret.

Trin 5: Vedligeholdelse og opdatering af dit Gatsby- og WordPress-websted

Vedligeholdelse er afgørende for langsigtet sundhed.

• Hold WordPress- og Gatsby-afhængigheder opdaterede : Opdater regelmæssigt din WordPress-installation og dine plugins for at rette sikkerhedssårbarheder . Hold ligeledes dine Gatsby-projektafhængigheder opdaterede. Brug npm outdated til at tjekke for ældre pakker. Det er vigtigt at opdatere Gatsby-kildekoden til WordPress-pluginet for at sikre kompatibilitet med de seneste WordPress API-ændringer.

• Overvåg regelmæssigt websitets ydeevne og SEO-målinger : Brug værktøjer som Google Search Console og PageSpeed ​​Insights. Da du serverer statiske filer, bør dine serverresponstider være lave. Hvis du ser præstationsdyk, skal du kontrollere, om du indlæser for mange store tredjepartsscripts eller uoptimerede aktiver i din CSS-fil.

• Administrer indholdsopdateringer og udløs Gatsby-genopbygninger : Nogle gange ændrer redaktører brugerdefinerede felter eller menustrukturer. Sørg for, at dit team forstår, at ændringer i WordPress-backend kan tage et par minutter, før de vises på Gatsby-webstedet på grund af byggetiden. Brug af Gatsby Cloud eller hosts med trinvise builds kan reducere denne ventetid betydeligt.

Almindelige udfordringer ved at bygge med Gatsby og WordPress

Selvom Gatsby- og WordPress-stakken er kraftfuld, kommer den med udfordringer.

• Byggetider: For eksisterende hjemmesider med tusindvis af WordPress-indlæg kan Gatsby-byggeprocessen være langsom. Det tager tid at hente alle dataene og generere tusindvis af statiske sider. Trinvise builds hjælper med at løse dette.

• Forhåndsvisning af indhold: I et traditionelt WordPress-tema kan du øjeblikkeligt forhåndsvise et udkast. Med en headless-opsætning skal du konfigurere forhåndsvisningslogik ved hjælp af WPGatsby-pluginnet, så redaktører kan se deres opslagsindhold, før det går live.

• Plugin-kompatibilitet: Ikke alle WordPress-plugins fungerer med en headless-opsætning. Visuelle builders (som Elementor) eller frontend-specifikke plugins fungerer generelt ikke, fordi Gatsby styrer frontend'en. Du er afhængig af WordPress-dataene, ikke den visuelle gengivelse.

Konklusion: Fordele ved Gatsby og WordPress til moderne hjemmesider

Ved at bygge en Gatsby- og WordPress-hjemmeside kan du udnytte styrkerne ved internettets to mest dominerende teknologier. Du styrker dit indholdsteam med den velkendte WordPress-backend, samtidig med at du leverer en avanceret brugeroplevelse med en Gatsby-frontend.

Resultatet er en Gatsby-hjemmeside, der er sikker, skalerbar og utrolig hurtig. Ved at afkoble indholdsstyringssystemet fra displaylaget fremtidssikrer du din digitale tilstedeværelse.

Uanset om du migrerer eksisterende websteder eller starter et nyt Gatsby-websted, giver denne arkitektur et solidt fundament for SEO-succes og brugertilfredshed.

Med den grundlæggende idé og de trin, der er beskrevet ovenfor, er du klar til at modernisere din webudviklingsworkflow . Omfavn kraften ved statiske websteder og fleksibiliteten ved WordPress for at bygge noget virkelig exceptionelt.

Ofte stillede spørgsmål om oprettelse af et websted med Gatsby og WordPress