Sådan oprettes en React og Gatsby-drevet blog på cirka 10 minutter

Buddies / Foto af Genevieve Perron-Migneron på Unsplash
Ansvarsfraskrivelse: Dette blev skrevet til Gatsby version 1, version 2 blev netop frigivet og har nogle ændringer foretaget. Jeg vil arbejde på en anden tutorial til det.

Gatsby er en flammende hurtig statisk stedgenerator baseret på ReactJS.

En statisk stedgenerator (SSG) er et kompromis mellem et hårdkodet HTML-statisk sted og et fuldt blæst CMS (Content Management System), ligesom Wordpress.

En SSG kan bruges til at generere HTML-sider til indholdsdrevne websteder (f.eks. Blogs). Alt det kræver er data for sideindhold og skabelonen, der skal udfyldes med indhold.

Dette indlæg vil blive opdelt i fem sektioner:

  1. Kom godt i gang.
  2. Oprettelse af layoutkomponenter.
  3. Oprettelse af blogindlæg.
  4. Generering af nye sider fra blogindlægsdata.
  5. Opret en liste over vores websteds markdownfiler på destinationssiden.

Vi tager et dybt ind i Gatsby og nogle af dets funktioner ved at oprette en imaginær statisk blog kaldet CodeStack. Mockup vises nedenfor. Lad os gå! ️

En bloglisteside / Et enkelt blogindlæg

1. Kom godt i gang

Forudsætninger

Kontroller først, at du har Node.js installeret på dit system. Hvis ikke, skal du gå til nodejs.org og installere en nylig version til dit operativsystem.

Denne artikel antager også, at du har forståelse for ReactJS.

Installer CLI

Gatsby har et kommandolinjeværktøj, der indeholder nyttige kommandoer såsom:

  • gatsby nyt: til stilladser af et nyt Gatsby-projekt.
  • gatsby udvikle: til lancering af en hot-reload-aktiveret webudviklingsserver.
  • gatsby build: til opbygning af en produktionsklar version af projektet.

For at installere skal du skrive følgende på din terminal og trykke på enter:

npm installering - global gatsby-cli

Lader oprette en projektmappe codestack-blog og navigere i terminalen til den.

gatsby ny codestack-blog && cd $ _

Hvis du udfører udviklingen af ​​gatsby i projektmappen, skal det stilladsede sted se sådan ud:

Tilføjelse af plugins

Gatsby har et stort og voksende sæt plugins. De er i det væsentlige Node.js-pakker, der grænseflade til Gatsbys API'er.

De kan installeres via NPM (Node Package Manager) på terminalen og har generelt tre kategorier: funktionelle, kilde- og transformer plugins.

Funktionelle plugins

Disse plugins giver ekstra funktionalitet på et Gatsby-sted eller i dets udviklingsmiljø. Til vores app har vi brug for:

  • gatsby-plugin-react-hjelm: muliggør ændring af hovedmærkerne. Bemærk, at det allerede er installeret i vores stilladsprojekt.
  • gatsby-plugin-catch-links: Opfanger lokale links fra markdown og andre sider, der ikke reagerer, og udfører en klientside pushState for at undgå, at browseren skal opdatere siden.

Installer plugins eller bare det andet plugin.

npm installer gatsby-plugin-react-hjelm gatsby-plugin-catch-links

Når vi tilføjer et nyt plugin, skal vi opdatere gatsby-config.js-filen med det nye plugin, så Gatsby genkender og bruger den. Vi bruger back-ticks.

module.exports = {
  siteMetadata: {
    titel: `Gatsby Default Starter`,
  },
  plugins: [
    `Gatsby-plugin-reagerer-helmet`,
    `Gatsby-plugin-catch-links`,
  ],
}

Kilde plugins

Disse plugins “kilde” data fra fjerntliggende eller lokale placeringer til det, som Gatsby kalder noder. For at skrive vores indlæg i Markdown på vores lokale disk, har vi brug for:

  • gatsby-source-filesystem: kildedata om filer fra din computers filsystem.
npm installer gatsby-source-filsystem

Opdater filen gatsby-config.js:

module.exports = {
  siteMetadata: {
    titel: `Gatsby Default Starter`,
  },
  plugins: [
    `Gatsby-plugin-reagerer-helmet`,
    `Gatsby-plugin-catch-links`,
    {
      løsning: `gatsby-source-filesystem ',
      muligheder: {
        sti: `$ {__ dirname} / src / sider`,
        navn: 'sider',
      },
    }
  ],
}

Hvad sker der her? Et indstillingsobjekt kan sendes til et plugin for mere konfiguration. Vi videregiver filsystemstien (dvs. hvor vores Markdown-filer vil være placeret) og derefter et navn på kildefilerne, så Gatsby ved om vores kildefiler og hvor vi skal bruge transformer-plugins.

Transformer plugins

Disse plugins omdanner rå data fra noder til brugbare dataformater. For eksempel har vi brug for:

  • gatsby-transformer-bemærkning: dette omdanner blogindlæg skrevet i markdown .md-filer på den lokale disk til HTML til gengivelse.
npm installer gatsby-transformer-bemærkning

Opdater filen gatsby-config.js igen.

module.exports = {
  siteMetadata: {
    titel: `Gatsby Default Starter`,
  },
  plugins: [
    `Gatsby-plugin-reagerer-helmet`,
    `Gatsby-plugin-catch-links`,
    {
      løsning: `gatsby-source-filesystem ',
      muligheder: {
        sti: `$ {__ dirname} / src / sider`,
        navn: 'sider',
      },
    },
    `Gatsby-transformer-remark`,
  ],
}
Godt klaret! / Kredit: Nigel Payne

2. Oprettelse af layoutkomponenter

Med Gatsby kan du nemt oprette "layoutkomponenter." Layoutkomponenter er dele af dit websted, som du vil dele på flere sider. For den blog, vi bygger, er dette overskriften og sidebjælkerne.

Fra rodmappen skal du se på src / layouts. Du finder en index.js-fil, hvor vi definerer layoutkomponenter. index.css kom allerede med stilarter.

Efter at have undersøgt filen index.js, ser du, at der allerede er oprettet to komponenter: Header og TemplateWrapper. I TemplateWrapper pakker vi indholdet på vores site med layoutkomponenter, som vi ønsker at være til stede på flere sider.

Dette gøres muligt af børnene () rekvisitterne. Det vil gengive alle ikke-layoutkomponenter på vores websted, hvor det er placeret. Bemærk, at i modsætning til React børnes rekvisitter, er børne prop, der sendes til layoutkomponenter, en funktion og skal udføres.

Oprette først en ny mappe og CSS-fil på src / styles / layout-overide.css. Føj til listen over import i filen index.js. Vi er nødt til at importere det efter index.css for at tilsidesætte nogle eksisterende stilregler.

import React fra 'react'
import PropTypes fra 'prop-typer'
import Link fra 'gatsby-link'
importer hjelm fra 'reager-hjelm'
import './index.css'
import "../style/layout-overide.css";

Åbn layout-overide.css, og indsæt følgende stilregler. Ingen grund til at finde ud af disse.

* {
    baggrund: # f5f5f5;
    farve: sort;
}
html {
    højde: 100%;
}
krop {
    højde: 100%;
    kant: 5px solid # ffdb3a;
}
h1 {
    skriftstørrelse: 1,5rem;
    linjehøjde: 0,5rem;
}
p, div {
    skriftstørrelse: 16px;
}

Opdater overskriftskomponenten.

const Header = () => (
  
    
     

                   CodeStack                         );

Opret også en sidepanelkomponent.

const Sidebar = (rekvisitter) => (
     {props.title}. {props.description}
);

Vi ønsker sidepanelet og gengivet {børn ()} komponenter til at opføre sig på en responsiv måde som denne:

Da der ikke er nogen nem måde at definere medieforespørgsler i React, fandt jeg et bibliotek kaldet react-media, en CSS-medieforespørgselskomponent til React. Installer det.

npm installation - gem reaktionsmedier

Det giver en -komponent, der lytter til kampe til en CSS-medieforespørgsel og gengiver ting baseret på, om forespørgslen matcher eller ej.

Føj det til listen over import i vores fil.

importer medier fra 'reager-medier'

Lader layout alt i (Header, Sidebar og børn () komponenter), som vi ønsker i TemplateWrapper. Foretag følgende ændringer (undskyld det skamløse stik på mit navn):

const TemplateWrapper = ({børn}) => (
  
         
    
               {matches =>           Tændstikker ? (             
              
{børn ()}
                       ): (             
              
                {børn ()}               
                                                                        )         }                );
Du har dette!  / Kredit: Levon

Hvad sker der i den monolitiske blok af kode? React media bruger en Ternary-operation til at bestemme, hvad der skal gengives, baseret på en maxWidth på 848px. Når skærmen matcher bredden, gengives kun Header og børn () -komponenter.


        {matches =>
          Tændstikker ? (
            ... ting at gengive ...
          ): (
            ... ting at gengive ...
          )
        }
      
En ternær opdatering. Hvis betingelsen er sand, returnerer operatøren værdien af ​​expr1; Ellers returnerer det værdien af ​​expr2.

Hvis du bemærkede det, brugte vi også Flexbox til at placere placeringerne af børn () og sidefeltskomponenter.

Kør gatsby-udvikling på terminalen, og vores statiske blog skal se sådan ud nu:

Tager form

3. Oprettelse af blogindlæg

Lad os nu komme i at oprette faktiske blogindlæg. Gatsby bruger GraphQL til at hente data fra en eller mange kilder, f.eks. Din lokale disk, Wordpress API osv.

Personligt kan jeg godt lide det faktum, at jeg kan oprette en statisk blog og hente indhold fra et WordPress API. Min klient har adgang til Wordpress Editor, hvor han opretter indlæg, og jeg undgår at håndtere alle besværet med at udvikle et Wordpress-websted.

I dette indlæg indlæser vi dataene fra Markdown-filer, vi opretter på vores lokale disk. Gatsby-source-file-system-pluginet, vi konfigurerede tidligere, forventer, at vores indhold er i src / sider, så det er præcis, hvor vi vil sætte det!

En typisk praksis for blogindlæg er at navngive mappen noget som MM-DD-ÅÅÅÅ-titel. Du kan navngive det, hvad du vil, eller bare placere en markdown-fil i mappen / sider.

Lad os oprette en mappe src / sider / 12–22–2017-første indlæg, og placere et indeks.md inde. Skrive:

---
sti: "/ hej-verden"
dato: "2017-07-12T17: 12: 33.962Z"
titel: "My First Gatsby Post"
---
Oooooh-weeee, mit første blogindlæg!
Første post Ipsum er en vigtig nøgle til succes. Tillykke, du spillede dig selv. Omgiv dig med engle. Fejr succes ret, den eneste måde, æble.
 
Nøglen er at drikke kokosnød, frisk kokosnød, tro mig. Æggehvider, kalkunpølse, hvetebrød, vand. Naturligvis ønsker de ikke, at vi skal spise vores morgenmad, så vi vil nyde vores morgenmad.

Blokken omgivet af bindestreg kaldes frontmatter. De data, vi specificerer her, såvel som andre Markdown-filer, genkendes af gatsby-transformer-bemærkning-plugin.

Plugin konverterer frontmatter-metadatadelen af ​​din markdown-fil til frontmatter og indholdsdelen (Yippeeee, mit første blogindlæg!) Til HTML.

Når vi begynder at generere blogsider direkte fra markdown-filer i sektion 4 (næste afsnit), bruges sti til at specificere URL-stien, der skal gengives til filen. F.eks. Gengives markdown-filen ovenfor på localhost: 8000 / hallo-verden.

Lad os før det oprette en skabelon, der vil gengive enhver markdown-fil til sin egen blogside. Opret filen src / templates / blog-post.js (opret mappen thesrc / templates).

import React fra "react";
importer hjelm fra "reaktionshjelm";
eksport standardfunktionsskabelon ({
  data
}) {
  const post = data.markdownRemark;
  Vend tilbage (
    
            
        

{post.frontmatter.title}         
              ); }

Vi har konfigureret skabelonkomponenten til at modtage et dataobjekt, der kommer fra den GraphQL-forespørgsel, vi skal til at skrive.

Igen er GraphQL-forespørgslen nødvendig for at hente data i komponenten. Resultatet af forespørgslen indsprøjtes af Gatsby i skabelonkomponenten som data og markdownRemark.

Vi finder ud af, at egenskaben markdownRemark indeholder alle detaljerne i Markdown-filen.

Lader nu faktisk foretage forespørgslen. Det skal placeres under skabelonkomponenten:

eksport const pageQuery = graphql`
  forespørgsel BlogPostByPath ($ sti: streng!) {
    markdownRemark (frontmatter: {path: {eq: $ path}}) {
      html
      frontmatter {
        dato (formatString: "MMMM DD, ÅÅÅÅ")
        sti
        titel
      }
    }
  }
`
;

Hvis du ikke er bekendt med GraphQL, forsøger jeg at nedbryde, hvad der foregår her. For at lære mere om GraphQL skal du overveje denne fremragende ressource.

GraphQL er bare Facebooks idé om en bestemt type server. De har skrevet en specifikation om den type anmodninger, der kan sendes til den server, og hvordan serveren skal reagere. GraphQLs API er bedre end REST, fordi du beskriver de nøjagtige data, som klientsiden har brug for, så der ikke er mere underhentning eller overhentning af data.

Dette betyder, at du skal oprette din egen GraphQL-server. Heldigvis for os kommer GatsbyJS med sin egen GraphQL-server ud af boksen.

I koden ovenfor er BlogPostByPath den underliggende forespørgsel, som vil resultere i, at et blogindlæg returneres. Det returneres som data til injektion i skabelonkomponenten.

Vi videregiver BlogPostByPath $ path-argumentet for at returnere et blogindlæg relateret til den sti, vi i øjeblikket ser.

Desuden husk markdownRemark transformeret vores markdown-filer. Det behandles som en egenskab, hvis indhold vil være tilgængeligt via data.markdownRemark.

Vi kunne få adgang til HTML via data.markdownRemark.html. Desuden kan frontmatterindholdet, som vi oprettede med en blok dahes, fås via data.markdownRemark.title osv.

Hele blog-template.js skal se sådan ud:

import React fra "react";
importer hjelm fra "reaktionshjelm";
eksport standardfunktionsskabelon ({
  data
}) {
  const post = data.markdownRemark;
  Vend tilbage (
    
            
        

{post.frontmatter.title}         
              ); }

eksport const pageQuery = graphql`
  forespørgsel BlogPostByPath ($ sti: streng!) {
    markdownRemark (frontmatter: {path: {eq: $ path}}) {
      html
      frontmatter {
        dato (formatString: "MMMM DD, ÅÅÅÅ")
        sti
        titel
      }
    }
  }
`
;

På dette tidspunkt:

  • Vi har en masse plugins installeret til at udføre nogle værktøjer såvel som at indlæse filer fra disken og omdanne Markdown til HTML.
  • Vi har en enkelt, ensom Markdown-fil, der gengives som et blogindlæg.
  • Vi har en React-skabelon til gengivelse af blogindlæg i et layout samt en tilsluttet GraphQL til forespørgsel efter blogindlægsdata og injicerer React-skabelonen med de forespurgte data.

Sød!

4. Generering af nye sider fra blogindlægsdata.

Gatsby leverer et Node API, som giver funktionalitet til at oprette dynamiske sider fra blogindlæg. Denne API er eksponeret i thegatsby-node.js-filen i rodkataloget til dit projekt. Denne fil kan eksportere flere Node API'er, men vi er interesseret i createPages API.

Brug den følgende blok af kodestykker som angivet i de officielle dokumenter (Bemærk, at stien BlogPostTemplate var indstillet til at afspejle vores):

const path = kræve ('sti');
exports.createPages = ({boundActionCreators, graphql}) => {
  const {createPage} = boundActionCreators;
const blogPostTemplate = path.resolve (`src / templates / blog-post.js`);
returner grafql (`{
    allMarkdownRemark (
      sortering: {rækkefølge: DESC, felter: [frontmatter___date]}
      grænse: 1000
    ) {
      kanter {
        node {
          uddrag (beskæringslængde: 250)
          html
          id
          frontmatter {
            dato
            sti
            titel
          }
        }
      }
    }
  } `)
    .then (resultat => {
      if (result.errors) {
        returner Promise.reject (result.errors);
      }
result.data.allMarkdownRemark.edges
        .forEach (({{node}) => {
          createPage ({
            sti: node.frontmatter.path,
            komponent: blogPostTemplate,
            kontekst: {} // yderligere data kan videregives via kontekst
          });
        });
    });
}

Kontroller, om det fungerer. Jeg anbefaler at lukke dit broswer-vindue, stoppe gatsby-udviklingen af ​​serveren fra terminalen ved hjælp af ctrl c. Kør nu gatsby udvikle igen og åbn http: // localhost: 8000 / hallo-verden.

ja

Opret en anden fil src / sides / 24–12–2017-learning-grid / index.md

---
sti: "/ en anden-en"
dato: "2017-07-12T17: 12: 33.962Z"
titel: "My Second Gatsby Post"
---
I livet vil der være vejblokke, men vi kommer over det. Speciel klud alarm. Spil aldrig dig selv. Nøglen til mere succes er at få en massage en gang om ugen, meget vigtig, vigtig nøgle, tøjprat.
  // nogle css-gitterkoder  

Luk igen dit vindue i broswer, stop gatsby med at udvikle server. Kør gatsby udvikle igen og åbn http: // localhost: 8000 / en anden. Dette vises:

Gå videre, hvis du ønsker det, og opret dine egne sider.

5. Opret en liste over vores websteds markdownfiler på destinationssiden.

Den vanlige destinationsside, der følger med det stilladsede Gatsby-sted, findes på src / sides / index.js. Det er her, vi vil definere en skabelon og stille en forespørgsel for at injicere den med data til listen over .md-filer. Gør dette:

import React fra "react";
import Link fra "gatsby-link";
importer hjelm fra "reaktionshjelm";
import '../style/blog-listing.css';
eksport standardfunktion Indeks ({data}) {
  const {kanter: indlæg} = data.allMarkdownRemark;
  Vend tilbage (
    
      {stillinger         .filter (post => post.node.frontmatter.title.length> 0)         .map (({node: post}) => {           Vend tilbage (             
              

                 {post.frontmatter.title}                              

{post.frontmatter.date}               

{post.excerpt}                        );         })}        ); }

eksport const pageQuery = graphql`
  forespørgsel Indeksforespørgsel {
    allMarkdownRemark (sortering: {rækkefølge: DESC, felter: [frontmatter___date]}) {
      kanter {
        node {
          uddrag (beskæringslængde: 250)
          id
          frontmatter {
            titel
            dato (formatString: "MMMM DD, ÅÅÅÅ")
            sti
          }
        }
      }
    }
  }
`;

Jeg har tillid til, at du er dårlig på dette tidspunkt og allerede kender hvad der sker. Bemærk, at vi skrev en import ovenfor, der ikke findes. Opret nu filen /styles/blog-listing.css:

div.blog-post-preview {
    grænse-bund: 2px solid # e6e6e6;
    polstring: 1rem;
    polstring-bund: 1rem;
    margin-bund: 1rem;
}
h1> * {
    skriftstørrelse: 1.2rem;
    tekst-dekoration-linje: ingen;
}
h2 {
    skriftstørrelse: 0,8rem! vigtig;
    font-vægt: 100! vigtigt;
}

Genstart serveren, besøg destinationssiden, og du skal se listen på arbejdet:

Konklusion

Vi er kommet til slutningen af ​​denne tutorial. Tak, fordi du læste indtil videre.

Dette indlæg er bare toppen af ​​isbjerget i betragtning af mængden af ​​ting, du kan gøre med Gatsby. Du er velkommen til at udforske, hvordan du kunne implementere:

  • Søgefunktionalitet
  • Brug af tags til at kategorisere blogindlæg
  • Implementering af dit Gatsby-websted

Du kan få fat i den endelige kildekode her. Du er velkommen til at støtte mig (devapparel.co) og se godt ud, mens du er på det. Kommenter eller del også dette indlæg. Tak for at have læst!

P.S Jeg arbejder på en React-bog med Ohans Emmanuel, der ville få dig til at beherske React ved at bygge 30 små projekter på 30 dage. Hvis du vil holde dig opdateret om dette, skal du tilmelde dig adresselisten. Tak!