Come costruire un sito di blog con Gatsby

I framework come reagire inviano solo JavaScript ai clienti, che viene quindi utilizzato per creare gli elementi sullo schermo. L'HTML che carica sulla pagina è minimo, poiché tutto il contenuto viene generato sul lato client dopo che tutto è stato caricato.

Nei progetti che hanno dati dinamici, come un blog o un negozio, il JavaScript deve venire indietro prima che altri dati possano essere recuperati. Anche quando si utilizzano tecniche di aumento della velocità come la divisione del codice, se il pacchetto non riesce a scaricare, l'intero sito smetterà di funzionare.

• Strumenti di progettazione Web per aiutarti a lavorare in modo più intelligente

I generatori del sito statico prendono contenuti dinamici e creano pagine pre-costruite pronte per essere servite. Se i dati cambiano, il progetto può essere ricostruito e il nuovo contenuto servito. Il risultato finale è migliorato velocità, scalabilità e - senza connessioni costanti a un database - sicurezza. Mentre l'approccio non è l'ideale per modificare costantemente dati come un sito di notizie rotolanti, molti progetti possono beneficiare.

Gatsby. è un generatore di siti statici che è costruito su reagire. Attraverso l'uso di graphql e plugin, può prendere i dati da fonti diverse e passarli in componenti. Una volta terminato, analizza il progetto e genera file HTML per servire ai client, mentre reagire e la logica dell'applicazione viene scaricata in background.

Per ulteriori opzioni di costruzione del sito, vedere il nostro top Builder del sito web scelte. Hai bisogno del giusto supporto? Queste sono le web hosting servizi di cui hai bisogno.

Scarica i file. per questo tutorial.

• 10 migliori generatori di siti statici

Iniziare

Per iniziare, possiamo avere un scaffold Gatsby fuori un progetto di base per noi. Fornisce un server di sviluppo che possiamo utilizzare insieme a alcuni utili strumenti per sviluppatori. Assicurati che il nodo e le NPM siano aggiornati ed eseguiti NPX Gatsby New Gatsby-Sito Sulla riga di comando, con "Gatsby-sito" essendo la cartella da costruire in.

All'interno di quella cartella, Gatsby fornisce alcuni comandi come parte del processo di inizializzazione. Running questi renderà la costruzione del sito molto più facile. Correre Sviluppo di NPM Per avviare il server di sviluppo e vedere qualsiasi modifica Aggiorna automaticamente nel browser.

Tutti i contenuti vivono all'interno della cartella / SRC e qualsiasi file di configurazione è prefissato con "Gatsby-" nella radice del progetto. Tutto funziona attraverso componenti, che non hanno bisogno di avere una struttura o un comportamento aggiuntivo per essere pre-costruiti con Gatsby.

Il contenuto della cartella / src / pagine è speciale. Gatsby raccoglierà qualsiasi componente all'interno di quella cartella per creare una pagina. Apri index.js e cancella il contenuto del componente. Si noti che la pagina si aggiorna nel browser mentre salviamo.

 INDEXPAGE CONTRE = () = & GT; (
  & lt; layout & gt;
    {/* Vuoto */}
  & lt; / Layout & GT;
) 

Costruire una pagina.

Ogni post del blog ha bisogno della sua pagina. È possibile effettuare un componente di pagina per ogni nuovo post, ma questo crea una barriera per coloro che non sono utilizzati per reagire e richiederanno anche più manutenzione in futuro come cambiamenti dei progetti.

Gatsby ha una biblioteca piena di plugin pronti a cambiare il modo in cui genera pagine, che possono essere trovate a Gatsbyjs.org/plugins. Lì possiamo trovare due tipi di plugin - "fonte" e "trasformatore".

Un plugin sorgente prenderà dati da una fonte e convertili in "nodi", che è il modo in cui Gatsby si occupa delle informazioni all'interno di un sito. I dati possono essere recuperati localmente per file come immagini o da remoto per dati esterni come un database.

Un plugin del trasformatore può quindi prendere questi nodi e crearne di nuovi per rendere le cose più facili per il gatsby con cui lavorare. Ad esempio, i file YAML non possono essere analizzati per impostazione predefinita ma un plugin del trasformatore può attivare la sintassi nidificata all'interno di loro in oggetti per leggere i componenti all'interno.

Markdown è un formato comune utilizzato per il testo perché è versatile, facile da leggere e può essere convertito in HTML. Il plugin sorgente "Gatsby-source-filesystem" può prendere file localmente e convertirli in nodi, mentre il plugin di trasformazione "Gatsby-Transformer-Nota" utilizza il commento per convertire il markdown in qualcosa che possiamo ritirare e query con Graphql.

Il progetto di avviamento è già fornito con il plug-in sorgente. Installa l'altro eseguendo NPM Installa Gatsby-Transformer-Comment . Si prega di notare che il server di sviluppo potrebbe dover essere riavviato per essere ritirato.

Imposta i plug-in

Con il plugin installato, Gatsby deve essere detto come usarlo. Tutta questa logica è detenuta all'interno del file "gatsby-config.js" generato all'inizio. Viene fornito con alcuni plugin già impostati dalla scatola ma dobbiamo aggiungere il nostro al mix per poter prendere e utilizzare Markdown.

I plugin semplici che non hanno una procedura di impostazione possono essere aggiunti in come stringhe. Poiché il plugin della trasformazione ha un solo lavoro, non è necessario impostare. Tuttavia, il plugin sorgente deve essere detto dove trovare i post. Aggiungili alla parte inferiore dell'array dei plugin.

 Plugin: [
  [...]
  "Gatsby-Transformer-Comment",
  {
    Risolvi: `Gatsby-source-filesystem`
    opzioni: {
      Nome: `pagine`,
      Percorso: `$ {__ dirname} / src / pagine`
    }
  }
] 

Poiché ogni post diventerà la sua pagina, ha senso aggiungerli alla cartella SRC / Pages. Queste opzioni di impostazione stanno dicendo Gatsby di esaminare quella cartella e estrarre qualsiasi file.

Crea un post del blog

Con i plugin in posizione, possiamo creare il nostro primo post. Creare una cartella chiamata "My-First-Post" e aggiungi un file di markdown "my-first-post.md" al suo interno. Questa convenzione ci consente di aggiungere qualsiasi file correlata - come immagini - accanto al post stesso.

Dobbiamo aggiungere un markdown a questo post quindi sappiamo che funziona come previsto.

 ---
Percorso: / post / my-first-post
Data: 2018-12-01.
Summary: post riassunto
Tag: [il mio, primo, post]
Titolo: il mio primo post
---
Questo è il mio primo post! 

Il contenuto tra i trattini nella parte superiore del file è chiamato "PARTENZA". Ciò conterrà metadati attorno al post che viene scritto, come la data e il titolo. Tutti questi dati verranno presi in considerazione per osservazione e possono essere interrogati per GRAPHQL.

Il pezzo cruciale della materia anteriore in questo caso è il sentiero valore. Qui è dove il post vivrà e dovrà essere unico. Gatsby leggerà il percorso e faranno una nuova pagina lì.

Prima di poter mostrare i post, abbiamo bisogno di un componente di pagina per visualizzare il post. Dovrà essere in grado di prendere i valori come oggetti di scena e visualizzare il contenuto come blocco di HTML.

Crea un nuovo componente in "src / blogpost.js". Le informazioni su ciascun post arriveranno come a dati Prop da graphql.

 Importa reagire da "reagire"
import {graphql} da 'gatsby'
Importa il casco da "react-casco"
IMPORTAZIONE LAYOUT DA '../Components/Layout'
Esporta Const Blog = ({Dati: {markdownRemark}}) = & gt; {
  Const {FrontMatter, HTML} = MarkdownRemark
  ritorno (
    & lt; layout & gt;
      & lt; Titolo del casco = {frontmatter.title} / & gt;
      & lt; div pericolosiinsinnerhtml = {{__html: html}} / & gt;
    & lt; / Layout & GT;
  )
} 

Il pacchetto "React-Helmet" in bundle con Gatsby ci consente di aggiornare i valori che di solito vivono all'interno del & lt; head & gt; di una pagina HTML. Qui stiamo impostando il titolo del post per essere il & lt; Titolo & GT; della pagina stessa. Ci sono molte altre opzioni che accetta, che puoi scoprire di più a github.com/nfl/react-helmet. .

Query per i dati.

A questo punto, Gatsby non ha dati che si accende questa pagina. Dobbiamo recuperare i dati dai file di markdown per popolare queste informazioni. Per fare ciò, possiamo usare GRAPHQL - una lingua di interrogazione creata da Facebook che tira i dati pertinenti in componenti reagire. In breve, GraphqL definisce la struttura che i dati verranno restituiti attraverso l'uso di oggetti nidificati. In questo modo, ci vogliamo solo per i dati che useremo effettivamente.

Gatsby fornisce una funzione letterale del modello che può interpretare le query. Rilemerà qualsiasi utilizzo e passerà i risultati come oggetti di scena nel componente. Ciò significa che possiamo aggiungere la query all'interno dello stesso file e mantenere insieme la logica correlata.

 Export Const PageQuery = Graphql`
  Query ($ Path: String!) {
    MarkdownRemark (FrontMatter: {Path: {EQ: $ Path}}) {
      html.
      frontmatter {
        Data (FormatString: "D Mmmm Yyyy")
        titolo
      }
    }
  } `

All'interno di questa query, stiamo chiedendo Gatsby per tutti i nodi di markdown con un percorso che corrisponde alla pagina che ci troviamo. Se lo trova, passerà quindi l'html reso, la data e il titolo del post sul componente.

Scrittura di query in questo modo è limitata solo ai componenti della pagina. Qualsiasi altro componente che richiede query per i nodi deve utilizzare & lt; staticoquery & gt; e caricarlo anteriore. A questo punto, il server di sviluppo potrebbe avvisarti di questo per il Post sul blog Componente, ma questo perché non è consapevole che diventerà ancora un componente di pagina. Lo cambiamo.

Generare pagine

Per impostazione predefinita, Gatsby fa solo pagine per i componenti all'interno / src / pagine , il che significa che dobbiamo creare pagine in altro modo.

Gatsby espone alcuni metodi dal suo processo di costruzione per aiutare a accedere ai nodi dati. Questi possono essere accessibili tramite "Gatsby-Node.js" nella radice del progetto. In questo caso, useremo Graphql per recuperare tutti i post del blog e lasciare che il createpages. callback genera una pagina per ciascuno. Poiché questa è un'azione asincrona, dobbiamo restituire una promessa in modo che Gatsby possa continuare il processo di costruzione.

 Const Path = Richiedere ('percorso')
esporta.createpages = ({Azioni, graphql}) = & gt; {
  ritorno graphql (`
    {
      ALL'HANDARKDINGREMARK {
        bordi {
          nodo {
            frontmatter {
              sentiero
            }
          }
        }
      }
    }
  `
} 

La prima parte del callback è una query che recupera il percorso per ogni post, poiché ogni singola pagina riceverà i propri dati. La chiamata graphql restituisce una promessa che conterrà tutti i post. Possiamo utilizzare i dati da quello per generare alcune pagine.

 .then (Risultato = & GT; {
  if (Result.errors) {
    return promessi.reject (risultato.errors)
  }
  Const BlogPostTemplate = Path.Resolve ('SRC / Components / BlogPost.js')
  risultato.Data.allmarkDownRemark.edges.Foceach (({node}) = & gt; {
    Azioni.CreatePage ({
      Percorso: nodo.frontmatter.path,
      Componente: BlogPostTemplate,
    })
  })
}) 

Se la query incontra un errore, arresta il processo di costruzione per capire perché. Se tutto va bene, recupera il componente fatto e chiama il crea pagina Metodo per generare una pagina sul percorso fornito.

Con le pagine che generano, tutto ciò che è necessario ora è un modo per trovarli. Possiamo utilizzare una query sul componente della pagina dell'indice esistente per farlo.

 Export Const PageQuery = Graphql`
  query {
    AllmarkDownRemark (Ordina: {campi: [FrontMatter___Date], Ordina: Desc}) {
      bordi {
        nodo {
          frontmatter {
            sentiero
            titolo
          }
        }
      }
    }
  }
`; 

In questa query, siamo interessati solo ai titoli e al percorso verso il post. Passiamo anche alcuni parametri da comportare per ottenere i post più recenti in ordine inverso. Questa query in particolare sta controllando la data dalla materia anteriore su ciascun post. La sintassi per ogni query dipenderà dal plugin utilizzato per generarlo.

Infine, il componente ha bisogno di aggiornare per utilizzare i dati. Il componente "LINK" fornito da Gatsby consente di sapere quali componenti devono eseguire il rendering del collegamento e farà in modo che recupera i pacchetti giusti di conseguenza.

 Const IndicePage = ({Data}) = & GT; {
  ritorno (
    & lt; layout & gt;
      {dati.allmarkDownDremark.edges.map (
        ({nodo: {frontmatter: {percorso, titolo}}}) = & gt; (
          & lt; collegamento key = {percorso} to = {percorso} e GT;
            {titolo}
          & lt; / link & gt;
        ))}
    & lt; / Layout & GT;
  )
} 

Con ciò, il nostro blog è finito. Tutto ciò che rimane è quello di smarrire e avere Gatsby costruire un sito Web di produzione. Correndo NPM Run Build. Può spogliare eventuali miglioramenti utilizzati per lo sviluppo e generare pacchetti pronti per la distribuzione. Una volta terminato, la cartella "pubblica" può quindi essere caricata ovunque in grado di servire siti statici. Hai file da archiviare per il tuo blog? Assicurati che siano sicuri in brillante deposito cloud. .

Questo articolo è stato originariamente pubblicato in questione 314 di netto , la rivista best-seller del mondo per web designer e sviluppatori. Comprare il problema 314 qui o Iscriviti qui .

Articoli Correlati:

• Il 16. Le migliori piattaforme di blogging gratuite
• Usa WordPress come un CMS senza testa
• Come codice JavaScript più veloce e più leggero