Hur man bygger en bloggningsplats med Gatsby

Ramar som reagera Skicka bara JavaScript ner till kunder, som sedan används för att skapa elementen på skärmen. HTML som laddas på sidan är minimal, eftersom allt innehåll genereras på klientsidan efter att allt har laddats.

I projekt som har dynamiska data, som en blogg eller en butik, måste JavaScript komma ner först innan andra data kan hämtas. Även när du använder hastighetsbacking tekniker som koduppdelning, om buntet misslyckas med att ladda ner, kommer hela webbplatsen att sluta fungera.

• Webbdesignverktyg som hjälper dig att arbeta smartare

Statiska generatorer tar dynamiskt innehåll och skapar förbyggda sidor redo att tjäna. Om data ändras kan projektet byggas om och det nya innehållet serveras. Slutresultatet är förbättrad hastighet, skalbarhet och - utan konstanta anslutningar till en databas - säkerhet. Medan tillvägagångssättet inte är idealiskt för ständigt förändrade data som en rullande nyhetssida, kan många projekt gynna.

Gatsby är en statisk generator som är byggd på reagering. Genom användning av GraphQL och plugins kan den ta data från olika källor och skicka dem till komponenter. När det här är klart analyserar det projektet och genererar HTML-filer för att tjäna till kunder, medan reagerar och applikationslogiken laddas ner i bakgrunden.

För fler webbplatsbyggnadsalternativ, se vår topp Website Builder plockar. Behöver du rätt stöd? Dessa är webbhotell tjänster du behöver.

Ladda ner filerna för denna handledning.

• 10 bästa statiska generatorer

Komma igång

För att starta kan vi få Gatsby byggnads ut ett grundläggande projekt för oss. Det ger en utvecklingsserver vi kan använda tillsammans med några användbara verktygsverktyg. Se till att nod och npm är uppdaterad och kör NPX Gatsby New Gatsby-Site På kommandoraden, med "Gatsby-Site" är mappen att bygga in.

Inom den mappen ger Gatsby några kommandon som en del av initialiseringsprocessen. Att köra dessa kommer att göra byggnaden mycket enklare. Springa NPM Kör utvecklas För att starta utvecklingsservern och se eventuella ändringar uppdateras automatiskt i webbläsaren.

Allt innehåll som bor i / src-mappen och eventuella installationsfiler är prefixade med "gatsby-" i projektets rot. Allt fungerar genom komponenter, som inte behöver ha någon ytterligare struktur eller beteende för att vara förbyggd med Gatsby.

Innehållet i mappen / src / sidor är speciellt. Gatsby hämtar någon komponent i den mappen för att skapa en sida. Öppna upp index.js och rensa innehållet i komponenten. Lägg märke till att sidans uppdateringar i webbläsaren när vi sparar.

 Const IndexPage = () = & GT; (
  & lt; layout & gt;
    {/ * Tom * /}
  & lt; / layout & gt;
) 

Bygga en sida

Varje blogginlägg behöver sin egen sida. Det är möjligt att göra en sidkomponent för varje ny inlägg, men det skapar ett hinder för dem som inte brukade reagera och kommer också att kräva mer underhåll i framtiden som designändring.

Gatsby har ett bibliotek fullt av plugins redo att ändra hur det genererar sidor, som finns på gatsbyjs.org/plugins. Där kan vi hitta två typer av plugin - "källa" och "transformator".

Ett källplugin tar data från en källa och konverterar dem till "noder", vilket är hur GATSBY behandlar informationen på en webbplats. Uppgifterna kan hämtas lokalt för filer som bilder eller på distans för externa data, t.ex. en databas.

En transformatorplugin kan sedan ta dessa noder och skapa nya för att göra det lättare för Gatsby att arbeta med. Till exempel kan YAML-filer inte analyseras som standard, men ett transformatorplugin kan vrida den kapslade syntaxen i dem till föremål för att läsa inuti komponenter.

Markdown är ett vanligt format som används för text eftersom det är mångsidigt, lätt att läsa och kan konverteras till HTML. Källplugin "Gatsby-Source-FileSystem" kan ta filer lokalt och konvertera dem till noder, medan omvandlingsplugin "Gatsby-Transformer-Remark" använder Anmärkning för att konvertera markdown till något vi kan hämta och fråga med GraphQL.

Starterprojektet levereras redan med källpluggen. Installera den andra genom att springa npm installera gatsby-transformer-anmärkning . Observera att utvecklingsservern kan behöva startas om för att den ska hämtas.

Ställ in plugins

Med det installerade plugin måste Gatsby få veta hur man använder den. All denna logik hålls i filen "Gatsby-config.js" som genereras i början. Den levereras med några plugins som redan är etablerade ur lådan men vi måste lägga till oss till blandningen för att kunna hämta och använda markdown.

Enkla plugins som inte har något uppställningsprocedur kan läggas till som strängar. När transformationspluggen bara har ett jobb behöver det inte inrätta. Källplugin måste dock berättas var du hittar inlägg. Lägg till dem i botten av plugins array.

 Plugins: [
  [...]
  "Gatsby-Transformer-Remark",
  {
    Lös: `Gatsby-source-filsystem`,
    alternativ: {
      Namn: `Sidor`,
      Sti: `$ {__ dirname} / src / sidor`
    }
  }
] 

Eftersom varje inlägg blir en egen sida, är det vettigt att lägga till dem i mappen SRC / Pages. Dessa inställningsalternativ berättar Gatsby att titta på den mappen och dra ut några filer.

Skapa ett blogginlägg

Med pluginerna på plats kan vi skapa vårt första inlägg. Skapa en mapp som heter "My-First-Post" och lägg till en "my-first-post.md" markdown-fil i den. Denna konvention gör det möjligt för oss att lägga till några relaterade filer - som bilder - tillsammans med själva posten.

Vi måste lägga till några markdown till det här inlägget så vi vet att det fungerar som förväntat.

 ---
Sti: / Post / My-First-Post
Datum: 2018-12-01
Sammanfattning: Post Sammanfattning
Taggar: [min, första, post]
Titel: Min första inlägg
---
Detta är mitt första inlägg! 

Innehållet mellan bindestrecken på toppen av filen kallas "Front Matter". Detta kommer att innehålla metadata runt posten som skrivs, till exempel datum och titel. Alla dessa data kommer att hämtas av anmärkning och kan frågas för inom GraphQL.

Den viktiga delen av fronten är i det här fallet väg värde. Det är här posten kommer att leva och måste vara unikt. Gatsby läser vägen och gör en ny sida där.

Innan vi kan visa inläggen behöver vi en sidkomponent för att visa inlägget. Det måste kunna ta värdena som PROPS och visa innehållet som ett HTML-block.

Skapa en ny komponent på "src / blogpost.js". Informationen om varje inlägg kommer att komma igenom som en data prop från graphql.

 Import reagerar från "reagera"
Importera {graphql} från "Gatsby"
Importera hjälm från "Reageringshjälm"
Importera layout från '../components/layout'
Exportera Const Blog = ({Data: {markdownRemark}}) = & gt; {
  const {frontmatter, html} = markdownremark
  lämna tillbaka (
    & lt; layout & gt;
      & lt; hjälm titel = {frontmatter.title} / & gt;
      & lt; div farliga setinnerhtml = {{__html: html}} / & gt;
    & lt; / layout & gt;
  )
} 

Paketet "reageringshjälm" som buntas med Gatsby gör det möjligt för oss att uppdatera värden som vanligtvis bor i & lt; huvud & gt; av en HTML-sida. Här ställer vi in ​​titeln på posten för att vara & lt; titel & gt; av sidan själv. Det finns gott om andra alternativ som det accepterar, vilket du kan ta reda på mer om github.com/nfl/react-Helmet .

Fråga för data

Vid denna tidpunkt har Gatsby ingen data som driver den här sidan. Vi måste hämta data från markdown-filerna för att fylla i den här informationen. För att göra detta kan vi använda GraphQL - ett querying språk som skapats av Facebook som drar i relevanta data till reageringskomponenter. Kort sagt definierar GraphQL den struktur som data kommer att returneras genom användning av kapslade objekt. På det sättet frågar vi bara för data vi faktiskt kommer att använda.

Gatsby ger en mall bokstavlig funktion som kan tolka frågorna. Det kommer att upptäcka någon användning av det och skicka sina resultat som rekvisita i komponenten. Det betyder att vi kan lägga till frågan i samma fil och hålla relaterad logik tillsammans.

Exportera Const PageQuery = Graphql`
  Query ($ Path: String!) {
    markdownremark (frontmatter: {path: {eq: $ path}}) {
      html
      frontmatter {
        Datum (FormatString: "D mmmm yyyy")
        titel
      }
    }
  } `

Inuti den här frågan frågar vi Gatsby för alla markdown noder med en stig som matchar den sida vi är på. Om den hittar en, kommer det att passera den gjorda HTML, datum och titel på posten till komponenten.

Skriva frågor På det här sättet är endast begränsat till sidkomponenter. Alla andra komponenter som behöver fråga för noder måste använda & lt; staticquery & gt; och ladda upp det fram. Vid denna tidpunkt kan utvecklingsservern varna om detta för Bloggpost Komponent, men det beror på att det inte är medvetet om att det blir en sidkomponent än. Låt oss ändra det.

Generera sidor

Som standard gör Gatsby bara sidor för komponenter inom / src / sidor , vilket innebär att vi behöver skapa sidor på annat sätt.

Gatsby exponerar några metoder från sin byggprocess för att få tillgång till data noder. Dessa kan nås via "gatsby-node.js" i roten till projektet. I det här fallet kommer vi att använda GraphQL för att hämta alla blogginlägg och låt kreparation Återuppringning genererar en sida för var och en. Eftersom det här är en asynkron verkan måste vi returnera ett löfte så att Gatsby kan fortsätta med byggprocessen.

 Const Path = Kräv ('Path')
Exports.CreatePages = ({Action, GraphQL}) = & GT; {
  Retur GraphQL (`
    {
      allmarkdownremark {
        kanter {
          nod {
            frontmatter {
              väg
            }
          }
        }
      }
    }
  `)
} 

Den första delen av återuppringningen är en fråga som hämtar sökvägen för varje inlägg, eftersom varje enskild sida får sina egna data. GraphQL-samtalet returnerar ett löfte som innehåller alla inlägg. Vi kan använda data från det för att generera några sidor.

 .Then (resultat = & gt; {
  om (resultat.errors) {
    returnera louse.reject (resultat.errors)
  }
  const blogposttemplate = path.resolve ('src / komponenter / blogpost.js')
  resultat.data.allmarkdownremark.edges.foreach (({node}) = & gt; {
    Actions.CreatePage ({
      Path: node.frontmatter.path,
      Komponent: Blogposttemplate,
    })
  })
}) 

Om frågan möter ett fel, stoppa byggprocessen för att räkna ut varför. Om allt är bra, hämta komponenten och ring skapa sida Metod för att generera en sida på den angivna sökvägen.

Med de sidor som genererar är allt som behövs nu ett sätt att hitta dem. Vi kan använda en fråga på den befintliga indexsidans komponent för att göra det.

 Export Const PageQuery = Graphql`
  Fråga {
    AllmarkDownRemark (Sortera: {Fält: [frontmatter___date], order: desc}) {
      kanter {
        nod {
          frontmatter {
            väg
            titel
          }
        }
      }
    }
  }
`; 

I den här frågan är vi bara intresserade av titlarna och vägen till posten. Vi passerar också några parametrar för att anmärka för att få de senaste inläggen i omvänd ordning. Denna fråga i synnerhet kontrollerar datumet från fronten på varje inlägg. Syntaxen för varje fråga beror på plugin som används för att generera det.

Slutligen behöver komponenten uppdatera för att utnyttja data. "Link" -komponenten som levereras av Gatsby gör det möjligt för den att veta vilka komponenter som behövs för att göra den länken och kommer att se till att det hämtar de högra buntarna i enlighet därmed.

 CONST IndexPage = ({Data}) = & GT; {
  lämna tillbaka (
    & lt; layout & gt;
      {data.allmarkdownremark.edges.map (
        ({nod: {frontmatter: {path, title}}}) = & gt; (
          & lt; länk key = {path} till = {path} & gt;
            {titel}
          & lt; / länk & gt;
        ))}
    & lt; / layout & gt;
  )
} 

Med det är vår blogg klar. Allt som återstår är att smarta upp det och ha Gatsby bygga en produktionsklar webbplats. Genom att springa npm kör byggnad Det kan ta bort eventuella förbättringar som används för utveckling och generera buntar redo att distribuera. När du är klar kan mappen "offentliga" sedan laddas upp var som helst som kan betjäna statiska platser. Har du filer för att lagra för din blogg? Se till att de är säkra i lysande molnlagring .

Denna artikel publicerades ursprungligen i utgåva 314 av netto , världens bästsäljande tidning för webbdesigners och utvecklare. Köp nummer 314 här eller prenumerera här .

Relaterade artiklar:

• 16 Bästa gratis bloggplattformar
• Använd WordPress som en huvudlös CMS
• Hur man kodar snabbare, lättare javascript