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.
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.
Derudover har Gatsby også vagt freelancer-udviklere ‘interesse for deres portfolios. Portfolios 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.
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.
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 gitHvis du kører Linux OS, kan du installere NodeJS gennem et pakkeinstallationsprogram som apt.
sudo apt update
sudo apt install nodejs gitInstaller 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-cliInstallationsprogrammet 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-wordpressGatsby 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 developDu kan derefter besøge development version af webstedet på http://localhost:8000.
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 buildFor 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 serveNu 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-wordpressKonfigurer 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.
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:
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.
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:
Når du klikker på et link til et indlæg, her er blogindlæg siden, gengivet af blog-post.js:
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.
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-imagesFø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:
Sådan implementerer du dit Gatsby-websted på Kinsta
Ud over WordPress Hosting tilbyder Kinsta Applikation Hosting, Database Hosting og Statisk Webstedshosting. Du kan hoste op til 100 statiske websteder gratis!
For at implementere dit websted med Statisk Webstedshosting, skal du først skubbe din kode til en foretrukken Git-udbyder (Bitbucket, GitHub, eller GitLab) og derefter følge disse trin for at implementere den:
- Log ind eller opret en konto for at se dit MyKinsta-dashboard.
- Godkend Kinsta med din Git-udbyder.
- Klik på Statiske websteder i venstre sidebar, og klik derefter på Tilføj websted.
- Vælg lageret og den filial, du ønsker at implementere fra.
- Tildel et unikt navn til dit websted.
- Tilføj byggeindstillingerne i følgende format:
- Build command
npm run build - Node Version:
18.16.0 - Udgiv bibliotek:
public
- Build command
- Klik til sidst på Opret websted.
Resumé
At træffe beslutningen om at konvertere dit WordPress-websted til et statisk websted og drage fordel af Gatsby kan være en udfordrende opgave. For at gøre det skal du udføre følgende trin:
- Installer Gatsby for at bygge en startside
- Forbind Gatsby til WordPress-kilde via GraphQL
- Opret templates til blogindlæg
- Importer alle dine billeder fra WordPress
- Vis den sidste ændrede tidsstempel fra WordPress
Nu din tur: Har du spillet omkring Gatsby? Hvad er din oplevelse med det? Fortæl os i kommentarerne!
Shaumik er dataanalytiker om dagen og tegneserieentusiast om natten (eller måske er han Batman?) Shaumik har skrevet tutorials og lavet screencasts i over fem år. Når han ikke arbejder, har han travlt med at automatisere hverdagslige opgaver gennem omhyggeligt skrevne scripts!
Skriv et svar