Kuinka rakentaa React ja Gatsby-pohjainen blogi noin 10 minuutissa

Kaverit / Kuva: Genevieve Perron-Migneron Unsplash-kuvassa
Vastuuvapauslauseke: Tämä kirjoitettiin Gatsby Versio 1: lle, versio 2 julkaistiin juuri, ja siihen on tehty joitain muutoksia. Työskentelen sitä varten toisen oppaan avulla.

Gatsby on ReactJS: ään perustuva nopea, staattinen sivustogeneraattori.

Staattinen sivustogeneraattori (SSG) on kompromissi koodatun HTML-staattisen sivuston ja täydellisen CMS: n (Content Management System) välillä, kuten Wordpress.

SSG: tä voidaan käyttää HTML-sivujen luomiseen sisältöpohjaisille verkkosivustoille (kuten blogeille). Tarvitaan vain tiedot sivun sisällöstä ja malli sisällön täyttämiseksi.

Tämä viesti jaetaan viiteen osaan:

  1. Päästä alkuun.
  2. Asetteluosien luominen.
  3. Luodaan blogiviestejä.
  4. Luodaan uusia sivuja blogikirjoitustiedoista.
  5. Luo luettelo sivustomme merkintätiedostoista aloitussivulle.

Suhtaudumme syvästi Gatsbyyn ja sen ominaisuuksiin luomalla kuvitteellisen staattisen blogin nimeltä CodeStack. Kokonaisuus näkyy alla. Mennään! ️

Blogilistaussivu / Yksi blogin viesti

1. Aloittaminen

edellytykset

Varmista ensin, että Node.js on asennettu järjestelmään. Jos ei, siirry nodejs.org-sivustoon ja asenna käyttöjärjestelmällesi viimeisin versio.

Lisäksi tässä artikkelissa oletetaan, että sinulla on ymmärrys ReactJS: stä.

Asenna CLI

Gatsbyllä on komentorivityökalu, joka tarjoaa hyödyllisiä komentoja, kuten:

  • gatsby new: uuden Gatsby-projektin telineisiin.
  • gatsby kehittää: kuumalatausominaisuuksilla varustetun web-kehityspalvelimen käynnistämiseen.
  • gatsby build: tuotantoon valmis version rakentamiseksi projektista.

Asenna kirjoittamalla seuraava päätelaitteeseen ja painamalla Enter:

npm install --global gatsby-cli

Annetaan luoda projektikansio kooditaulukko-blogi ja selata päätelaitetta siihen.

gatsby uusi koodekki-blogi && cd $ _

Jos suoritat projektihakemistossa kehitetyn gatsby-kehityksen, rakennustelineen tulisi näyttää tältä:

Lisäosien lisääminen

Gatsbyllä on suuri ja kasvava laajennusohjelma. Ne ovat pohjimmiltaan Node.js-paketteja, jotka ovat käyttöliittymässä Gatsbyn sovellusliittymien kanssa.

Ne voidaan asentaa NPM: n (Node Package Manager) kautta päätelaitteeseen, ja niillä on yleensä kolme luokkaa: toiminnalliset, lähde- ja muuntajaliitännät.

Toiminnalliset liitännät

Nämä laajennukset tarjoavat lisätoimintoja Gatsby-sivustossa tai sen kehitysympäristössä. Tarvitsemme sovelluksemme:

  • gatsby-plugin-react-kypärä: mahdollistaa otsikkokoodien muokkaamisen. Huomaa, että se on jo asennettu rakennustelineeseemme.
  • gatsby-plugin-catch-links: katkaisee paikalliset linkit merkinnöiltä ja muilta reagoimattomilta sivuilta ja tekee asiakaspuolen pushState-palvelun, jotta selaimen ei tarvitse päivittää sivua.

Asenna laajennukset tai vain toinen laajennus.

npm asenna gatsby-plugin-react-kypärä gatsby-plugin-catch-links

Aina kun lisäämme uuden laajennuksen, meidän on päivitettävä gatsby-config.js-tiedosto uudella laajennuksella, jotta Gatsby tunnistaa ja käyttää sitä. Käytämme back-tickejä.

module.exports = {
  siteMetadata: {
    otsikko: `Gatsby Default Starter`,
  },
  plugins: [
    `Gatsby-plugin-reagoivat-helmet`,
    `Gatsby-plugin-saalis-links`,
  ],
}

Lähdelaajennukset

Nämä laajennukset “lähtevät” tietoja etä- tai paikallisista sijainneista siihen, mitä Gatsby kutsuu solmuihin. Tarvitsemme kirjoittaaksemme viestejämme Markdownissa paikalliselle levylle:

  • gatsby-source-tiedostojärjestelmä: lähtee tietoja tiedostoista tietokoneesi tiedostojärjestelmästä.
npm asenna gatsby-source-tiedostojärjestelmä

Päivitä gatsby-config.js-tiedosto:

module.exports = {
  siteMetadata: {
    otsikko: `Gatsby Default Starter`,
  },
  plugins: [
    `Gatsby-plugin-reagoivat-helmet`,
    `Gatsby-plugin-saalis-links`,
    {
      ratkaise: `gatsby-source-tiedostojärjestelmä`,
      vaihtoehdot: {
        polku: `$ {__ dirname} / src / pages",
        nimi: 'sivut',
      },
    }
  ],
}

Mitä täällä tapahtuu? Valinnaobjekti voidaan siirtää laajennukselle lisää määrityksiä. Olemme kulkemassa tiedostojärjestelmän polkua (ts. Missä Markdown-tiedostomme sijaitsevat) ja sitten lähdetiedostojen nimeä, jotta Gatsby tietää lähdetiedostoistamme ja siitä, mihin muuntajien laajennuksia käytetään.

Muuntajan liitännäiset

Nämä laajennukset muuttavat raakatiedot solmuista käyttökelpoisiksi datamuodoiksi. Tarvitsemme esimerkiksi:

  • gatsby-transformer-remark: Tämä muuntaa paikallisen levyn markdown .md-tiedostoihin kirjoitetut blogiviestit HTML-muotoon renderointia varten.
npm asenna gatsby-muuntaja-huomautus

Päivitä gatsby-config.js-tiedosto uudelleen.

module.exports = {
  siteMetadata: {
    otsikko: `Gatsby Default Starter`,
  },
  plugins: [
    `Gatsby-plugin-reagoivat-helmet`,
    `Gatsby-plugin-saalis-links`,
    {
      ratkaise: `gatsby-source-tiedostojärjestelmä`,
      vaihtoehdot: {
        polku: `$ {__ dirname} / src / pages",
        nimi: 'sivut',
      },
    },
    `Gatsby-muuntaja-remark`,
  ],
}
Hyvin tehty! / Luotto: Nigel Payne

2. Asetteluosien luominen

Gatsby antaa sinun luoda helposti asettelukomponentteja. Asettelukomponentit ovat sivustosi osioita, jotka haluat jakaa useille sivuille. Rakentamassamme blogissa nämä ovat otsikko ja sivupalkit.

Tutustu juurikansioon src / asettelut. Löydät index.js-tiedoston, jossa määrittelemme asetteluosat. index.css tuli jo tyyleillä.

Tutkittuaan index.js-tiedoston, huomaat, että kaksi komponenttia on jo luotu: Otsikko ja TemplateWrapper. Kääriimme TemplateWrapper-sivustomme sisällön asetteluosilla, jotka haluamme olla läsnä useilla sivuilla.

Tämän mahdollistavat lasten () rekvisiitta. Se tekee sivustollemme kaikki muut kuin asetteluavat komponentit mihin ne sijoitetaan. Huomaa, että toisin kuin reagoi lasten rekvisiitta, asetteluosille siirretyt lapset ovat toiminto ja se on suoritettava.

Luo ensin uusi kansio ja CSS-tiedosto osoitteessa src / tyylit / layout-overide.css. Lisää tuontiluetteloon index.js-tiedostossa. Meidän on tuotava se index.css: n jälkeen, jotta voimme ohittaa joitain olemassa olevia tyylisääntöjä.

tuo reagoi 'reagoi'
tuo PropTypes 'prop-tyypeistä'
Tuo linkki 'gatsby-linkistä'
tuo kypärä 'react-kypärästä'
Tuo './index.css'
tuo "../styles/layout-overide.css";

Avaa layout-overide.css ja liitä seuraavat tyylisäännöt. Niitä ei tarvitse selvittää.

* {
    tausta: # f5f5f5;
    väri musta;
}
html {
    korkeus: 100%;
}
vartalo {
    korkeus: 100%;
    reuna: 5px kiinteä # ffdb3a;
}
h1 {
    fonttikoko: 1,5rem;
    linjan korkeus: 0,5rem;
}
p, div {
    kirjasinkoko: 16 kuvapistettä;
}

Päivitä otsikkokomponentti.

const Header = () => (
  
    
     

                   CodeStack                         );

Luo myös sivupalkkikomponentti.

const Sivupalkki = (rekvisiitta) => (
     {props.title}. {props.description}
);

Haluamme sivupalkin ja renderoidut {lapset ()} -komponentit käyttäytyvän reagoivasti seuraavasti:

Koska Reactissä ei ole helppoa tapaa määritellä mediakyselyjä, löysin kirjasto nimeltä react-media, CSS: n mediakyselykomponentti Reaktalle. Asenna se.

npm install - säästää reagenssi-media

Se tarjoaa -komponentin, joka kuuntelee vastaavuuksia CSS-mediakyselyyn ja tuottaa juttuja sen perusteella, vastaako kysely vai ei.

Lisää se tiedostomme tuontiluetteloon.

tuo media mediasta "react-media"

Antaa asettaa kaiken (Otsikko, Sivupalkki ja lapset () -komponentit) haluamallasi tavalla TemplateWrapperissa. Tee seuraavat muutokset (anteeksi nimeni häpeämätön pistoke):

const TemplateWrapper = ({lapset}) => (
  
              
               {ottelut =>           Ottelut ? (             
              
{lapset ()}
                       ): (             
              
                {Lapset ()}               
                                                                        )         }                );
Sait tämän! / Luotto: Levon

Mitä tapahtuu siinä monoliittisessa koodilohossa? React-media käyttää ternaarioperaatiota määrittääkseen, mitä tuottaa, enimmäisleveyden 848px perusteella. Kun näyttö vastaa leveyttä, vain ylä- ja alaosat () komponentit renderoidaan.


        {ottelut =>
          Ottelut ? (
            ... tavarat annettavaksi ...
          ): (
            ... tavarat annettavaksi ...
          )
        }
      
Ternary virkistäjä. Jos ehto on totta, operaattori palauttaa arvon expr1; muuten se palauttaa arvon expr2.

Jos huomasit, käytimme Flexboxia myös lasten () ja sivupalkin komponenttien sijoitteluun.

Suorita gatsby kehittää terminaalissa ja staattisen blogin pitäisi näyttää nyt näin:

Muotoilu

3. Blogiviestien luominen

Nyt päästään luomaan todellisia blogiviestejä. Gatsby käyttää GraphQL: tä tietojen hakemiseen yhdestä tai useammasta lähteestä, kuten paikalliselta levyltä, Wordpress API: lta ja niin edelleen.

Henkilökohtaisesti pidän siitä, että voin luoda staattisen blogin ja hakea sisältöä WordPress-sovellusliittymästä. Asiakkaallani on pääsy Wordpress Editoriin, jossa hän luo viestejä, ja en välitä käsittelemään kaikkia Wordpress-sivuston kehittämisen vaivaa.

Tähän viestiin lataamme tiedot Markdown-tiedostoista, jotka luomme paikalliselle levylle. Aikaisemmin määrittämämme gatsby-source-tiedostojärjestelmän laajennus odottaa sisällön olevan src / sivuilla, joten sijoitamme sen tarkalleen!

Tyypillinen käytäntö blogin kirjoittamisessa on nimetä kansiolle jotain MM-PP-VVVV-otsikko. Voit nimetä sen haluamallasi tavalla tai sijoittaa merkinnätiedoston / pages-kansioon.

Luodaan kansio src / pages / 12–22–2017-first-post ja asetetaan hakemisto.md sisälle. Kirjoittaa:

---
polku: "/ hello-world"
päivämäärä: "2017-07-12T17: 12: 33.962Z"
otsikko: "Ensimmäinen Gatsby-viestini"
---
Oooooh-weeee, ensimmäinen blogini!
Ensimmäinen viesti Ipsum on merkittävä avain menestykseen. Onnittelut, pelaat itse. Ympäröi itsesi enkeleillä. Juhli menestystä oikein, ainoa tapa, omena.
 
Tärkeintä on juoda kookospähkinää, tuoretta kookospähkinää, luota minuun. Munavalkuaiset, kalkkunamakkara, vehnäleipä, vesi. Tietysti he eivät halua meidän syövän aamiaista, joten aiomme nauttia aamiaisen.

Kriipsillä ympäröityä lohkoa kutsutaan etumateriaaliksi. Gatsby-transformer-remark -laajennus tunnistaa täällä määrittämämme tiedot sekä muut Markdown-tiedostot.

Plugin muuntaa merkintätiedostosi etumatterin metatiedot osan etumatteriksi ja sisältöosan (Yippeeee, ensimmäinen blogini viesti!) HTML-muotoon.

Kun aloitamme blogisivujen tuottamisen suoraan osion 4 (seuraava osa) merkintätiedostoista, polkua käytetään URL-osoitteen polun määrittämiseen tiedoston tuottamiseksi. Esimerkiksi yllä oleva merkintätiedosto esitetään osoitteessa localhost: 8000 / hello-world.

Ennen sitä voidaan luoda malli, joka tuottaa kaikki merkintätiedostot omalle blogisivulleen. Luo tiedosto src / templates / blog-post.js (luo kansio thesrc / templates).

tuo reagoida "reagoida";
tuo kypärä "react-kypärä";
vie oletustoiminnon malli ({
  data
}) {
  const post = data.markdownRemark;
  palata (
    
            
        

{post.frontmatter.title}         
              ); }

Olemme perustaneet mallikomponentin vastaanottamaan tietoobjektin, joka tulee siitä GraphQL-kyselystä, jota aiomme kirjoittaa.

Jälleen kerran tarvitaan GraphQL-kysely tietojen noutamiseksi komponenttiin. Gatsby injektoi kyselyn tuloksen mallikomponenttiin datana ja markdownRemark-tiedostona.

Huomaamme, että markdownRemark-ominaisuus sisältää kaikki Markdown-tiedoston tiedot.

Antaa nyt tosiasiallisesti tehdä kyselyn. Se tulisi asettaa mallikomponentin alapuolelle:

vie const pageQuery = graphql`
  kysely BlogPostByPath ($ polku: String!) {
    markdownRemark (etumatka: {polku: {eq: $ polku}}) {
      html
      etumatkailija {
        päivämäärä (formatString: "KKMM PP, VVVV")
        polku
        otsikko
      }
    }
  }
`
;

Jos et ole perehtynyt GraphQL: ään, yritän eritellä, mitä täällä tapahtuu. Jos haluat lisätietoja GraphQL: stä, ota huomioon tämä erinomainen resurssi.

GraphQL on vain Facebookin idea tietyn tyyppisestä palvelimesta. He ovat kirjoittaneet eritelmän siitä, millaisia ​​pyyntöjä voidaan lähettää kyseiselle palvelimelle ja kuinka palvelimen tulisi vastata. GraphQL: n sovellusliittymä on parempi kuin REST, koska kuvailet tarkat tiedot, joita asiakaspuolet tarvitsevat, joten tietoja ei enää tarvitse hakea tai hakea liikaa.

Tämä tarkoittaa, että sinun on luotava oma GraphQL-palvelin. Meille onneksi GatsbyJS tuo mukanaan oman GraphQL-palvelimen.

Yllä olevassa koodissa BlogPostByPath on alla oleva kysely, jonka seurauksena blogin viesti palautetaan. Se palautetaan tietoina injektiota varten Mallikomponenttiin.

Hyväksymme BlogPostByPath $ path-argumentin palauttaaksemme blogipostin, joka liittyy parhaillaan tarkastelemaamme polkuun.

Lisäksi Recall markdownRemark muutti merkintätiedostot. Sitä käsitellään omaisuutena, jonka sisältö on saatavissa data.markdownRemark-sivuston kautta.

Voimme käyttää HTML: ää data.markdownRemark.html-muodossa. Myös viivalohkolla luomamme etumatterin sisältöön pääsee data.markdownRemark.title jne. Kautta.

Koko blogi-mallin.js pitäisi näyttää tältä:

tuo reagoida "reagoida";
tuo kypärä "react-kypärä";
vie oletustoiminnon malli ({
  data
}) {
  const post = data.markdownRemark;
  palata (
    
            
        

{post.frontmatter.title}         
              ); }

vie const pageQuery = graphql`
  kysely BlogPostByPath ($ polku: String!) {
    markdownRemark (etumatka: {polku: {eq: $ polku}}) {
      html
      etumatkailija {
        päivämäärä (formatString: "KKMM PP, VVVV")
        polku
        otsikko
      }
    }
  }
`
;

Tässä tilanteessa:

  • Meille on asennettu joukko laajennuksia suorittamaan joitain apuohjelmia sekä lataamaan tiedostoja levyltä ja muuttamaan Markdown HTML-muotoon.
  • Meillä on yksi, yksinäinen Markdown-tiedosto, joka toimitetaan blogiviestinä.
  • Meillä on React-malli blogin kirjoitusten renderoimiseksi asettelussa sekä johdotettu GraphQL-kysymys blogin viestitietojen kyselyä varten ja React-mallin lisäämiseksi kyselyyn.

Makea!

4. Uusien sivujen luominen blogikirjoitustiedoista.

Gatsby tarjoaa Node-sovellusliittymän, joka tarjoaa toimintoja dynaamisten sivujen luomiseen blogiviestistä. Tämä sovellusliittymä paljastetaan projektin juurikansion hakemistossa thegatsby-node.js. Tämä tiedosto voi viedä useita Solmu-sovellusliittymiä, mutta olemme kiinnostuneita createPages-sovellusliittymästä.

Käytä seuraavaa koodinpätkälohkoa virallisissa asiakirjoissa annettujen ohjeiden mukaisesti (Huomaa, että blogPostTemplate -polku on asetettu heijastamaan meidän omaamme):

const polku = vaadi ('polku');
export.createPages = ({robeActionCreators, graphql}) => {
  const {createPage} = BorderActionCreators;
const blogPostTemplate = path.resolve (`src / templates / blog-post.js`);
palauta graphql (`{
    allMarkdownRemark (
      lajittelu: {tilaus: DESC, kentät: [frontmatter___date]}
      raja: 1000
    ) {
      reunat {
        solmu {
          ote (katkaistuPituus: 250)
          html
          id
          etumatkailija {
            Treffi
            polku
            otsikko
          }
        }
      }
    }
  } `)
    . sitten (tulos => {
      if (tulos.virheet) {
        palauta Promise.reject (tulos.virheet);
      }
result.data.allMarkdownRemark.edges
        .forEach (({{solmu}) = = {
          luo sivu({
            polku: node.frontmatter.path,
            komponentti: blogPostTemplate,
            konteksti: {} // lisätietoja voidaan välittää kontekstin kautta
          });
        });
    });
}

Tarkista, toimiiko se. Suosittelen sulkemaan broswer-ikkuna ja pysäyttämään gatsby kehittämään palvelinta päätelaitteelta käyttämällä ctrl c. Nyt suorita gatsby kehittää uudelleen ja avaa http: // localhost: 8000 / hello-world.

kyllä ​​

Luo toinen tiedosto src / pages / 24–12–2017-learning-grid / index.md

---
polku: "/ toinen-yksi"
päivämäärä: "2017-07-12T17: 12: 33.962Z"
otsikko: "Toinen Gatsby-viestini"
---
Elämässä tulee olemaan esteitä, mutta tulemme sen tulemaan. Erityinen kangasvaroitus. Älä koskaan pelaa itse. Avain menestykseen on saada hieronta kerran viikossa, erittäin tärkeä, tärkein avain, kangaspuhe.
  // jokin css-ruudukko  

Sulje taas broswer-ikkuna, lopeta gatsby kehittää palvelinta. Suorita gatsby kehittää uudelleen ja avaa http: // localhost: 8000 / another-one. Tämä näkyy:

Jatka, jos haluat, ja luo omat sivusi.

5. Luo aloitussivulle luettelo sivustomme merkintätiedostoista.

Rakennustelineiden Gatsby-sivuston mukana tuleva oletuksena oleva aloitussivu sijaitsee osoitteessa src / pages / index.js. Tässä määrittelemme mallin ja teemme kyselyn lisäämiseksi siihen tietoja .md-tiedostojen luettelon tiedoista. Toimi näin:

tuo reagoida "reagoida";
Tuo linkki "gatsby-linkistä";
tuo kypärä "react-kypärä";
Tuo '../styles/blog-listing.css';
vie oletustoiminto Hakemisto ({data}) {
  const {reunat: viestit} = data.allMarkdownRemark;
  palata (
    
      {viestiä         .suodatin (post => post.node.frontmatter.title.length> 0)         .map (({solmu: post}) => {           palata (             
              

                 {post.frontmatter.title}                              

{post.frontmatter.date}               

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

vie const pageQuery = graphql`
  kysely IndexQuery {
    allMarkdownRemark (lajittelu: {järjestys: DESC, kentät: [frontmatter___date]}) {
      reunat {
        solmu {
          ote (katkaistuPituus: 250)
          id
          etumatkailija {
            otsikko
            päivämäärä (formatString: "KKMM PP, VVVV")
            polku
          }
        }
      }
    }
  }
`;

Luotan siihen, että olet tässä vaiheessa rouva, ja tunnet jo tapahtuvan. Huomaa, että kirjoitimme yllä olevan tuonnin, jota ei ole olemassa. Luo nyt tiedosto /styles/blog-listing.css:

div.blog-post-preview {
    reunus-pohja: 2px kiinteä # e6e6e6;
    padding-top: 1rem;
    padding-bottom: 1rem;
    marginaali-pohja: 1rem;
}
h1> * {
    kirjasinkoko: 1,2rem;
    teksti-koriste-rivi: ei mitään;
}
h2 {
    fonttikoko: 0,8rem! tärkeä;
    fontin paino: 100! tärkeä;
}

Käynnistä palvelin uudelleen, käy aloitussivulla ja sinun pitäisi nähdä luettelo työssä:

johtopäätös

Olemme tulleet tämän oppaan loppuun. Kiitos, että luit tähän mennessä.

Tämä viesti on vain jäävuoren huippu ottaen huomioon asiat, jotka voit tehdä Gatsbyn kanssa. Voit vapaasti tutkia miten voit toteuttaa:

  • Hakuominaisuudet
  • Tunnisteiden käyttö luokittelemaan blogiviestit
  • Gatsby-sivustosi käyttöönotto

Voit napata lopullisen lähdekoodin täältä. Tuet vapaasti minua (devapparel.co) ja näytä hyvältä sitä katsellessasi. Myös kommentoi tai jaa tämä viesti. Kiitos lukemisesta!

P.S Työskentelen React-kirjan kanssa Ohans Emmanuelin kanssa, joka auttaisi sinua hallitsemaan Reaktia rakentamalla 30 pientä projektia 30 päivässä. Liity postituslistaan, jos haluat pysyä ajan tasalla tästä. Kiitos!