Miten rakentaa bloggauspaikka Gatsbyn kanssa

Kehykset, kuten reagoida vain Lähetä JavaScript alas asiakkaille, jota käytetään sitten elementtien luomiseksi näytöllä. HTML, jonka sivun kuormitukset ovat vähäiset, koska kaikki sisältö syntyy asiakkaan puolella, kun kaikki on ladattu.

Hankkeissa, joilla on dynaamiset tiedot, kuten blogi tai kauppa, JavaScript on tultava ensin ennen kuin muut tiedot voidaan hakea. Jopa käytettäessä nopeusparannustekniikoita, kuten koodin halkaisua, jos nippu ei lataa, koko sivusto lopettaa työskentelyn.

• Web-suunnittelutyökalut, joiden avulla voit työskennellä älykkäämpiä

Static-sivuston generaattorit ottavat dynaamisen sisällön ja luovat valmiiksi rakennettuja sivuja valmiiksi palvelemaan. Jos tiedot muuttuvat, projekti voidaan rakentaa uudelleen ja uusi sisältö palvella. Lopputulos paranee nopeutta, skaalautuvuutta ja - ilman jatkuvia yhteyksiä tietokantaan - Turvallisuus. Vaikka lähestymistapa ei ole ihanteellinen jatkuvasti muuttuville tiedoille, kuten liikkuvan uutisalueelle, monet hankkeet voivat hyötyä.

Gatsby on staattinen generaattori, joka on rakennettu reagoidessaan. Graphql: n ja laajennusten avulla se voi ottaa tietoja eri lähteistä ja siirtää ne komponentteihin. Kun tämä on tehty, se analysoi projektin ja tuottaa HTML-tiedostoja asiakkaille, kun taas reagoi ja sovelluslogiikka ladataan taustalla.

Lisää sivuston rakennusvaihtoehtoja, katso Top Verkkosivuston rakentaja Picks. Tarvitsetko oikean tuen? Nämä ovat sivujen ylläpito tarvitsemasi palvelut.

Lataa tiedostot Tähän opetusohjelmaan.

• 10 parasta staattista sivuston generaattoria

Aloittaa

Aloita, voimme saada GATSBY SCAFFOLDin perusprojektin meille. Se tarjoaa kehityspalvelimen, jota voimme käyttää yhdessä muutaman hyödyllisen kehittäjän työkalujen kanssa. Varmista, että solmu ja NPM ovat ajan tasalla ja suoritetaan NPX GATSBY Uusi Gatsby-sivusto Komentorivillä "Gatsby-sivusto" on kansio rakentaa.

Tässä kansiossa Gatsby tarjoaa muutamia komentoja osana alustusprosessia. Käynnissä nämä tekevät sivuston rakentamista paljon helpommaksi. Juosta NPM RUN kehittää Käynnistä kehityspalvelin ja nähdä muutokset päivitetään automaattisesti selaimessa.

Kaikki sisältö asuu / SRC-kansiossa ja kaikki asennustiedostot ovat etuliitteenä "Gatsby-" projektin juuressa. Kaikki toimii komponenttien kautta, joilla ei ole ylimääräistä rakennetta tai käyttäytymistä, jotta ne voidaan rakentaa Gatsbyn kanssa.

/ SRC / Sivujen kansion sisältö on erityinen. Gatsby poimii minkä tahansa kansion osan sivun luomiseen. Avaa index.js ja poista komponentin sisältö. Huomaa, että sivupäivitykset selaimessa tallennetaan.

 const indexpage = () = & gt; (
  & lt; layout & gt;
    {/ * Tyhjä * /}
  & lt; / Layout & GT;
) 

Rakenna sivu

Jokainen blogikirja tarvitsee oman sivunsa. On mahdollista tehdä sivukomponentti jokaiselle uudelle postille, mutta tämä luo esteen niille, joita ei ole käytetty reagoimaan ja vaativat myös enemmän huoltoa tulevaisuudessa suunnitteluna.

Gatsbyssä on kirjasto, joka on täynnä laajennuksia, jotka ovat valmiita muuttamaan tapaa, jolla se tuottaa sivuja, jotka löytyvät Gatsbyjs.org/Pluginsista. Siellä voimme löytää kahdenlaisia ​​plugin - "lähde" ​​ja "muuntaja".

Lähde-plugin ottaa tietoja lähteestä ja muuntaa ne "solmuiksi", mikä Gatsbys käsittelee tietoja sivustossa. Tiedot voidaan hakea paikallisesti tiedostoille, kuten kuvista tai etänä ulkoisista tiedoista, kuten tietokannasta.

Muuntajan laajennus voi sitten ottaa nämä solmut ja luoda uusia, jotta asiat helpottavat Gatsbyn työskentelyä. Esimerkiksi YAML-tiedostoja ei voi purkaa oletusarvoisesti, mutta muuntajan plugin voi kääntää sisäkkäisen syntaksin ne esineiksi lukemaan sisäosia.

Markdown on tavallinen muoto, jota käytetään tekstiin, koska se on monipuolinen, helppo lukea ja voidaan muuntaa HTML: ksi. Lähde plugin "GATSBY-SOURCE-FILESSSTEM" voi ottaa tiedostoja paikallisesti ja muuntaa ne solmuiksi, kun taas transformaation laajennus "Gatsby-muuntajan huomautuksella" käyttää huomautusta muuntamaan markdowniksi jotain, jota voimme poimia ja kyselyä graphql: llä.

Käynnistysprojektissa on jo lähde plugin. Asenna toinen käynnissä NPM asentaa Gatsby-muuntajan huomautuksen . Huomaa, että kehityspalvelinta on ehkä käynnistettävä uudelleen, jotta se poimitaan.

Määritä laajennukset

Asennetun laajennuksen avulla Gatsby on kerrottava, miten sitä käytetään. Kaikki tämä logiikka pidetään käynnistyksen Gatsby-config.js-tiedoston sisällä. Siinä on muutamia laajennuksia, jotka on jo perustettu ulos laatikosta, mutta meidän on lisättävä meidän yhdistelmä, jotta voimme noutaa ja käyttää markdownia.

Yksinkertaiset laajennukset, joilla ei ole määräytymismenetelmää, voidaan lisätä merkkijonoina. Koska muunnoksen plugin on vain yksi työ, se ei tarvitse perustaa. Lähde pluginille on kuitenkin kerrottava, mistä löytyy viestejä. Lisää ne laajennuksen alareunaan.

 Plugins: [
  [...]
  "Gatsby-muuntajan huomautus",
  {
    Resolve: `Gatsby-lähde-tiedostojärjestelmä",
    Vaihtoehdot: {
      Nimi: "Sivut",
      Polku: `$ {__ dirname} / src / sivut`
    }
  }
] 

Koska jokainen viesti tulee omaksi sivuksi, on järkevää lisätä ne SRC / Pages -kansioon. Nämä asetusvaihtoehdot kertovat Gatsbylle katsomaan kyseistä kansiota ja vetämään kaikki tiedostot.

Luo blogiviesti

Pluginsseilla voimme luoda ensimmäisen postin. Luo kansio nimeltä "My-first-Post" ja lisää "my-first-post.md" Markdown-tiedosto sen sisällä. Tämä yleissopimus antaa meille mahdollisuuden lisätä kaikki asiaan liittyvät tiedostot - kuten kuvat - itse postin vieressä.

Meidän on lisättävä tähän viestiin, jotta tiedämme, että se toimii odotetusti.

 ---
Polku: / Post / My-First-Post
Päivämäärä: 2018-12-01
Yhteenveto: Viestin yhteenveto
Tunnisteet: [Oma, ensimmäinen, post]
Otsikko: Ensimmäinen viesti
---
Tämä on ensimmäinen viesti! 

Tiedoston yläosassa olevien viivojen välinen sisältö on nimeltään "etuna". Tämä sisältää metatietoja kirjoitetun viestin ympärille, kuten päivämäärä ja otsikko. Kaikki nämä tiedot poimitaan huomautuksella ja ne voidaan kysyä GraphQL: n sisällä.

Tässä tapauksessa tärkeä etuosa on polku arvo. Tämä on silloin, kun viesti elää ja on oltava ainutlaatuinen. Gatsby lukee polun ja tehdä uuden sivun siellä.

Ennen kuin voimme näyttää viestit, tarvitsemme sivun komponentin, jolla voit näyttää viestin. Sen on kyettävä ottamaan arvot rekvisiittaina ja näyttämään sisällön HTML: n lohkona.

Luo uusi komponentti osoitteessa "SRC / BlogPost.js". Tiedot jokaisesta virasta tulevat läpi tiedot Prop from Graphql.

 Tuonti reagoi "reagoi"
Tuo {GRAPHQL} "GATSBY"
Tuo kypärä "React-Helmet"
Tuo asettelu "../components/layout"
Vienti const blog = ({data: {markdownremark}) = & gt; {
  const {frontmatter, html} = markdownremark
  Paluu (
    & lt; layout & gt;
      & lt; kypärä otsikko = {Frontmatter.Title} / & gt;
      & lt; div vaarallinenSeinnerhtml = {{__html: html}} / & gt;
    & lt; / Layout & GT;
  )
} 

"React-kypärä" -paketti, joka on yhdistetty Gatsbyn kanssa, voit päivittää arvot, jotka yleensä asuvat & lt; pää & gt; HTML-sivun. Täällä asetamme tehtävän otsikon olevan & lt; otsikko & gt; sivun itse. On paljon muita vaihtoehtoja, jotka se hyväksyy, mitä voit saada lisätietoja osoitteesta github.com/nfl/react-helmet .

Tietojen kysely

Tässä vaiheessa Gatsbys ei ole tiedonsiirtoa tällä sivulla. Meidän on haettava tiedot Markdown-tiedostoista näiden tietojen täyttämiseksi. Tätä varten voimme käyttää GRAPHQL - Facebookin luomaa kyselyn kieltä, joka vetää asiaankuuluvat tiedot reagoimaan komponentteihin. Lyhyesti sanottuna GraphQL määrittää rakenteen tiedot palautetaan sisäkkäisten esineiden avulla. Näin me vain kyselemme tietoja, joita voimme todella käyttää.

Gatsbys tarjoaa mallin kirjaimellisen tehtävän, joka voi tulkita kyselyitä. Se havaitsee sen käytön ja läpäisee tulostensa komponenttiin. Tämä tarkoittaa, että voimme lisätä kyselyn samassa tiedostossa ja pitää siihen liittyvää logiikkaa yhdessä.

Vie CONST PageQUERY = GRAPHQL`
  kysely ($ polku: merkkijono!) {
    MarkDownRemark (edistimellä: {polku: {eq: $ polku}}) {
      html
      Edistin {
        Päivämäärä (FormatString: "D MMMM YYYY")
        nimi
      }
    }
  } `

Tämän kyselyn sisällä pyydämme Gatsbyn kaikille Markdown-solmuista, joissa on polku, joka vastaa sivua. Jos se löytää yhden, se siirretään sitten post-postin päivämäärän ja otsikon komponenttiin.

Kyselyjen kirjoittaminen tällä tavoin rajoitetaan vain sivukomponentteihin. Kaikki muut komponentit, jotka tarvitsevat kyselyä solmujen on käytettävä & lt; staticquery & gt; ja lataa se eteen. Tässä vaiheessa kehityspalvelin voi varoittaa tästä Blogipostaus komponentti, mutta tämä johtuu siitä, että se ei ole tietoinen siitä tulee sivukomponentti vielä. Muutamme sitä.

Luo sivut

Oletusarvoisesti Gatsby tekee vain sivuja komponentteille / SRC / sivuja , tarkoittaa, että meidän on luotava sivuja muulla tavoin.

Gatsby paljastaa muutamia menetelmiä sen rakentamisesta, jotta voit käyttää datasolmuja. Näitä voi käyttää projektin juuressa "Gatsby-Node.js". Tässä tapauksessa käytämme GRAPHQL: tä hakemaan kaikki blogikirjoitukset ja anna sen Creapepages Callback Luo sivu jokaiselle. Koska tämä on asynkroninen toiminta, meidän on palattava lupaus, joten Gatsby voi jatkaa rakennusprosessia.

 CONTS PATH = vaatia ("polku")
Vienti.Createpages = ({Toimet, GRAPHQL}) = & GT; {
  palauttaa graphql (`
    {
      allmarkdownremark {
        reunat {
          solmu {
            Edistin {
              polku
            }
          }
        }
      }
    }
  ")
} 

Puhelupalvelun ensimmäinen osa on kysely, joka hakee jokaisen viestin polun, koska jokainen yksittäinen sivu saa omat tiedot. GraphQL-puhelu palauttaa lupauksen, joka sisältää kaikki viestit. Voimme käyttää tietoja siitä, että luodaan joitakin sivuja.

. Sitten (tulos = & gt; {
  jos (tulos.errors) {
    Paluu Promise.reject (tulos.Errors)
  }
  consta blogpostTemplate = Path.resolve ('src / komponentit / blogpost.js')
  tulos.fata.allmarkdownremark.edges.foreach (({node}) = & gt; {
    Actions.createPage ({
      Polku: Node.frontMatter.path,
      Komponentti: BlogiPostTemplate,
    }))
  }))
}) 

Jos kysely kohtaa virheen, pysäytä rakennusprosessi selvittääksesi miksi. Jos kaikki on kunnossa, noutaa komponentti ja soita luo sivu Menetelmä sivun tuottamiseksi toimitetulla polulla.

Sivut tuottavat, kaikki mitä tarvitaan nyt, on tapa löytää ne. Voimme käyttää kyselyä nykyisessä hakemistosivun komponentissa.

 Vienti CONST PageQUERY = GRAPHQL`
  Kysely {
    AllmarkDownRemark (lajittele: {kentät: [Frontmatter___date], Tilaa: DESC}) {
      reunat {
        solmu {
          Edistin {
            polku
            nimi
          }
        }
      }
    }
  }
`; 

Tässä kyselyssä olemme kiinnostuneita vain nimikkeistä ja polusta postitse. Kuljetamme myös joitain parametreja huomautukseen saada viimeisimmät viestit päinvastaisessa järjestyksessä. Erityisesti tämä kysely tarkastaa päivämäärän etuosasta jokaisessa postissa. Jokaisen kyselyn syntaksi riippuu plugin, jota käytetään sen luomiseen.

Lopuksi komponentti tarvitsee päivittää tietojen käyttöä. Gatsbyn toimitettava "linkki" -komponentti mahdollistaa sen, mitkä komponentit tarvitsevat linkin ja varmista, että se hakee oikeat niput vastaavasti.

 const indexpage = ({data}) = & gt; {
  Paluu (
    & lt; layout & gt;
      {Data.allmarkdownremark.edges.Map (
        ({solmu: {Edistin: {polku, otsikko}}}) = & gt; (
          & lt; linkki avain = {polku} = {polku} & gt;
            {Otsikko}
          & lt; / linkki & gt;
        )))}
    & lt; / Layout & GT;
  )
} 

Tällöin blogimme on tehty. Kaikki, mitä jäljellä on sen älykkäät ja Gatsbys rakentaa tuotantovalmius verkkosivusto. Käynnissä NPM Run Build Se voi poistaa mahdolliset kehittämiseen käytettävät parannukset ja tuottavat nippuja valmiina käyttöön. Kun olet valmis, "julkinen" -kansio voidaan sitten ladata missä tahansa, joka voi palvella staattisia sivustoja. Onko tiedostot tallentaa blogisi? Varmista, että he ovat turvallisia loistavasti pilvivarasto .

Tämä artikkeli julkaistiin alun perin 314 netto , maailman myydyin aikakauslehti web-suunnittelijoille ja kehittäjille. Osta numero 314 täältä tai Tilaa täältä .

Aiheeseen liittyvät artikkelit:

• 16 Parhaat ilmaiset blogging-alustat
• Käytä WordPressia pääheltävänä CMS
• Kuinka koodaa nopeammin, kevyempi JavaScript