Come creare un blog basato su React e Gatsby in circa 10 minuti

Amici / Foto di Genevieve Perron-Migneron su Unsplash
Disclaimer: questo è stato scritto per Gatsby versione 1, la versione 2 è stata appena rilasciata e ha apportato alcune modifiche. Lavorerò su un altro tutorial per quello.

Gatsby è un generatore di siti statici estremamente veloce basato su ReactJS.

Un generatore di siti statici (SSG) è un compromesso tra un sito statico HTML hardcoded e un CMS (Content Management System) completo, come Wordpress.

Un SSG può essere utilizzato per generare pagine HTML per siti Web orientati al contenuto (come blog). Tutto ciò che richiede sono i dati per il contenuto della pagina e il modello da riempire con il contenuto.

Questo post sarà diviso in cinque sezioni:

  1. Iniziare.
  2. Creazione di componenti di layout.
  3. Creazione di post sul blog.
  4. Generazione di nuove pagine dai dati dei post di blog.
  5. Crea un elenco dei file di markdown del nostro sito nella pagina di destinazione.

Faremo un tuffo nel profondo di Gatsby e di alcune sue funzionalità creando un blog statico immaginario chiamato CodeStack. Il modello è mostrato di seguito. Andiamo! ️

Una pagina di elenco blog / Un singolo post di blog

1. Per iniziare

Prerequisiti

Innanzitutto, assicurati di avere Node.js installato sul tuo sistema. In caso contrario, vai su nodejs.org e installa una versione recente per il tuo sistema operativo.

Inoltre, questo articolo presuppone che tu abbia una comprensione di ReactJS.

Installa la CLI

Gatsby ha uno strumento da riga di comando che fornisce comandi utili come:

  • gatsby new: per impalcature un nuovo progetto Gatsby.
  • gatsby development: per l'avvio di un server di sviluppo Web abilitato per hot-ricaricamento.
  • gatsby build: per creare una versione del progetto pronta per la produzione.

Per installare, digita quanto segue sul tuo terminale e premi invio:

npm install --global gatsby-cli

Consente di creare una cartella di progetto codestack-blog e di spostarci sul terminale.

gatsby nuovo blog-codestack && cd $ _

Se esegui gatsby Develop sulla cartella del progetto, il sito con ponteggi dovrebbe apparire così:

Aggiunta di plugin

Gatsby ha un ampio e crescente set di plugin. Sono essenzialmente pacchetti Node.js che si interfacciano con le API di Gatsby.

Possono essere installati tramite NPM (Node Package Manager) sul terminale e generalmente hanno tre categorie: plugin funzionali, sorgente e trasformatore.

Plugin funzionali

Questi plugin forniscono funzionalità extra in un sito Gatsby o nel suo ambiente di sviluppo. Per la nostra app avremo bisogno di:

  • gatsby-plugin-reply-helmet: consente di modificare i tag head. Si noti che è già installato nel nostro progetto con ponteggi.
  • gatsby-plugin-catch-links: intercetta i collegamenti locali da markdown e altre pagine non reattive e fa un pushState sul lato client per evitare che il browser debba aggiornare la pagina.

Installa i plugin o solo il secondo plugin.

npm installa gatsby-plugin-reazioni-casco gatsby-plugin-catch-links

Ogni volta che aggiungiamo un nuovo plug-in, dobbiamo aggiornare il file gatsby-config.js con il nuovo plug-in in modo che Gatsby lo riconosca e lo usi. Usiamo le zecche.

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

Plugin sorgente

Questi plugin "raccolgono" dati da posizioni remote o locali in ciò che Gatsby chiama nodi. Per scrivere i nostri post in Markdown sul nostro disco locale, abbiamo bisogno di:

  • gatsby-source-filesystem: estrae i dati sui file dal file system del tuo computer.
npm installa gatsby-source-filesystem

Aggiorna il file gatsby-config.js:

module.exports = {
  siteMetadata: {
    titolo: `Gatsby Default Starter`,
  },
  plugin: [
    `Gatsby-plugin-reazione-helmet`,
    `Gatsby-plugin-catch-links`,
    {
      risolvere: `gatsby-source-filesystem`,
      opzioni: {
        percorso: `$ {__ dirname} / src / pages`,
        nome: "pagine",
      },
    }
  ],
}

Cosa sta succedendo qui? Un oggetto opzioni può essere passato a un plugin per ulteriori configurazioni. Stiamo passando il percorso del filesystem (ovvero dove si trovano i nostri file Markdown), quindi un nome per i file di origine, in modo che Gatsby sia a conoscenza dei nostri file di origine e dove applicare i plugin del trasformatore.

Plugin del trasformatore

Questi plugin trasformano i dati grezzi dai nodi in formati di dati utilizzabili. Ad esempio, avremo bisogno di:

  • gatsby-transformer-remark: questo trasforma i post del blog scritti in file markdown .md sul disco locale in HTML per il rendering.
npm installa gatsby-transformer-remark

Aggiorna di nuovo il file gatsby-config.js.

module.exports = {
  siteMetadata: {
    titolo: `Gatsby Default Starter`,
  },
  plugin: [
    `Gatsby-plugin-reazione-helmet`,
    `Gatsby-plugin-catch-links`,
    {
      risolvere: `gatsby-source-filesystem`,
      opzioni: {
        percorso: `$ {__ dirname} / src / pages`,
        nome: "pagine",
      },
    },
    `Gatsby-trasformatore remark`,
  ],
}
Molto bene! / Credito: Nigel Payne

2. Creazione di componenti di layout

Gatsby ti consente di creare facilmente "componenti di layout". I componenti di layout sono sezioni del tuo sito che desideri condividere su più pagine. Per il blog che stiamo creando, questi sono l'intestazione e le barre laterali.

Dalla cartella principale, dai un'occhiata a src / layouts. Scoprirai un file index.js in cui definiamo i componenti del layout. index.css è già arrivato con gli stili.

Dopo aver esplorato il file index.js, vedrai che sono già stati creati due componenti: Header e TemplateWrapper. In TemplateWrapper, avvolgiamo i contenuti del nostro sito con componenti di layout che vogliamo essere presenti su più pagine.

Ciò è reso possibile dagli oggetti di scena children (). Renderà tutti i componenti non di layout del nostro sito in cui è posizionato. Si noti che a differenza dei puntelli per bambini React, il puntello per bambini passato ai componenti del layout è una funzione e deve essere eseguito.

Prima di tutto, crea una nuova cartella e un file CSS in src / styles / layout-overide.css. Aggiungi all'elenco delle importazioni nel file index.js. Dobbiamo importarlo dopo index.css per sovrascrivere alcune regole di stile esistenti.

import React da 'reagire'
importare PropTypes da 'prop-types'
import Link da 'gatsby-link'
import Helmet da 'reagire-casco'
import './index.css'
import "../styles/layout-overide.css";

Apri layout-overide.css e incolla le seguenti regole di stile. Non c'è bisogno di capirli.

* {
    sfondo: # f5f5f5;
    colore nero;
}
html {
    altezza: 100%;
}
body {
    altezza: 100%;
    bordo: 5px solido # ffdb3a;
}
h1 {
    dimensione carattere: 1,5rem;
    altezza della linea: 0,5rem;
}
p, div {
    dimensione carattere: 16px;
}

Aggiorna il componente dell'intestazione.

const Header = () => (
  
    
     

                   CodeStack                         );

Inoltre, crea un componente della barra laterale.

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

Desideriamo che la sidebar e i componenti di {children ()} si comportino in modo reattivo come questo:

Dal momento che non esiste un modo semplice per definire le query multimediali in React, ho trovato una libreria chiamata reag-media, un componente di query media CSS per React. Installalo.

npm install --save reagire-media

Fornisce un componente che ascolta le corrispondenze a una query multimediale CSS e rende le cose in base alla corrispondenza o meno della query.

Aggiungilo all'elenco delle importazioni nel nostro file.

importare media da "reagenti-media"

Consente il layout di tutto nei componenti (Header, Sidebar e children ()) come desideriamo in TemplateWrapper. Apporta le seguenti modifiche (scusa la spina spudorata del mio nome):

const TemplateWrapper = ({children}) => (
  
              
               {match =>           le partite? (             
              
{children ()}
                       ): (             
              
                {bambini()}               
                                                                        )         }                );
L'hai capito!  / Credito: Levon

Cosa sta succedendo in quel blocco monolitico di codice? React media utilizza un'operazione ternaria per determinare cosa eseguire il rendering in base a una larghezza massima di 848 px. Quando lo schermo corrisponde alla larghezza, vengono visualizzati solo i componenti Header e children ().


        {match =>
          le partite? (
            ... cose da rendere ...
          ): (
            ... cose da rendere ...
          )
        }
      
Un aggiornamento ternario. Se la condizione è vera, l'operatore restituisce il valore di expr1; in caso contrario, restituisce il valore di expr2.

Se hai notato, abbiamo anche usato Flexbox per il layout delle posizioni dei componenti children () e Sidebar.

Esegui gatsby Develop sul terminale e il nostro blog statico dovrebbe apparire così in questo momento:

Prendere forma

3. Creazione di post sul blog

Ora entriamo nella creazione di post sul blog reali. Gatsby utilizza GraphQL per recuperare i dati da una o più fonti come il disco locale, l'API Wordpress e così via.

Personalmente, mi piace il fatto di poter creare un blog statico e recuperare contenuti da un'API di WordPress. Il mio cliente ha accesso all'editor di Wordpress dove crea post, ed evito di affrontare tutte le seccature dello sviluppo di un sito Wordpress.

In questo post, verranno caricati i dati dai file Markdown che creeremo sul nostro disco locale. Il plug-in gatsby-source-filesystem che abbiamo configurato in precedenza prevede che i nostri contenuti siano in src / pages, quindi è esattamente dove li inseriremo!

Una pratica tipica per i post sul blog è denominare la cartella in modo simile al titolo MM-GG-AAAA. Puoi nominarlo come preferisci o semplicemente inserire un file markdown nella cartella / pages.

Creiamo una cartella src / pages / 12–22–2017-first-post e inseriamo un index.md all'interno. Scrivi:

---
percorso: "/ ciao-mondo"
data: "2017-07-12T17: 12: 33.962Z"
titolo: "My First Gatsby Post"
---
Oooooh-weeee, il mio primo post sul blog!
Primo post Ipsum è una delle principali chiavi del successo. Congratulazioni, hai giocato da solo. Circondati di angeli. Festeggia il successo giusto, l'unico modo, mela.
 
La chiave è bere cocco, cocco fresco, fidati di me. Bianchi d'uovo, salsiccia di tacchino, toast di grano, acqua. Ovviamente non vogliono che facciamo colazione, quindi ci godremo la colazione.

Il blocco racchiuso in trattini viene definito frontmatter. I dati che specifichiamo qui, così come altri file Markdown, saranno riconosciuti dal plugin gatsby-transformer-remark.

Il plugin convertirà la parte dei metadati del frontmatter del tuo file markdown in frontmatter e la parte del contenuto (Yippeeee, il mio primo post sul blog!) In HTML.

Quando inizieremo a generare le pagine del blog direttamente dai file di markdown nella sezione 4 (sezione successiva), verrà utilizzato il percorso per specificare il percorso dell'URL per il rendering del file. Ad esempio, il file di markdown sopra verrà reso su localhost: 8000 / hello-world.

Prima di ciò, consente di creare un modello che renderà qualsiasi file di markdown nella propria pagina del blog. Crea il file src / templates / blog-post.js (crea la cartellaesrc / templates).

import React da "reagire";
import Helmet da "reagire-elmetto";
modello di funzione predefinita di esportazione ({
  dati
}) {
  const post = data.markdownRemark;
  ritorno (
    
            
        

{post.frontmatter.title}         
              ); }

Abbiamo impostato il componente Modello per ricevere un oggetto dati che verrà dalla query GraphQL che stiamo per scrivere.

Ancora una volta, la query GraphQL è necessaria per recuperare i dati nel componente. Il risultato della query viene iniettato da Gatsby nel componente Template come data e markdownRemark.

Scopriremo che la proprietà markdownRemark contiene tutti i dettagli del file Markdown.

Ora possiamo effettivamente fare la query. Dovrebbe essere posizionato sotto il componente Modello:

export const pageQuery = graphql`
  query BlogPostByPath ($ path: String!) {
    markdownRemark (frontmatter: {path: {eq: $ path}}) {
      html
      frontmatter {
        data (formatString: "MMMM GG, AAAA")
        sentiero
        titolo
      }
    }
  }
`
;

Se non hai familiarità con GraphQL, cercherò di analizzare ciò che sta succedendo qui. Per saperne di più su GraphQL, considera questa eccellente risorsa.

GraphQL è solo l'idea di Facebook di un certo tipo di server. Hanno scritto una specifica sul tipo di richieste che possono essere inviate a quel server e su come il server dovrebbe rispondere. L'API di GraphQL è migliore di REST, perché descrivi i dati esatti di cui il lato client ha bisogno in modo che non ci sia più un recupero insufficiente o un recupero eccessivo di dati.

Questo significa che devi creare il tuo server GraphQL. Fortunatamente per noi, GatsbyJS viene fornito con un proprio server GraphQL.

Nel codice sopra, BlogPostByPath è la query sottostante che comporterà la restituzione di un post sul blog. Verrà restituito come dati per l'iniezione nel componente Modello.

Passiamo a BlogPostByPath l'argomento $ path per restituire un post sul blog relativo al percorso che stiamo attualmente visualizzando.

Inoltre, ricordare markdownRemark ha trasformato i nostri file markdown. Sarà trattata come una proprietà i cui contenuti saranno disponibili tramite data.markdownRemark.

Potremmo accedere all'HTML tramite data.markdownRemark.html. Inoltre, è possibile accedere al contenuto della materia prima che abbiamo creato con un blocco di dahes tramite data.markdownRemark.title ecc.

L'intero blog-template.js dovrebbe apparire così:

import React da "reagire";
import Helmet da "reagire-elmetto";
modello di funzione predefinita di esportazione ({
  dati
}) {
  const post = data.markdownRemark;
  ritorno (
    
            
        

{post.frontmatter.title}         
              ); }

export const pageQuery = graphql`
  query BlogPostByPath ($ path: String!) {
    markdownRemark (frontmatter: {path: {eq: $ path}}) {
      html
      frontmatter {
        data (formatString: "MMMM GG, AAAA")
        sentiero
        titolo
      }
    }
  }
`
;

A questo punto:

  • Abbiamo un sacco di plugin installati per eseguire alcune utility, nonché caricare file dal disco e trasformare Markdown in HTML.
  • Abbiamo un unico file Markdown solitario che verrà reso come post sul blog.
  • Abbiamo un modello React per il rendering dei post di blog in un layout, nonché un GraphQL cablato per eseguire query per i dati dei post di blog e iniettare il modello React con i dati richiesti.

Dolce!

4. Generazione di nuove pagine dai dati dei post di blog.

Gatsby fornisce un'API Node, che fornisce funzionalità per la creazione di pagine dinamiche da post di blog. Questa API è esposta nel file thegatsby-node.js nella directory principale del progetto. Questo file potrebbe esportare diverse API del nodo ma siamo interessati all'API createPages.

Utilizza il seguente blocco di frammento di codice come indicato nei documenti ufficiali (nota che il percorso blogPostTemplate è stato impostato in modo da riflettere il nostro):

const path = require ('percorso');
exports.createPages = ({boundActionCreators, graphql}) => {
  const {createPage} = boundActionCreators;
const blogPostTemplate = path.resolve (`src / templates / blog-post.js`);
return graphql (`{
    allMarkdownRemark (
      ordina: {ordine: DESC, campi: [frontmatter___date]}
      limite: 1000
    ) {
      bordi {
        nodo {
          estratto (pruneLength: 250)
          html
          id
          frontmatter {
            Data
            sentiero
            titolo
          }
        }
      }
    }
  } `)
    .then (risultato => {
      if (result.errors) {
        return Promise.reject (result.errors);
      }
result.data.allMarkdownRemark.edges
        .forEach (({node}) => {
          crea pagina({
            percorso: node.frontmatter.path,
            componente: blogPostTemplate,
            contesto: {} // i dati aggiuntivi possono essere passati tramite il contesto
          });
        });
    });
}

Controlla se funziona. Ti consiglio di chiudere la finestra di Broswer, arrestando Gatsby Develop Server dal terminale usando Ctrl C. Ora esegui gatsby sviluppalo di nuovo e apri http: // localhost: 8000 / hello-world.

sì

Crea un altro file src / pages / 24–12–2017-learning-grid / index.md

---
percorso: "/ altro"
data: "2017-07-12T17: 12: 33.962Z"
titolo: "My Second Gatsby Post"
---
Nella vita ci saranno blocchi stradali ma ci arriveremo. Avviso panno speciale. Non giocare mai te stesso. La chiave per un maggiore successo è quella di ottenere un massaggio una volta alla settimana, molto importante, chiave importante, discorsi sul tessuto.
  // alcuni codici griglia css  

Ancora una volta, chiudi la finestra di Broswer, ferma gatsby Develop Server. Esegui gatsby sviluppalo di nuovo e apri http: // localhost: 8000 / altro-uno. Questo è mostrato:

Continua se lo desideri e crea le tue pagine.

5. Crea un elenco dei file di markdown del nostro sito nella pagina di destinazione.

La pagina di destinazione predefinita fornita con il sito Gatsby con impalcature si trova in src / pages / index.js. È qui che dovremmo definire un modello e creare una query per iniettarlo con i dati per l'elenco dei file .md. Fai questo:

import React da "reagire";
import Link da "gatsby-link";
import Helmet da "reagire-elmetto";
import '../styles/blog-listing.css';
esporta indice funzione predefinita ({data}) {
  const {edge: posts} = data.allMarkdownRemark;
  ritorno (
    
      {messaggi         .filter (post => post.node.frontmatter.title.length> 0)         .map (({node: post}) => {           ritorno (             
              

                 {post.frontmatter.title}                              

{post.frontmatter.date}               

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

export const pageQuery = graphql`
  query IndexQuery {
    allMarkdownRemark (ordina: {ordine: DESC, campi: [frontmatter___date]}) {
      bordi {
        nodo {
          estratto (pruneLength: 250)
          id
          frontmatter {
            titolo
            data (formatString: "MMMM GG, AAAA")
            sentiero
          }
        }
      }
    }
  }
`;

Confido che tu sia tosta a questo punto e che abbia già familiarità con quello che sta succedendo. Si noti che sopra abbiamo scritto un'importazione che non esiste. Ora crea il file /styles/blog-listing.css:

div.blog-post-preview {
    bordo inferiore: 2px solido # e6e6e6;
    padding-top: 1rem;
    imbottitura inferiore: 1rem;
    margine inferiore: 1rem;
}
h1> * {
    dimensione carattere: 1,2rem;
    text-decoration-line: none;
}
h2 {
    font-size: 0.8rem! important;
    font-weight: 100! importante;
}

Riavvia il server, visita la pagina di destinazione e dovresti vedere la lista al lavoro:

Conclusione

Siamo arrivati ​​alla fine di questo tutorial. Grazie per aver letto finora.

Questo post è solo la punta dell'iceberg considerando la quantità di cose che potresti fare con Gatsby. Sentiti libero di esplorare come potresti implementare:

  • Funzionalità di ricerca
  • L'uso di tag per classificare i post del blog
  • Distribuire il tuo sito Gatsby

Puoi prendere il codice sorgente finale qui. Sentiti libero di supportarmi (devapparel.co) e avere un bell'aspetto. Inoltre, commenta o condividi questo post. Grazie per aver letto!

P.S Sto lavorando a un libro di React con Ohans Emmanuel che ti farebbe impadronire di React costruendo 30 piccoli progetti in 30 giorni. Se vuoi rimanere aggiornato su questo, iscriviti alla mailing list. Grazie!