Hvordan fungerer et typisk dynamisk websted, som dem, der er baseret på WordPress? Når en besøgende indtaster URL’en i en browser eller besøger dit websted via et link, sendes en anmodning til din webserver.

Serveren samler de krævede data gennem de nødvendige databaseforespørgsler og genererer en HTML-fil, som din browser kan vise. Statiske sider gemmer derimod disse svar i flade filer på serveren, der med det samme leveres til en besøgende.

Statiske site generators har eksisteret i lang tid, men de er vokset i popularitet for nylig. I denne trin-for-trin-guide tager vi et kig på integrationen af ​​WordPress med Gatsby, en statisk site generator.

Hvad er Gatsby?

WordPress opretter dynamiske websteder, som har brug for en stak af PHP, MySQL og Apache eller Nginx på serveren for at køre. Det er muligt at oprette en statisk version af WordPress ved at generere en liste med HTML-sider til alt indhold på dit websted.

Denne statiske version af WordPress kaldes headless WordPress eller serverløs WordPress. Denne konverteringsproces udføres kun én gang, så den samme side kan serveres til den besøgende flere gange. Hvordan konverterer du dit WordPress-sted til en statisk version? Det er her Gatsby kommer ind i billedet.

Gatsby, eller GatsbyJS, er en statisk site generator bygget med ReactJS og drevet af GraphQL. Gatsby giver enhver mulighed for at oprette funktionsrige, engagerende websteder og applikationer. Gatsby henter data til dit websted fra en række kilder, herunder eksisterende websteder, API-opkald og flade filer via GraphQL, og bygger det statiske websted baseret på konfigurationsindstillinger specificeret af dig.

Gatsby blev udviklet for kun et år siden, men et stort antal brugere prøver Gatsby. Gatsby har fundet accept i en række forskellige indstillinger. Startsiden til Airbnb’s Blog for datavidenskab og teknik er drevet af Gatsby, skønt de faktiske blogindlæg er hostet på Medium.

Airbnb's Blog om ingeniør- og datavidenskab

Airbnb’s Blog om ingeniør- og datavidenskab

Braun er et mærke af consumer goods company P&G. Dets canadiske websted er hostet hos Gatsby, mens søgefunktionen på webstedet drives af React.

Brauns canadiske websted

Braun’s Canadian Website

Derudover har Gatsby også vagt freelancer-udviklere ‘interesse for deres portfolios. Portefølje som den af Jacob Castro har primært statisk indhold med links til værker og kontakt via e-mail, hvilket gør et statisk websted til en perfekt pasform til hans behov.

Jacob D. Castros portfolio

Jacob D. Castros portfolio

Hvorfor vælge Gatsby?

Hurtige websteder: Den primære fordel ved at opbygge et statisk websted med Gatsby er hastighed, som webmastere har forsøgt at optimere siden Googles meddelelse om at bruge webstedshastighed i web search ranking. Indlæsningstider påvirker også sidevisninger og konverteringer. Det er blevet anslået, at en forsinkelse på et sekund i belastningstiden for stedet kan føre til 7% reduktion i konverteringer.

Sikkerhed: Du får også ekstra sikkerhed med et statisk sted. Da det er en masse statiske filer, der serveres, er der intikkeet meget at hacke ind i. Derudover kan du altid generere de statiske filer igen, hvis de går tabt.

Server omkostninger: At hoste et dynamisk site kræver, at din server er kompatibel med din teknologistapel. Hvis du arbejder med et statisk sted, kan du hoste det på næsten enhver server, hvilket også reducerer omkostningerne forbundet med hosting.

Generering af det statiske sted med Gatsby ved enhver ændring behøver JavaScript, hvilket også kan udføres på en lokal maskine, før de statiske filer overføres til webstedet.

Hvorfor undgå Gatsby?

Intet indbygget dynamisk indhold: Hvis du vil bruge Gatsby, skal du overveje, hvordan du styrer og serverer dynamisk indhold, dvs. du bliver nødt til at oprette en hybrid af statisk / dynamisk for at opnå det (mere om dette længere nede).

For eksempel skal kommentarer hostes eksternt via en service som Disqus.

Contact forms skal også omdirigeres gennem en ekstern partner som Google Forms. Kort sagt vil du miste direkte kontrol over sådant dynamisk indhold, da deres svar ikke er gemt på dine servere.

Hyppige bygninger er upraktiske: Statiske steder har også spørgsmålet om hyppige konverteringer. Enhver ændring, du foretager på dit websted, afspejles kun, når du har regenereret siderne og uploadet dem igen på serveren.

Teknisk ekspertise: Gatsby er bygget på ReactJS og GraphQL. En vis viden om JavaScript og en grundlæggende idé om GraphQL er derfor nødvendig for at arbejde med og port en webside til Gatsby.

Statiske websteder er gode for dem, der leder efter en billig løsning med høj sikkerhed. Nogle anvendelsessager er portfolio websteder for freelancere og produktdemo-websteder.

Hvis du synes fordelene opvejer manglerne, store! Vi vil nu prøve at konfigurere Gatsby til at integrere med vores WordPress-site.

Den seneste version af Gatsby-webstedet, som vi bygger i denne tutorial, er tilgængelig på GitHub til dit brug.

Trin 1: Opsætning af Gatsby

I dette afsnit skal vi se på, hvordan du installerer Gatsby og opretter et grundlæggende statisk site med Gatsby.

Forudsætninger

Det første trin med at komme i gang med Gatsby er at kontrollere dens forudsætninger. Gatsby serveres gennem npm, NodeJS-package installer. Derfor har du brug for NodeJS og npm i dit miljø, før du installerer Gatsby. Derudover kræver Gatsby, at du installerer Git, kildekodestyringssystemet.

Info

I øjeblikket kan Kinsta ikke hoste NodeJS-servere, og disse skal konfigureres andetsteds. Ikke desto mindre kan du bruge Kinsta til din WordPress-installations- og pull-data ved hjælp af enten REST API eller GraphQL.

Hvis du kører Windows, kan du installere NodeJS og Git gennem installationsprogrammet på downloadsiden. På en Mac kan du enten downloade deres installatører eller bruge hjemmebryggeri.

brew install nodejs
brew install git

Hvis du kører Linux OS, kan du installere NodeJS gennem et pakkeinstallationsprogram som apt.

sudo apt update
sudo apt install nodejs git

Installer Gatsby

Når du har installeret NodeJS og Git, er du klar til at installere Gatsby! Den nemmeste måde er at køre følgende kommando på terminalen (brug kommandolinjen npm på Windows):

npm install -g gatsby-cli

Installationsprogrammet installerer først afhængigheder og derefter Gatsby. Du er nu klar til at oprette dit første Gatsby-websted.

Byg og implementer dit Gatsby-website

Kør følgende kommando for at oprette et Gatsby-sted.

gatsby new gatsby-wordpress

Gatsby opretter et sted i directory/gatsby-wordpress ved at klone Gatsby starter template. Du kan give en anden starter template, der skal klones. Når kloningen er afsluttet og afhængighederne er installeret, kan du køre en udviklingsversion af webstedet med følgende kommando.

cd gatsby-wordpress
gatsby develop

Du kan derefter besøge development version af ​​webstedet på http://localhost:8000.

gatsby starter site

Gatsby Starter Site

Det sidste trin er at opbygge dit statiske sted. Følgende kommando opretter de statiske filer i det offentlige bibliotek. For at uploade det til en server kan du blot uploade indholdet af dette bibliotek til serverens rodkatalog. Det kan være nødvendigt at tilføje en path-præfiks som www.example.com/blog/ som en root-URL til dine builds.

gatsby build

For at starte en HTML-server lokalt for at vise denne statiske form på dit websted, skal du bruge server-kommandoen. Vær opmærksom på, at det kun fungerer, når du har kørt build-kommandoen.

gatsby serve

Nu hvor du med succes har oprettet et grundlæggende statisk sted fra Gatsby, så lad os prøve at integrere det med WordPress.

Trin 2: Sådan forbindes Gatsby til WordPress

I dette afsnit integrerer du dit WordPress-sted med Gatsby. Du vil pege Gatsby på adressen på din WordPress-blog for at aktivere den til at trække de nyeste data, når du kører development serveren eller genererer de statiske sider.

Processen med at forbinde Gatsby til WordPress er at hente dine WordPress-data, der udløses af en build. Når Gatsby har hentet WordPress-dataene, opretter det det statiske sted baseret på den aktuelle skabelon.

Processen bruger WordPress-webstedet har en kilde til indlæggene på Gatsby. For at lette denne udveksling skal du installere Gatsbys plugin til WordPress gennem følgende kommando:

npm install gatsby-source-wordpress

Konfigurer Gatsby

Føj derefter dette plugin til Gatsbys konfigurationsfil gatsby-config.js.

Tilføj derefter følgende kode til filen for at forbinde Gatsby til din WordPress-kilde. I dette eksempel bruger vi et lokalt hostet WordPress-sted på MAMP. Som en lille note, kan du muligvis redigere titlen og beskrivelsen af ​​webstedet i 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'
            ]
        }
    }

Hent posts med GraphQL

Når du har angivet kilden til WordPress-webstedet i din konfigurationsfil, skal du specificere, hvilke data der skal udvindes fra WordPress-webstedet. Gatsby bruger GraphQL, et sprog med open source-forespørgsler til API’er, til at få WordPress-indlæg i bulk.

Før du afslutter de forespørgsler, der skal vælges, kan du interaktivt vælge det indhold, du har brug for at hente fra WordPress. Kør development serveren og gå til URL:  http://localhost:8000/___graphqll for at åbne GraphQL-editoren.

Forespørgseldata med GraphQL

Forespørgseldata med GraphQL

Når du har afsluttet det indhold, der skal trækkes, kan du tilføje GraphQL-forespørgsler til filen index.js.

Lad os kun trække titlen og uddraget fra hvert indlæg i øjeblikket. Vi kan tilføje yderligere felter senere.

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

Når du tjekker development webstedet, vil du bemærke, at alle indlæg fra WordPress er trukket med deres headings og uddrag vist:

Gatsby-startside med WordPress-indlæg

Gatsby-startside med WordPress-indlæg

Selvom dette ikke ser pænt ud, har du med succes trukket de relevante data fra WordPress. Det næste trin er at oprette en ny side til hvert indlæg.

Trin 3: Opret en grundlæggende page template

I dette afsnit udløser du Gatsby til at oprette et indlæg for hver enkelt side fra dit WordPress-sted og inkludere links til disse indlæg gennem slug.

Opret en side til hvert indlæg

Det første trin efter at have trukket alle indlæg fra WordPress-kilden er at instruere Gatsby om at oprette en side til hvert indlæg. Dette er en handling, der er afsluttet ved hjælp af handlingen createPage.

Føj følgende kode til gatsby-node.js. Bemærk, at vi desuden får indhold, forfatter, dato og slugs til hvert indlæg:

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

Når du har trukket dataene fra GraphQL, opretter koden en side for hvert indlæg. I indlægget kan du specificere URL-strukturen på siden baseret på sneglen ved hjælp af stien.

Ønsker du at din eCommerce butik bliver hurtigere end din konkurrents? Vi tilbyder verdensklasse support der er tilgængelig 24/7 og lynhurtige servere. Tjek vores planer!!

Alternativt kan du få postens ID og specificere det i URL’en. Komponent-variablen peger på den template, som indlægget skal gengives gennem. Endelig passerer vi sneglen som kontekst af skabelonen. Dette er påkrævet for, at skabelonen kan forespørge efter det rigtige indlæg fra listen over hentede indlæg.

Ideelt set er du nødt til at videregive en variabel, der entydigt identificerer et indlæg som kontekst.

Genstart development serveren, efter at du har foretaget ændringer i filen gatsby-node.js, så ændringerne får virkning.

Opret en skabelon for at få vist et indlæg

Opret et biblioteks-template i src-biblioteket. Opret en ny fil blog-post.js i skabelonen og indtast følgende kode:

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

GraphQL-forespørgslen får dato og forfatternavne, der vises mod slutningen af indlægget. Du kan få yderligere felter ved hjælp af GraphQL-editoren og vise dem på postsiden.

Link to Pages in Index

DLink til sider i indekside til hvert indlæg. Du skal dog tilføje et link til disse indlæg fra indekssiden. Gå over til index.js og ændre koden for at tilføje et link til hvert indlæg:

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

Her er status for indekssiden:

Indeks side efter tilføjelse af links til indlæg

Indeks side efter tilføjelse af links til indlæg

Når du klikker på et link til et indlæg, her er blogindlæg siden, gengivet af blog-post.js:

Blogindlæg med titel, indhold, oprettet dato og forfatter

Blogindlæg med titel, indhold, oprettet dato og forfatter

Trin 4: Avancerede migrerings-opgaver

Selvom du muligvis har importeret hvert WordPress-indlæg, så lad os udføre et par avancerede opgaver for at sikre dig, at du ikke står over for problemer i fremtiden. I dette afsnit kan du effektivt arbejde med billeder og føje den sidste ændrede dato-tidsstempel til dine data.

Image path conversions

Et af vores originale indlæg, “Post med billede!” havde et billede i det. Hvis du flytter til den tilsvarende side på Gatsby, vil du bemærke, at billedet vises, men kilden til billedet er det samme som WordPress. I dette eksempel peger det på det lokalt hostede WordPress-billede.

Gatsby-indlæg med et billede og dets kilde

Gatsby-indlæg med et billede og dets kilde

Hvis du hoster billeder eksternt, udgør dette ikke noget problem, da du fortsætter med at pege på din billedserver. Hvis du gemmer billederne i din WordPress-installation, skal du imidlertid også få billederne med indlæggene!

Dette adresseres af plugin til inline images. Først skal du installere gatsby-image og derefter gatsby-wordpress-inline-images plugin.

npm install gatsby-image
npm install gatsby-wordpress-inline-images

Føj derefter følgende linjer til din gatsby-config.js-fil.

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

Genstart af development serveren efter at have foretaget disse ændringer vil downloade billederne fra WordPress-webstedet og gemme dem lokalt. Du kan bekræfte dette fra stien til det samme billede.

Display sidst ændret dato

Hvis du administrerer en blog, hvor du regelmæssigt opdaterer dine indlæg, kan du eventuelt informere læserne, når et indlæg sidst blev opdateret. Selvom du trak den “oprettede dato” i GraphQL-forespørgslen tidligere, fortæller dette afsnit, hvordan du også trækker den “sidste ændrede” tidsstempel.

For at tilføje den sidste ændrede tidsstempel fra WordPress til dit Gatsby-indlæg, skal du føje det ændrede felt til listen over poster i din GraphQL-forespørgsel. Det er en tidsstempel som date, så du skal også tilføje parameter formatString. Her er den ændrede blog-post.js-fil:

...
<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")
        }
      }
    }
  }

Når du har tilføjet dette, vil du kunne se den sidst ændrede tidsstempel på blogindlægs siden på Gatsby:

Send med den sidste ændrede tidsstempel

Send med den sidste ændrede tidsstempel

Alle taler om #Gatsby .. men hvad er det? 🤷♂️ Lær hvordan du opretter hurtige websteder drevet af Gatsby + WordPress i denne dybdegående tutorial! 🕴🚀Click to Tweet

Resumé

Det kan være en udfordrende opgave at tage beslutningen om at konvertere dit WordPress-sted til et statisk sted, der drager fordel af Gatsby. For at gøre dette, skal du udføre følgende trin:

Nu din tur: Har du spillet omkring Gatsby? Hvad er din oplevelse med det? Fortæl os i kommentarerne!


Hvis du godt kunne lide denne artikel, så vil du elske Kinstas WordPress hostingplatform. Boost dit website og få 24/7 support fra vores WordPress-ekspertteam. Vores Google Cloud-drevne infrastruktur fokuserer på automatisk skalering, ydeevne og sikkerhed. Lad os vise dig Kinsta-forskellen! Tjek vores planer