Kako izgraditi blog reagiran na Gatsby i za oko 10 minuta

Buddies / Foto Genevieve Perron-Migneron na Unsplash-u
Izjava o odricanju odgovornosti: Ovo je napisano za Gatsby Verzija 1, verzija 2 je upravo objavljena i ima nekih promjena. Radit ću na drugom udžbeniku za to.

Gatsby je blistavi brzi generator statičkih stranica temeljen na ReactJS.

Generator statičkih web lokacija (SSG) kompromis je između tvrdo kodirane HTML statičke stranice i potpuno ispuhanog CMS-a (Content Management System), poput Wordpressa.

SSG može se koristiti za generiranje HTML stranica za sadržaje usmjerene na sadržaje (kao što su blogovi). Potrebno je samo podatke za sadržaj stranice i predložak za ispunjavanje sadržaja.

Taj će post biti podijeljen u pet dijelova:

  1. Početak.
  2. Izrada komponenti izgleda.
  3. Stvaranje blogova.
  4. Generiranje novih stranica iz podataka na blogu.
  5. Napravite popis datoteka za označavanje naše web lokacije na odredišnoj stranici.

Provest ćemo se duboko u Gatsbyju i nekim njegovim značajkama stvorivši imaginarni statički blog nazvan CodeStack. Skica je prikazana dolje. Idemo! ️

Stranica s blogom / Jedan blog

1. Početak rada

Preduvjeti

Prvo provjerite jeste li na vašem sustavu instalirali Node.js. Ako ne, idite na nodejs.org i instalirajte najnoviju verziju za svoj operativni sustav.

Također, ovaj članak pretpostavlja da imate razumijevanje za ReactJS.

Instalirajte CLI

Gatsby ima alat za naredbeni redak koji pruža korisne naredbe kao što su:

  • gatsby new: za skele novi projekt Gatsbyja.
  • gatsby razvija: za pokretanje poslužitelja za web razvoj s omogućenim vrućim učitavanjem.
  • gatsby build: za izradu verzije projekta spremne za proizvodnju.

Za instalaciju, na terminalu utipkajte sljedeće i pritisnite Enter:

npm install - globalni gatsby-cli

Omogućuje izradu codestack-bloga projektne mape i navigaciju terminala do nje.

gatsby novi codestack-blog && cd $ _

Ako izvršite razvoj gatsbyja u mapi projekta, skeletno mjesto trebalo bi izgledati ovako:

Dodavanje dodataka

Gatsby ima veliki i rastući set dodataka. Oni su u osnovi Node.js paketi koji se sučeljavaju s Gatsbyjevim API-jevima.

Mogu se instalirati putem NPM-a (Node Package Manager) na terminalu i obično imaju tri kategorije: funkcionalne, izvorne i transformatorske dodatke.

Funkcionalni dodaci

Ovi dodaci pružaju dodatnu funkciju na web lokaciji Gatsby ili u njenom razvojnom okruženju. Za našu aplikaciju trebat će nam:

  • gatsby-plugin-reag-kaciga: omogućuje izmjenu oznaka na glavi. Primijetite da je ona već instalirana u našem projektu skela.
  • gatsby-plugin-catch-linkovi: presreće lokalne veze s označavanja i drugih stranica koje ne reagiraju, i vrši pushState na strani klijenta kako bi izbjegao da pregledač mora osvježiti stranicu.

Instalirajte dodatke ili samo drugi dodatak.

npm instalirati gatsby-plugin-react-helmet gatsby-plugin-catch-linkove

Svaki put kad dodamo novi dodatak, moramo ažurirati datoteku gatsby-config.js novim dodatkom, tako da ga Gatsby prepoznaje i koristi. Koristimo back-krpe.

module.exports = {
  siteMetadata: {
    naslov: `Gatsby Default Starter`,
  }
  dodaci: [
    `Gatsby-plugin-reagiraju-helmet`,
    `Gatsby-plugin-ulov-links`,
  ],
}

Izvorni dodaci

Ti dodaci "izvori" su podatke s udaljenih ili lokalnih mjesta u ono što Gatsby naziva čvorove. Za pisanje naših postova u Markdownu na naš lokalni disk trebamo:

  • gatsby-source-datotečni sustav: izvori podataka o datotekama iz datotečnog sustava vašeg računala.
npm instalirati gatsby-source-datotečni sustav

Ažurirajte datoteku gatsby-config.js:

module.exports = {
  siteMetadata: {
    naslov: `Gatsby Default Starter`,
  }
  dodaci: [
    `Gatsby-plugin-reagiraju-helmet`,
    `Gatsby-plugin-ulov-links`,
    {
      riješiti: `gatsby-source-datotečni sustav`,
      mogućnosti: {
        putanja: `$ {__ dirname} / src / pages`,
        naziv: 'stranice',
      }
    }
  ],
}

Što se ovdje događa? Objekt opcija može se prenijeti na dodatak radi dodatne konfiguracije. Prolazimo stazu datotečnog sustava (tj. Gdje će se nalaziti naše Markdown datoteke), a zatim naziv izvorne datoteke kako bi Gatsby znao za naše izvorne datoteke i gdje primijeniti dodatke transformatora.

Dodaci za transformatore

Ti dodaci pretvaraju neobrađene podatke iz čvorova u korisne formate podataka. Na primjer, trebat će nam:

  • gatsby-transformator-primjedba: ovo pretvara postove na blogu napisane u markdown .md datotekama na lokalnom disku u HTML za prikazivanje.
npm instalirati gatsby-transformator-napomenu

Ažurirajte gatsby-config.js datoteku ponovo.

module.exports = {
  siteMetadata: {
    naslov: `Gatsby Default Starter`,
  }
  dodaci: [
    `Gatsby-plugin-reagiraju-helmet`,
    `Gatsby-plugin-ulov-links`,
    {
      riješiti: `gatsby-source-datotečni sustav`,
      mogućnosti: {
        putanja: `$ {__ dirname} / src / pages`,
        naziv: 'stranice',
      }
    }
    `Gatsby-transformator-remark`,
  ],
}
Dobro napravljeno! / Kredit: Nigel Payne

2. Izrada komponenti izgleda

Gatsby vam omogućuje jednostavno stvaranje „komponenti izgleda“. Komponente izgleda su dijelovi vaše web stranice koje želite dijeliti na više stranica. Za blog koji gradimo to su zaglavlje i bočne trake.

Iz korijenske mape pogledajte src / izgleda. Otkrićete datoteku index.js u kojoj definiramo komponente izgleda. index.css je već stigao sa stilovima.

Nakon što istražite datoteku index.js, vidjet ćete da su već stvorene dvije komponente: Header i TemplateWrapper. U TemplateWrapper, sadržaj naše web stranice zamotavamo komponentama izgleda koje želimo da budu prisutne na više stranica.

To omogućuju rekviziti za djecu (). Prikazat će se sve komponente našeg rasporeda na kojima se ne nalazi. Primijetite da je za razliku od rekvizita React children, podupiranje djece proslijeđeno komponentama izgleda izgleda i potrebno je izvršiti.

Prije svega, stvorite novu mapu i CSS datoteku na src / styles / layout-overide.css. Dodajte popisu uvoza u datoteci index.js. Moramo ga uvesti nakon index.css da bi nadjačao neka postojeća pravila stila.

import React iz 'reagirati'
uvesti PropTypes iz 'prop-type'
uvoz veze s "gatsby-link"
uvoz kaciga iz 'reagira-kaciga'
import './index.css'
uvoz "../styles/layout-overide.css";

Otvorite layout-overide.css i zalijepite sljedeća pravila stilova. Ne treba ovo shvatiti.

* {
    pozadina: # f5f5f5;
    Crna boja;
}
html {
    visina: 100%;
}
tijelo {
    visina: 100%;
    obrub: 5px kruta # ffdb3a;
}
h1 {
    veličina slova: 1.5rem;
    linija-visina: 0,5rem;
}
p, div {
    veličina fonta: 16px;
}

Ažurirajte komponentu zaglavlja.

const Header = () => (
  
    
     

                   CodeStack                         );

Također, napravite komponentu bočne trake.

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

Želimo da se bočna traka i komponente {children ()} ponašaju na način koji reagira na ovaj način:

Budući da ne postoji jednostavan način definiranja medijskih upita u Reactu, pronašao sam biblioteku pod nazivom reakct-media, komponentu CSS medija upita za React. Instalirajte ga.

npm install - spremite reakcijski medij

Omogućuje komponentu koja sluša utakmice CSS medijskog upita za podudaranje i prikazuje stvari na osnovu slaganja upita ili ne.

Dodajte ga na popis uvoza u našoj datoteci.

import Media iz 'react-medija'

Omogućuje sve rasporede (zaglavlje, bočnu traku i dijelove () komponente) onako kako želimo u TemplateWrapper. Učinite sljedeće promjene (oprostite besramni čep mog imena):

const TemplateWrapper = ({djeca}) => (
  
              
               {utakmice =>           šibice? (             
              
{djeca ()}
                       ): (             
              
                {(djeca)}               
                                                                        )         }                );
Shvatio si ovo!  / Kredit: Levon

Što se događa u tom monolitnom bloku koda? React media pomoću ternarne operacije određuje što će se prikazati na temelju maxWidth od 848px. Kad se zaslon podudara sa širinom, prikazuju se samo komponente Header i children ().


        {utakmice =>
          šibice? (
            ... stvari za prikazivanje ...
          ): (
            ... stvari za prikazivanje ...
          )
        }
      
Osvježivač Ternara. Ako je uvjet istinit, operator vraća vrijednost expr1; u suprotnom, vraća vrijednost expr2.

Ako ste primijetili, koristili smo i Flexbox za izgled položaja dječjih () i bočnih dijelova.

Pokrenite gatsby razvijati se na terminalu i naš bi statični blog trebao izgledati ovako:

Dobivanje oblika

3. Stvaranje blogova

Sada idemo u stvaranje stvarnih postova na blogu. Gatsby koristi GraphQL za prikupljanje podataka iz jednog ili više izvora kao što su lokalni disk, Wordpress API i tako dalje.

Osobno mi se sviđa činjenica da mogu stvoriti statički blog i preuzeti sadržaj iz WordPress API-ja. Moj klijent ima pristup uređivaču Wordpressa gdje stvara postove, a ja se izbjegavam suočiti sa svim problemima u razvoju web stranice Wordpress.

U ovom ćemo postu učitati podatke iz Markdown datoteka koje ćemo kreirati na naš lokalni disk. Dodatak gatsby-source-datotečni sustav koji smo prethodno konfigurirali očekuje da će naš sadržaj biti u src / stranicama, tako da ćemo upravo tamo postaviti

Tipična praksa za postove na blogovima je imenovanje mape nešto poput MM-DD-YYYY-naslova. Možete ga imenovati kako god želite ili samo postaviti datoteku za označavanje unutar mape / pages.

Stvorimo mapu src / pages / 12–22–2017-first-post i stavite index.md unutra. Pisati:

---
staza: "/ hello-world"
datum: "2017-07-12T17: 12: 33.962Z"
naslov: "Moj prvi Gatsby Post"
---
Oooooh-weeee, moj prvi blog blog!
Prvi post Ipsum je glavni ključ uspjeha. Čestitamo, igrali ste sami. Okružite se anđelima. Proslavite uspjeh ispravno, jedini način, jabuka.
 
Ključ je piti kokos, svježi kokos, vjerujte mi. Bjelanjka, pureća kobasica, pšenični tost, voda. Naravno da ne žele da jedemo naš doručak, tako da ćemo uživati ​​u doručku.

Blok okružen crticama naziva se prednja ploča. Podaci koje ovdje navedemo, kao i ostale Markdown datoteke, prepoznat će dodatak gatsby-transformer-primark.

Dodatak će dio metapodatkovne datoteke vaše oznake pretvoriti u frontmatter i sadržajni dio (Yippeeee, moj prvi blog blog!) U HTML.

Kada započnemo generirati stranice bloga izravno iz datoteka za označavanje u odjeljku 4 (sljedeći odjeljak), put će se koristiti za određivanje URL puta za prikaz datoteke. Na primjer, gornja označna datoteka bit će prikazana u localhostu: 8000 / hello-world.

Prije toga, neka kreira predložak koji će bilo koju datoteku za označavanje pretvoriti u vlastitu stranicu bloga. Napravite datoteku src / templates / blog-post.js (stvorite mapu thesrc / templates).

import React iz "reagirati";
uvoz kaciga iz "react-kaciga";
izvoz zadane funkcije Predložak ({
  podaci
}) {
  const post = data.markdownRemark;
  povratak (
    
            
        >

              ); }

Postavili smo komponentu Predložak za primanje podatkovnog objekta koji će potjecati od GraphQL upita o kojem ćemo pisati.

Još jednom je potreban GraphQL upit za dohvaćanje podataka u komponenti. Rezultat upita Gatsby ubrizgava u komponentu Template kao podatke i markdownRemark.

Otkrićemo da svojstvo markdownRemark sadrži sve detalje Markdown datoteke.

Sada zapravo napravimo upit. Treba ga staviti ispod komponente predloška:

export const pageQuery = graphql`
  upit BlogPostByPath ($ path: string!) {
    markdownRemark (prednja ploča: {path: {eq: $ path}}) {
      hTML
      prednja vrata {
        datum (formatString: "MMMM DD, GGGG")
        staza
        titula
      }
    }
  }
`
;

Ako niste upoznati s GraphQL-om, pokušat ću raščlaniti što se ovdje događa. Da biste saznali više o GraphQL-u, razmislite o ovom izvrsnom resursu.

GraphQL je samo Facebook ideja određene vrste poslužitelja. Napisali su specifikaciju vrste zahtjeva koji se mogu poslati tom poslužitelju i načina na koji server treba odgovoriti. GraphQL-ov API bolji je od REST-a, jer opisujete točne podatke koji trebaju klijentu tako da nema više nedovoljnog dohvaćanja i preuzimanja podataka.

To znači da morate kreirati vlastiti GraphQL poslužitelj. Srećom po nas, GatsbyJS dolazi sa vlastitim GraphQL serverom.

U gornjem kôdu BlogPostByPath je osnovni upit koji će rezultirati vraćanjem posta na blogu. Vratit će se kao podaci za injekciju u komponentu Predloga.

BlogPostByPath prenosimo argument $ path kako bismo vratili blog blog koji se odnosi na put koji trenutno gledamo.

Nadalje, opoziv markdownRemark transformirao je naše datoteke s označavanjem. Tretirat će se kao entitet čiji će sadržaj biti dostupan putem data.markdownRemark.

HTML-u smo mogli pristupiti putem data.markdownRemark.html. Također, sadržaju fronta koji smo stvorili s blokom crtica možete pristupiti putem data.markdownRemark.title itd.

Cijeli blog-template.js trebao bi izgledati ovako:

import React iz "reagirati";
uvoz kaciga iz "react-kaciga";
izvoz zadane funkcije Predložak ({
  podaci
}) {
  const post = data.markdownRemark;
  povratak (
    
            
        >

              ); }

export const pageQuery = graphql`
  upit BlogPostByPath ($ path: string!) {
    markdownRemark (prednja ploča: {path: {eq: $ path}}) {
      hTML
      prednja vrata {
        datum (formatString: "MMMM DD, GGGG")
        staza
        titula
      }
    }
  }
`
;

U ovom trenutku:

  • Imamo gomilu dodataka instaliranih za izvođenje nekih uslužnih programa kao i učitavanje datoteka s diska i pretvaranje Markdown-a u HTML.
  • Imamo jednu, usamljenu Markdown datoteku koja će biti postavljena kao post na blogu.
  • Imamo predložak React za prikazivanje objava blogova u izgledu, kao i ožičeni GraphQL za upit za podatke o objavi na blogu i ubrizgavanje predloška React s upisanim podacima.

Slatko!

4. Generiranje novih stranica iz podataka na blogu.

Gatsby pruža API čvora koji pruža funkcionalnost za stvaranje dinamičnih stranica iz blogova. Ovaj API izložen je u datoteci thegatsby-node.js u korijenskom direktoriju vašeg projekta. Ova bi datoteka mogla izvesti nekoliko API-ja čvorova, ali zanima nas createPages API.

Upotrijebite sljedeći blok isječka koda naveden u službenim dokumentima (imajte na umu da je put blogPostTemplate postavljen da odražava naš):

const putanja = zahtjev ('staza');
export.createPages = ({linkedActionCreators, graphql}) => {
  const {createPage} = linkedActionCreators;
const blogPostTemplate = path.resolve (`src / predloške / blog-post.js`);
return graphql (`{
    allMarkdownRemark (
      sort: {order: DESC, polja: [frontmatter___date]}
      ograničenje: 1000
    ) {
      rubovi {
        čvor {
          izvadak (pruneLength: 250)
          hTML
          iskaznica
          prednja vrata {
            datum
            staza
            titula
          }
        }
      }
    }
  } ')
    .then (rezultat => {
      ako (rezultat. pogreške) {
        vratiti Promise.reject (rezultat.pogreške);
      }
result.data.allMarkdownRemark.edges
        .forEach (({čvor}) => {
          napravi stranicu({
            staza: node.frontmatter.path,
            komponenta: blogPostTemplate,
            kontekst: {} // dodatni podaci mogu se proslijediti putem konteksta
          });
        });
    });
}

Provjerite radi li. Preporučujem vam da zatvorite svoj preglednik, zaustavite server za razvoj gatsbyja sa terminala pomoću ctrl c. Sada se pokrenite gatsby razviti ponovno i otvorite http: // localhost: 8000 / hello-world.

da

Napravite drugu datoteku src / pages / 24–12–2017-learning-grid / index.md

---
staza: "/ drugi-jedan"
datum: "2017-07-12T17: 12: 33.962Z"
naslov: "Moj drugi Gatsbyjev post"
---
U životu će biti blokada cesta, ali prijeći ćemo. Posebno upozorenje na krpi. Nikad se ne igraj. Ključ uspjeha je masaža jednom tjedno, vrlo važno, glavni ključ, razgovor s krpama.
  // neki css grid grid  

Opet zatvorite prozor brošura, zaustavite razvoj gatsbya. Pokrenite gatsby razviti ponovno i otvorite http: // localhost: 8000 / drugi-jedan. To je prikazano:

Nastavite ako želite i stvorite vlastite stranice.

5. Napravite popis datoteka s označavanjem naše web lokacije na odredišnoj stranici.

Zadana odredišna stranica koja se nalazi uz skeletno mjesto Gatsby nalazi se na adresi src / pages / index.js. Ovdje bismo definirali predložak i napravili upit kako bismo ga ubrizgali s podacima za popis .md datoteka. Napravi to:

import React iz "reagirati";
uvoz veze s "gatsby-link";
uvoz kaciga iz "react-kaciga";
import '../styles/blog-listing.css';
izvoz zadane funkcije indeks ({podaci}) {
  const {edge: posts} = data.allMarkdownRemark;
  povratak (
    
      {postova         .filter (post => post.node.frontmatter.title.length> 0)         .map (({čvor: post}) => {           povratak (             
              

                 {post.frontmatter.title}                              

{post.frontmatter.date}> {post.excerpt}                        );         })}        ); }

export const pageQuery = graphql`
  upit IndexQuery {
    allMarkdownRemark (sortiraj: {red: DESC, polja: [frontmatter___date]}) {
      rubovi {
        čvor {
          izvadak (pruneLength: 250)
          iskaznica
          prednja vrata {
            titula
            datum (formatString: "MMMM DD, GGGG")
            staza
          }
        }
      }
    }
  }
';

Vjerujem da ste u ovom trenutku opaki i da ste već upoznati s onim što se događa. Imajte na umu da smo gore napisali uvoz koji ne postoji. Sada stvorite datoteku /styles/blog-listing.css:

div.blog-nakon pregleda {
    obrub-dno: 2px kruto # e6e6e6;
    padding-top: 1rem;
    obloga-dno: 1rem;
    marža-dno: 1rem;
}
h1> * {
    veličina slova: 1.2rem;
    redak ukrašavanja teksta: nijedan;
}
h2 {
    font-size: 0.8rem! važno;
    težina slova: 100! važno;
}

Ponovo pokrenite poslužitelj, posjetite odredišnu stranicu i trebali biste vidjeti popis na poslu:

Zaključak

Stigli smo do kraja ovog vodiča. Hvala vam na dosadašnjem čitanju.

Ovaj je post samo vrh ledenog brijega s obzirom na količinu stvari koje biste mogli učiniti s Gatsbyjem. Slobodno istražite kako biste mogli implementirati:

  • Funkcionalnost pretraživanja
  • Upotreba oznaka za kategorizaciju postova na blogovima
  • Uvođenje vaše Gatsby stranice

Konačni izvorni kod možete preuzeti ovdje. Slobodno me podržajte (devapparel.co) i dobro se uvjerite u to. Također, komentirajte ili dijelite ovaj post. Hvala na čitanju!

P.S Radim na knjizi React s Ohansom Emmanuelom koja će navesti vas da savladate React tako što ćete za 30 dana izgraditi 30 malih projekata. Ako želite biti stalno ažurirani na ovom, pridružite se listi e-pošte. Hvala!