Hvordan bygge et bloggingsted med Gatsby

Rammer som Reagerer bare send Javascript ned til klienter, som deretter brukes til å lage elementene på skjermen. HTML som laster på siden er minimal, da alt innholdet genereres på klientsiden etter at alt har lastet inn.

I prosjekter som har dynamiske data, for eksempel en blogg eller en butikk, må JavaScript komme ned først før andre data kan hentes. Selv når du bruker Speed-Boosting Techniques som kode splitting, hvis bunken ikke laster ned, vil hele nettstedet slutte å fungere.

• Webdesign verktøy for å hjelpe deg med å jobbe smartere

Static-site generatorer tar dynamisk innhold og lager pre-built sider klar til å tjene. Hvis dataene endres, kan prosjektet gjenoppbygges og det nye innholdet servert. Sluttresultatet er forbedret hastighet, skalerbarhet og - uten konstante forbindelser til en database - sikkerhet. Mens tilnærmingen ikke er ideell for stadig å endre data som et rullende nyhetsside, kan mange prosjekter ha nytte.

Gatsby er en statisk-site generator som er bygget på reagere. Gjennom bruk av grafql og plugins, kan det ta data fra forskjellige kilder og sende dem inn i komponenter. Når dette er gjort, analyserer det prosjektet og genererer HTML-filer for å tjene til klienter, mens reagerer og programlogikken blir lastet ned i bakgrunnen.

For flere byggeplasser, se vår topp Nettstedbygger plukker. Trenger du riktig støtte? Dette er den Web Hosting. tjenester du trenger.

Last ned filene for denne opplæringen.

• 10 beste statiske nettstedgeneratorer

Kom i gang

For å starte, kan vi få Gatsby stillas ut et grunnleggende prosjekt for oss. Det gir en utviklingsserver vi kan bruke sammen med noen få nyttige utviklerverktøy. Sørg for at noden og npm er oppdatert og kjører NPX Gatsby New Gatsby-Site På kommandolinjen, med "Gatsby-Site" som mappen for å bygge inn.

Innenfor den mappen gir Gatsby noen få kommandoer som en del av initialiseringsprosessen. Kjører disse vil gjøre å bygge stedet mye enklere. Løpe NPM Kjør utvikle seg For å starte utviklingsserveren og se eventuelle endringer oppdateres automatisk i nettleseren.

Alt innhold lever i / SRC-mappen, og eventuelle oppsettfiler er prefiks med "Gatsby-" i prosjektets rot. Alt fungerer gjennom komponenter, som ikke trenger å ha ytterligere struktur eller oppførsel for å bli forhåndsbygget med Gatsby.

Innholdet i mappen / SRC / Sider er spesiell. Gatsby vil hente en hvilken som helst komponent i den mappen for å opprette en side. Åpne Index.js og fjern innholdet i komponenten. Legg merke til at siden oppdateres i nettleseren som vi lagrer.

 CONST INDEXPAGE = () = & gt; (
  & lt; layout & gt;
    {/ * Tom * /}
  & lt; / layout & gt;
) 

Bygge en side

Hvert blogginnlegg trenger sin egen side. Det er mulig å lage en sidekomponent for hvert nytt innlegg, men dette skaper en barriere for de som ikke brukes til å reagere og vil også kreve mer vedlikehold i fremtiden som designendringer.

Gatsby har et bibliotek fullt av plugins klar til å endre måten den genererer sider, som kan finnes på gatsbyjs.org/plugins. Der kan vi finne to typer plugin - 'kilde' og 'transformator'.

En kildeplugin vil ta data fra en kilde og konvertere dem til 'noder', som er hvordan Gatsby omhandler informasjonen på et nettsted. Dataene kan hentes lokalt for filer som bilder eller eksternt for eksterne data som en database.

En transformator plugin kan da ta disse noder og skape nye for å gjøre det enklere for gatsby å jobbe med. For eksempel kan YAML-filer analyseres som standard, men et transformatorplugg kan slå den nestede syntaksen i dem til gjenstander for å lese inne i komponenter.

Markdown er et vanlig format som brukes til tekst fordi den er allsidig, lett å lese og kan konverteres til HTML. Source Plugin "Gatsby-Source-Filesystemet" kan ta filer lokalt og konvertere dem til noder, mens transformasjonspluggen "Gatsby-Transformer-Bemerkning" bruker bemerkning for å konvertere Markdown til noe vi kan plukke opp og spørre med GraphQL.

Starterprosjektet kommer allerede med kildeplugin. Installer den andre ved å kjøre NPM Installer Gatsby-Transformer-Bemerkning . Vær oppmerksom på at utviklingsserveren må være startet for å bli startet for at den skal hentes.

Sett opp plugins

Med plugin installert, må Gatsby bli fortalt hvordan du bruker den. Alt denne logikken holdes i filen "Gatsby-config.js" generert i starten. Den leveres med noen plugins allerede satt opp av esken, men vi må legge til vår i blandingen for å kunne plukke opp og bruke Markdown.

Enkle plugins som ikke har noen oppsettprosedyre, kan legges til som strenger. Som transformasjonspluggen har bare en jobb, trenger den ikke å sette opp. Kildepluginet må imidlertid fortelles hvor du finner innleggene. Legg dem til bunnen av pluginsarmen.

 Plugins: [
  [...]
  "Gatsby-Transformer-Bemerkning",
  {
    Løs: `Gatsby-Source-FilesYstem`,
    Alternativer: {
      Navn: `sider`,
      Sti: `$ {__ dirname} / src / sider``
    }
  }
] 

Fordi hvert innlegg vil bli sin egen side, er det fornuftig å legge dem til mappen SRC / Sider. Disse innstillingsalternativene forteller Gatsby å se på den mappen og trekke ut noen filer.

Opprett et blogginnlegg

Med pluginene på plass kan vi lage vårt første innlegg. Opprett en mappe som heter "My-First Post" og legger til en "my-first-post.md" Markdown-fil i den. Denne konvensjonen gjør at vi kan legge til eventuelle relaterte filer - for eksempel bilder - sammen med innlegget selv.

Vi må legge til litt markdown til dette innlegget, så vi vet at det fungerer som forventet.

 ---
Sti: / Post / My-First-Post
Dato: 2018-12-01.
Sammendrag: Postsammendrag
Tags: [min første, post]
Tittel: Mitt første innlegg
-
Dette er mitt første innlegg! 

Innholdet mellom bindestrekene øverst på filen kalles "frontstoff". Dette vil inneholde metadata rundt innlegget som skrives, for eksempel dato og tittel. Alle disse dataene vil bli hentet av bemerkning og kan queried for i GraphQL.

Det avgjørende stykket frontstoff i dette tilfellet er sti verdi. Det er her innlegget vil leve og må være unikt. Gatsby vil lese banen og lage en ny side der.

Før vi kan vise innleggene, trenger vi en sidekomponent for å vise innlegget. Det må kunne ta verdiene som rekvisitter og vise innholdet som en blokk med HTML.

Opprett en ny komponent på "src / blogpost.js". Informasjonen om hvert innlegg kommer gjennom som en data Prop fra GraphQL.

 Importen reagerer fra "React"
importere {graphql} fra 'Gatsby'
Importer hjelm fra "React-Helmet"
Import layout fra '../components/layout'
Eksporter Const Blog = ({data: {MarkDownRemark}}) = & gt; {
  const {frontmatter, html} = MarkDownRemark
  komme tilbake (
    & lt; layout & gt;
      & lt; hjelm title = {frontmatter.title} / & gt;
      & lt; div farliglySetinerhtml = {{__html: html}} / & gt;
    & lt; / layout & gt;
  )
} 

"React-Helmet" -pakken med Gatsby gjør det mulig for oss å oppdatere verdier som vanligvis ville leve i & lt; head & gt; av en HTML-side. Her setter vi tittelen på innlegget for å være & lt; title & gt; av siden selv. Det er mange andre alternativer det aksepterer, som du kan finne ut mer om på github.com/nfl/react-helmet. .

Spørring for data

På dette tidspunktet har Gatsby ingen data som driver denne siden. Vi må hente data fra Markdown-filene for å fylle ut denne informasjonen. For å gjøre dette kan vi bruke GraphQL - et spørringsspråk som er opprettet av Facebook som trekker i relevante data i reaktkomponenter. Kort sagt, grafql definerer strukturen dataene vil bli returnert gjennom bruk av nestede objekter. På den måten spør vi bare for data vi vil faktisk bruke.

Gatsby gir en mal bokstavelig funksjon som kan tolke spørsmålene. Det vil oppdage noen bruk av det og passere resultatene som rekvisitter i komponenten. Dette betyr at vi kan legge til spørringen i samme fil og holde relatert logikk sammen.

Eksporter Const PageQuery = GraphQL`
  Forespørsel ($ sti: streng!) {
    MarkDownRemark (frontmatter: {sti: {eq: $ path}}) {
      HTML.
      frontmatter {
        Dato (formatstring: "D mmmm yyyy")
        tittel
      }
    }
  } `

Inne i denne spørringen spør vi Gatsby for alle Markdown noder med en sti som samsvarer med siden vi er på. Hvis den finner en, vil den da passere den gjengitte HTML, dato og tittel på posten på komponenten.

Skriveforespørsler Denne måten er begrenset bare til sidekomponenter. Eventuelle andre komponenter som trenger spørring for noder må bruke & lt; staticquery & gt; og last den opp foran. På dette tidspunktet kan utviklingsserveren advare om dette for Blogg innlegg Komponent, men dette er fordi det ikke er klar over at det blir en sidekomponent ennå. La oss endre det.

Generer sider

Som standard gjør Gatsby bare sider for komponenter innenfor / SRC / Sider , noe som betyr at vi trenger å lage sider på en annen måte.

Gatsby avslører noen få metoder fra byggeprosessen for å få tilgang til data noder. Disse kan nås gjennom "Gatsby-Node.js" i roten til prosjektet. I dette tilfellet vil vi bruke grafql for å hente alle blogginnleggene og la kreatser Tilbakering genererer en side for hver enkelt. Da dette er en asynkron handling, må vi returnere et løfte, slik at Gatsby kan fortsette med byggeprosessen.

 CONST PATH = KRAV ('PATH')
Exports.createPages = ({Actions, Graphql}) = & gt; {
  Return GraphQL (`
    {
      allmarkdownremark {
        kanter {
          node {
            frontmatter {
              sti
            }
          }
        }
      }
    }
  `)
} 

Den første delen av tilbakeringingen er en spørring som henter banen for hvert innlegg, da hver enkelt side vil få sine egne data. GraphQL-samtalen returnerer et løfte som vil inneholde alle innleggene. Vi kan bruke dataene fra det for å generere noen sider.

 .Nå (resultat = & gt; {
  hvis (resultat.errrors) {
    Return Promise.Reject (resultat.Errors)
  }
  const blogposttemplate = path.resolve ('src / komponenter / blogpost.js')
  result.data.allmarkdownRemark.Edges.foreach (({node}) = & gt; {
    Actions.createPage ({
      Sti: Node.frontmatter.path,
      Komponent: BlogPostTemplate,
    })
  })
}) 

Hvis spørringen møter en feil, stopper byggeprosessen for å finne ut hvorfor. Hvis alt er bra, hent komponenten som er laget og ring lag side Metode for å generere en side på den angitte banen.

Med sidene som genererer, er alt som trengs nå, en måte å finne dem på. Vi kan bruke en forespørsel på den eksisterende indekssiden komponenten for å gjøre det.

 Eksporter Const PageQuery = Grafql`
  spørring {
    AllmarkDownRemark (Sorter: {Felt: [Frontmatter___Date], Bestill: Desc}) {
      kanter {
        node {
          frontmatter {
            sti
            tittel
          }
        }
      }
    }
  }
`; 

I denne spørringen er vi bare interessert i titlene og banen til innlegget. Vi sender også noen parametere til å bemerkes for å få de nyeste innleggene i omvendt rekkefølge. Dette spørsmålet er spesielt kontrollert datoen fra forsiden av hvert innlegg. Syntaxen for hvert spørsmål vil avhenge av at pluginet brukes til å generere det.

Til slutt trenger komponenten å oppdatere for å benytte dataene. "Link" -komponenten som leveres av Gatsby, gjør det mulig å vite hvilke komponenter som det trenger å gjøre den linken og sørge for at den henter de riktige buntene tilsvarende.

 const INDEXPAGE = ({data}) = & gt; {
  komme tilbake (
    & lt; layout & gt;
      {data.allmarkdownRemark.Edges.Map (
        ({node: {frontmatter: {bane, tittel}}}) = & gt; (
          & lt; link nøkkel = {sti} til = {sti} & gt;
            {tittel}
          & lt; / lenken & gt;
        ))}
    & lt; / layout & gt;
  )
} 

Med det er bloggen vår ferdig. Alt som gjenstår er å smarte det opp og ha Gatsby bygge en produksjons-klar nettside. Ved å løpe NPM Run Build. Det kan stripe ut eventuelle forbedringer som brukes til utvikling og generere bunter som er klare til å distribuere. Når en gang er ferdig, kan "Public" -mappen lastes opp hvor som helst som kan betjene statiske nettsteder. Fikk filer til å lagre for bloggen din? Pass på at de er sikre i strålende skylagring .

Denne artikkelen ble opprinnelig publisert i utgave 314 av nett , verdens bestselgende magasin for webdesignere og utviklere. Kjøp problem 314 her eller Abonner her .

Relaterte artikler:

• 16. beste gratis blogging plattformer
• Bruk WordPress som hodeløse CMS
• Hvordan kode raskere, lettere javascript