Hur man bygger en webbplats med Gatsby och WordPress

I den moderna eran av webbutveckling är hastighet och prestanda inte bara lyx; de är nödvändigheter. Utvecklare och innehållsskapare söker ständigt efter sätt att kombinera användarvänligheten hos ett traditionellt innehållshanteringssystem (CMS) med den höga prestandan hos moderna frontend-tekniker. Det är här den kraftfulla kombinationen av Gatsby och WordPress kommer in i bilden.

Genom frikopplad arkitektur kan du använda en WordPress-webbplats som ett headless CMS för att hantera ditt innehåll samtidigt som Gatsby hanterar presentationslagret. Denna metod gör att du kan bygga en Gatsby-webbplats som är blixtsnabb, mycket säker och optimerad för sökmotorer.

Den här guiden guidar dig genom hur du bygger en högpresterande Gatsby- och WordPress-webbplats. Vi kommer att täcka allt från att konfigurera din WordPress-installation till att distribuera statiska HTML-filer till ett globalt Content Delivery Network (CDN).

TL;DR: Bygga en högpresterande Gatsby- och WordPress-webbplats

• Använd WordPress som ett headless CMS och Gatsby som en statisk webbplatsgenerator för att kombinera flexibilitet för innehållshantering med blixtsnabba sidladdningar.

• Förbygg sidor med Gatsby från WordPress-data via GraphQL för nästan omedelbar rendering, förbättrad SEO och högre Lighthouse-poäng.

• Optimera din webbplats med SEO-tips , responsiva bilder och metadata från plugins som Yoast SEO med hjälp av WPGraphQL.

• Distribuera till statiska hostingplattformar som Netlify, Vercel eller Gatsby Cloud med kontinuerlig distribution för att hålla innehållet uppdaterat automatiskt.

Varför välja Gatsby med WordPress för din webbplats?

Att slå samman Gatsby och WordPress erbjuder "det bästa av två världar". Du får den omfattande redigeringsupplevelsen hos världens mest populära CMS och hastigheten hos en React-baserad statisk webbplatsgenerator.

Förbättra webbplatsens hastighet och prestanda med Gatsby

En vanlig WordPress-webbplats genererar sidor dynamiskt varje gång en användare begär dem. Detta kräver att servern frågar databasen, bearbetar PHP-skript och renderar HTML i realtid. Även om cachning hjälper, resulterar det ofta i långsammare laddningstider vid hög trafik .

Däremot bygger en Gatsby-webbplats sidor i förväg till statiska HTML-filer under kompileringstiden. När en användare besöker din webbplats visas de statiska filerna direkt utan någon backend-bearbetning. Detta resulterar i nästan omedelbara sidladdningar.

De flesta Gatsby-webbplatser uppnår betydligt högre Lighthouse-poäng jämfört med traditionella dynamiska webbplatser . Genom att visa förrenderat innehåll säkerställer du att dina besökare får den snabbast möjliga upplevelsen.

Använd WordPress som ett flexibelt headless CMS

För marknadsföringsteam och bloggare WordPress backend ett välbekant och kraftfullt verktyg. Det erbjuder ett intuitivt gränssnitt för att hantera WordPress blogginlägg, sidor och media. Genom att använda WordPress som ett flexibelt headless CMS separerar du innehållsskapandet från koden.

I den här arkitekturen hämtar Gatsby data från WordPress API (specifikt via GraphQL) och bygger webbplatsen.

Redaktörer kan fortsätta använda WordPress-instrumentpanelen de älskar, med hjälp av WordPress-plugins för SEO och innehållshantering, utan att behöva oroa sig för frontend-infrastrukturen.

Denna separation säkerställer att utvecklare kan fokusera på användargränssnittet medan innehållsskapare fokuserar på innehållet i inlägget.

Förbättra skalbarhet och säkerhet med statiska webbplatser

Statiska webbplatser är i sig säkrare än traditionella dynamiska webbplatser. Eftersom ingen databas- eller serverkod körs på den offentliga webbplatsen finns det ingen attackyta för SQL-injektion eller skadlig PHP-körning.

Din WordPress-installation kan ligga på en privat server eller bakom en brandvägg, helt dold för allmänheten.

Dessutom är statiska sidor enkla att skala. Eftersom utdata består av enkel HTML, CSS och JavaScript kan den lagras på ett CDN.

Det här innebär att din Gatsby- och WordPress-webbplats kan hantera massiva trafiktoppar utan att krascha, eftersom de statiska filerna är distribuerade över servrar över hela världen.

Förutsättningar för att bygga en Gatsby- och WordPress-webbplats

Innan du går in i koden, se till att du har de nödvändiga verktygen installerade. Du behöver en grundläggande förståelse för React och kommandoraden.

• Node.js och npm: Gatsby kräver Node.js. Ladda ner och installera den senaste LTS-versionen från den officiella Node.js-webbplatsen.

• Gatsby CLI: Det här verktyget automatiserar skapandet av en ny Gatsby-webbplats. Installera det globalt med hjälp av terminalen: npm install -g gatsby-cli

• WordPress-installation: Du behöver en aktiv WordPress-instans. Denna kan vara lokal (med hjälp av verktyg som Local by Flywheel) eller på ett webbhotell.

• WPGraphQL-plugin: För att Gatsby ska kunna hämta data effektivt, installera WPGraphQL-pluginet på din WordPress-webbplats. Detta plugin förvandlar din WordPress-webbplats till ett GraphQL API, vilket är det frågespråk som Gatsby använder.

• WPGatsby-plugin: Detta plugin fungerar tillsammans med WPGraphQL för att hålla Gatsby-källkodsschemat i WordPress synkroniserat och möjliggör funktioner som förhandsgranskning av innehåll.

Steg för att bygga en webbplats med Gatsby och WordPress

Nu när förutsättningarna är uppfyllda, låt oss titta på steg-för-steg-guiden för att skapa din Gatsby-webbplats.

Steg 1: Konfigurera ditt Gatsby-projekt med WordPress

Det första steget är att initiera projektet och ansluta det till din datakälla.

Initiera en ny Gatsby-webbplats med hjälp av WordPress-startmallar

Gatsby CLI gör det enkelt att bygga upp ett nytt projekt. Du kan börja från grunden eller använda en startmall. I den här guiden kommer vi att skapa en standardwebbplats och manuellt konfigurera plugin-programmet för att förstå processen bättre.

Öppna din terminal och kör:

gatsby ny my-wordpress-gatsby-webbplats cd my-wordpress-gatsby-webbplats

Det här kommandot skapar en katalog med alla nödvändiga konfigurationsfiler. Installera sedan Gatsby -källkodsplugins för att ansluta till WordPress:

npm installera gatsby-source-wordpress

Konfigurera gatsby-config.js för att hämta data från WordPress

Öppna filen gatsby-config.js i din kodredigerare. Detta är kärnan i din Gatsby-konfiguration. Du måste lägga till plugin-programmet gatsby-source-wordpress i plugins-arrayen.

Detta källkods-plugin kopplar ditt Gatsby-projekt till WordPress källkodsbas-URL.

module.exports = { plugins: [ { resolve: `gatsby-source-wordpress`, options: { url: `https://your-wordpress-site.com/graphql`, }, }, `gatsby-plugin-image`, `gatsby-plugin-sharp`, `gatsby-transformer-sharp`, ], }

Ersätt URL:en med din faktiska WordPress API-slutpunkt . Den här konfigurationen anger för Gatsby var den ska leta efter WordPress-data.

Starta utvecklingsservern och utforska GraphQL-data

Starta nu utvecklingsservern för att verifiera anslutningen.

gatsby utveckla

När servern har startat kan du komma åt GraphiQL-utforskaren (vanligtvis på http://localhost:8000/___graphql). Det här verktyget låter dig granska all data som hämtas från din WordPress-backend.

Du kan skriva en GraphQL-fråga för att se dina WordPress-inlägg, sidor och författare. Detta verifierar att Gatsby hämtar data korrekt.

Steg 2: Bygga dynamiska sidor från WordPress-innehåll

När datan är ansluten är nästa fas att programmatiskt skapa sidor . Detta omvandlar dina WordPress-blogginlägg till statiska sidor.

Effektivt söka efter WordPress-innehåll med GraphQL

För att generera sidor måste du först fråga ut data. Vi använder filen gatsby-node.js för att styra hur Gatsby genererar sidor.

Du skriver en fråga för att välja all data som behövs för dina sidor, till exempel ID, slug och 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("Fel vid laddning av innehåll från WordPress", result.errors) return } const posts = result.data.allWpPost.nodes // ... logiken för att skapa sidan följer }

Skapa återanvändbara listnings- och enskilt inläggsmallar

Du kan inte bygga en inläggssida utan en mall. Skapa en fil på src/templates/blog-post.js. Den här komponenten kommer att rendera det enskilda blogginlägget.

Inuti src/templates/blog-post.js importerar du layoutkomponenter och exporterar en fråga som hämtar det specifika inläggets innehåll baserat på ID:t som skickats från gatsby-node.js.

importera React från "react" import { graphql } från "gatsby" importera Layout från "../components/layout" const BlogPost = ({ data }) => { const post = data.wpPost return (}<Layout><h1> {inläggstitel}</h1><div dangerouslySetInnerHTML={{ __html: post.content }} /></Layout> ) } export const query = graphql` query($id: String!) { wpPost(id: { eq: $id }) { titel innehåll } } ` exportera standardblogginlägg

Tillbaka i gatsby-node.js, iterera genom inläggen och använd createPage-åtgärden. Peka komponentens sökväg till din src/templates/blog-post.js-fil.

Navigera mellan sidor med hjälp av Gatsby-länkkomponenten

För att navigera mellan dina nya sidor utan att ladda om webbläsaren, använd länkkomponenten. I dina indexsidor eller arkivmallar, där du listar WordPress-blogginlägg sorterade efter datum, ersätt vanliga ankartaggar med Gatsby-länkar.

importera {Länk} från "gatsby" // Inuti din komponentmappning genom inlägg<Link to={post.uri}><h2> {inläggstitel}</h2></Link>

Detta säkerställer att din Gatsby- och WordPress-webbplats fungerar som en Single Page Application (SPA) och laddar innehåll direkt när användaren klickar.

Steg 3: SEO-optimering för din Gatsby- och WordPress-webbplats

En av de största fördelarna med en statisk webbplatsgenerator är dess SEO-fördelar . Du måste dock aktivt konfigurera den.

Implementera bästa SEO-metoder i Gatsby

Du bör skapa en återanvändbar SEO-komponent. Denna komponent kommer att hantera funktionen metataggar i de statiska HTML-filerna.

Importera SEO-komponenter till varje sidmall.

exportera konstant Huvud = ({ data }) =><SEO title="{data.wpPost.title}" />

Förbättra metadata med hjälp av WPGraphQL SEO-plugins

Om du använder AIOSEO eller RankMath på din WordPress-blogg kan du hämta den metadatan till Gatsby. Installera pluginet wp-graphql-rankmath-seo på WordPress.

Detta exponerar ett SEO-fält i din GraphQL-fråga. Du kan nu komma åt de anpassade metabeskrivningarna och titlarna som ställts in i WordPress-instrumentpanelen. Detta säkerställer att din innehållsstrategi i CMS-systemet översätts perfekt till Gatsby-webbplatsen.

Optimera bilder och media för förbättrad söksynlighet

Stora bilder kan skada dina Core Web Vitals . Gatsby utmärker sig på bildoptimering. Med hjälp av pluginet gatsby-plugin-image kan du automatiskt generera responsiva bilder som laddas snabbt.

När du frågar efter WordPress-inlägg, begär fältet gatsbyImage för dina utvalda bilder. Gatsby kommer att bearbeta media från WordPress-källkoden basurl och skapa optimerade versioner i den publika mappen under byggprocessen.

Steg 4: Implementera och hosta din Gatsby-webbplats

Ditt Gatsby-projekt är klart; nu måste det lanseras.

Bygg en produktionsklar Gatsby-webbplats

För att förbereda din webbplats för driftsättning, kör build-kommandot: gatsby build

Det här kommandot utlöser Gatsby-byggprocessen. Det kompilerar dina React-komponenter, hämtar data från WordPress och matar ut rena statiska filer (HTML, CSS, JS) till den publika katalogen. Du kan testa detta lokalt med Gatsby-serve.

Välj den bästa webbhotellsplattformen och CDN:et för snabb leverans

Du kan hosta WordPress var som helst, men din Gatsby-webbplats bör finnas på en specialiserad statisk webbhotell. Populära alternativ inkluderar Netlify, Vercel eller Gatsby Cloud.

Dessa plattformar är optimerade för statiska webbplatser. Du ansluter helt enkelt ditt GitHub-arkiv. Varje gång du skickar kod kör plattformen en Gatsby-version och distribuerar de nya statiska sidorna till ett globalt CDN.

Konfigurera kontinuerlig distribution med WordPress Webhooks

Du vill att din webbplats ska uppdateras varje gång du publicerar ett nytt blogginlägg på WordPress. Du vill inte köra en version manuellt varje gång.

För att automatisera detta, konfigurera WordPress webhooks.

• Gå till din webbhotellsleverantör (t.ex. Netlify) och skapa en "Build Hook"-URL.
• I WordPress, installera WPGatsby-pluginet eller ett webhook-plugin.
• Klistra in Build Hook-URL:en i inställningarna.

Nu, varje gång du klickar på "Uppdatera" eller "Publicera" på ett WordPress-inlägg, utlöses en version på din webbhotell. Din Gatsby- och WordPress-webbplats synkroniseras automatiskt.

Steg 5: Underhålla och uppdatera din Gatsby- och WordPress-webbplats

Underhåll är avgörande för långsiktig hälsa.

• Håll WordPress- och Gatsby-beroenden uppdaterade : Uppdatera regelbundet din WordPress-installation och dina plugins för att korrigera säkerhetsbrister . Håll på samma sätt dina Gatsby-projektberoenden uppdaterade. Använd npm outdated för att söka efter äldre paket. Att uppdatera Gatsby-källkoden för WordPress är viktigt för att säkerställa kompatibilitet med de senaste WordPress API-ändringarna.

• Övervaka webbplatsens prestanda och SEO-statistik regelbundet : Använd verktyg som Google Search Console och PageSpeed ​​Insights. Eftersom du använder statiska filer bör dina serversvarstider vara låga. Om du ser prestandasänkningar, kontrollera om du laddar för många stora tredjepartsskript eller ooptimerade resurser i din CSS-fil.

• Hantera innehållsuppdateringar och utlösa Gatsby-ombyggnader : Ibland kan redaktörer ändra anpassade fält eller menystrukturer. Se till att ditt team förstår att ändringar i WordPress backend kan ta några minuter innan de visas på Gatsby-webbplatsen på grund av byggtiden. Att använda Gatsby Cloud eller webbhotell med stegvisa byggen kan avsevärt minska denna väntetid.

Vanliga utmaningar när man bygger med Gatsby och WordPress

Även om Gatsby- och WordPress-stacken är kraftfull, kommer den med utmaningar.

• Byggtider: För befintliga webbplatser med tusentals WordPress-inlägg kan Gatsby-byggprocessen vara långsam. Att hämta all data och generera tusentals statiska sidor tar tid. Stegvisa byggen hjälper till att lösa detta.

• Förhandsgranska innehåll: I ett traditionellt WordPress-tema kan du direkt förhandsgranska ett utkast. Med en headless-konfiguration måste du konfigurera förhandsgranskningslogik med hjälp av WPGatsby-pluginet så att redaktörer kan se innehållet i sina inlägg innan det publiceras.

• Plugin-kompatibilitet: Alla WordPress-plugins fungerar inte med en headless-konfiguration. Visuella byggare (som Elementor) eller frontend-specifika plugins fungerar i allmänhet inte eftersom Gatsby styr frontend. Du förlitar dig på WordPress-data, inte dess visuella rendering.

Slutsats: Fördelar med Gatsby och WordPress för moderna webbplatser

Genom att bygga en Gatsby- och WordPress-webbplats kan du utnyttja styrkorna hos webbens två mest dominerande teknologier. Du stärker ditt innehållsteam med det välbekanta WordPress-backend samtidigt som du levererar en toppmodern användarupplevelse med ett Gatsby-gränssnitt.

Resultatet är en Gatsby-webbplats som är säker, skalbar och otroligt snabb. Genom att frikoppla innehållshanteringssystemet från displaylagret framtidssäkrar du din digitala närvaro.

Oavsett om du migrerar befintliga webbplatser eller startar en ny Gatsby-webbplats, ger den här arkitekturen en solid grund för SEO-framgång och användarnöjdhet.

Med den grundläggande idén och stegen som beskrivs ovan är du redo att modernisera ditt webbutvecklingsflöde . Omfamna kraften hos statiska webbplatser och flexibiliteten hos WordPress för att bygga något verkligt exceptionellt.

Vanliga frågor om att skapa en webbplats med Gatsby och WordPress