{"id":36123,"date":"2020-03-06T01:55:36","date_gmt":"2020-03-06T00:55:36","guid":{"rendered":"https:\/\/kinsta.com\/?p=58518&preview=true&preview_id=58518"},"modified":"2023-10-11T13:49:22","modified_gmt":"2023-10-11T12:49:22","slug":"gatsby-wordpress","status":"publish","type":"post","link":"https:\/\/kinsta.com\/dk\/blog\/gatsby-wordpress\/","title":{"rendered":"Introduktion til at opbygge websteder med Gatsby og WordPress (hurtigt og statisk)"},"content":{"rendered":"

Hvordan fungerer et typisk dynamisk websted, som dem, der er baseret p\u00e5 WordPress? N\u00e5r en bes\u00f8gende indtaster URL’en i en browser eller bes\u00f8ger dit websted via et link, sendes en anmodning til din webserver.<\/p>\n

Serveren samler de kr\u00e6vede data gennem de n\u00f8dvendige databaseforesp\u00f8rgsler og genererer en HTML-fil<\/a>, som din browser kan vise. Statiske sider gemmer derimod disse svar i flade filer p\u00e5 serveren, der med det samme leveres til en bes\u00f8gende.<\/p>\n

Statiske site generators<\/a> har eksisteret i lang tid, men de er vokset i popularitet for nylig. I denne trin-for-trin-guide tager vi et kig p\u00e5 integrationen af \u200b\u200bWordPress med Gatsby, en statisk site generator.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Hvad er Gatsby?<\/h2>\n

WordPress opretter dynamiske websteder, som har brug for en stak af PHP<\/a>, MySQL<\/a> og Apache eller Nginx<\/a> p\u00e5 serveren for at k\u00f8re. Det er muligt at oprette en statisk version af WordPress ved at generere en liste med HTML-sider til alt indhold p\u00e5 dit websted.<\/p>\n

Denne statiske version af WordPress kaldes headless WordPress eller serverl\u00f8s<\/a> WordPress. Denne konverteringsproces udf\u00f8res kun \u00e9n gang, s\u00e5 den samme side kan serveres til den bes\u00f8gende flere gange. Hvordan konverterer du dit WordPress-sted til en statisk version? Det er her Gatsby kommer ind i billedet.<\/p>\n

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

Gatsby blev udviklet for kun et \u00e5r siden, men et stort antal brugere pr\u00f8ver Gatsby. Gatsby har fundet accept i en r\u00e6kke forskellige indstillinger. Startsiden til Airbnb’s Blog for datavidenskab og teknik<\/a> er drevet af Gatsby, sk\u00f8nt de faktiske blogindl\u00e6g er hostet p\u00e5 Medium.<\/p>\n

\"Airbnb's
Airbnb’s Blog om ingeni\u00f8r- og datavidenskab<\/figcaption><\/figure>\n

Braun er et m\u00e6rke af consumer goods company P&G. Dets canadiske websted<\/a> er hostet hos Gatsby, mens s\u00f8gefunktionen p\u00e5 webstedet drives af React.<\/p>\n

\"Brauns
Braun’s Canadian Website<\/figcaption><\/figure>\n

Derudover har Gatsby ogs\u00e5 vagt freelancer-udviklere<\/a> ‘interesse for deres portfolios<\/a>. Portfolios som den af Jacob Castro<\/a> har prim\u00e6rt statisk indhold med links til v\u00e6rker og kontakt via e-mail, hvilket g\u00f8r et statisk websted til en perfekt pasform til hans behov.<\/p>\n

\"Jacob
Jacob D. Castros portfolio<\/figcaption><\/figure>\n

Hvorfor v\u00e6lge Gatsby?<\/h3>\n

Hurtige websteder: Den prim\u00e6re fordel ved at opbygge et statisk websted med Gatsby er hastighed<\/a>, som webmastere har fors\u00f8gt at optimere siden Googles meddelelse om at bruge webstedshastighed i web search ranking<\/a>. Indl\u00e6sningstider p\u00e5virker ogs\u00e5 sidevisninger og konverteringer. Det er blevet ansl\u00e5et, at en forsinkelse p\u00e5 et sekund i belastningstiden for stedet kan f\u00f8re til 7% reduktion i konverteringer<\/a>.<\/p>\n

Sikkerhed<\/strong>: Du f\u00e5r ogs\u00e5 ekstra sikkerhed<\/a> 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\u00e5r tabt.<\/p>\n

Server omkostninger<\/strong>: At hoste et dynamisk site kr\u00e6ver, at din server er kompatibel med din teknologistapel. Hvis du arbejder med et statisk sted, kan du hoste det p\u00e5 n\u00e6sten enhver server, hvilket ogs\u00e5 reducerer omkostningerne forbundet med hosting.<\/p>\n

Generering af det statiske sted med Gatsby ved enhver \u00e6ndring beh\u00f8ver JavaScript, hvilket ogs\u00e5 kan udf\u00f8res p\u00e5 en lokal maskine, f\u00f8r de statiske filer overf\u00f8res til webstedet.<\/p>\n

Hvorfor undg\u00e5 Gatsby?<\/h3>\n

Intet indbygget dynamisk indhold<\/strong>: Hvis du vil bruge Gatsby, skal du overveje, hvordan du styrer og serverer dynamisk indhold, dvs. du bliver n\u00f8dt til at oprette en hybrid af statisk \/ dynamisk<\/a> for at opn\u00e5 det (mere om dette l\u00e6ngere nede).<\/p>\n

For eksempel skal kommentarer<\/a> hostes eksternt via en service som Disqus<\/a>.<\/p>\n

Contact forms<\/a> skal ogs\u00e5 omdirigeres gennem en ekstern partner som Google Forms<\/a>. Kort sagt vil du miste direkte kontrol over s\u00e5dant dynamisk indhold, da deres svar ikke er gemt p\u00e5 dine servere.<\/p>\n

Hyppige bygninger er upraktiske<\/strong>: Statiske steder har ogs\u00e5 sp\u00f8rgsm\u00e5let om hyppige konverteringer. Enhver \u00e6ndring, du foretager p\u00e5 dit websted, afspejles kun, n\u00e5r du har regenereret siderne og uploadet dem igen p\u00e5 serveren.<\/p>\n

Teknisk ekspertise<\/strong>: Gatsby er bygget p\u00e5 ReactJS og GraphQL. En vis viden om JavaScript og en grundl\u00e6ggende id\u00e9 om GraphQL er derfor n\u00f8dvendig for at arbejde med og port en webside til Gatsby.<\/p>\n

Statiske websteder<\/a> er gode for dem, der leder efter en billig l\u00f8sning med h\u00f8j sikkerhed. Nogle anvendelsessager er portfolio websteder for freelancere og produktdemo-websteder.<\/p>\n

Hvis du synes fordelene opvejer manglerne, store! Vi vil nu pr\u00f8ve at konfigurere Gatsby til at integrere med vores WordPress-site<\/a>.<\/p>\n

Den seneste version af Gatsby-webstedet, som vi bygger i denne tutorial, er tilg\u00e6ngelig p\u00e5 GitHub<\/a> til dit brug.<\/p>\n

Trin 1: Ops\u00e6tning af Gatsby<\/h2>\n

I dette afsnit skal vi se p\u00e5, hvordan du installerer Gatsby og opretter et grundl\u00e6ggende statisk site med Gatsby.<\/p>\n

Foruds\u00e6tninger<\/h3>\n

Det f\u00f8rste trin med at komme i gang med Gatsby er at kontrollere dens foruds\u00e6tninger. Gatsby serveres gennem npm, NodeJS-package installer. Derfor har du brug for NodeJS og npm i dit milj\u00f8, f\u00f8r du installerer Gatsby. Derudover kr\u00e6ver Gatsby, at du installerer Git<\/a>, kildekodestyringssystemet.<\/p>\n