Costruiamo il primo sito con Gatsby

Nel precedente articolo abbiamo visto cos'è Gatsby e quali prerequisiti occorre installare nell'ambiente di sviluppo.

In questo articolo vedremo come costruire il primo sito con Gatsby; in particolare, il sito che andremo a creare sarà un blog.

Verifica dei prerequisiti

Verifichiamo che siano stati installati tutti gli strumenti che ci servono per definire il nostro blog:

• Git: apriamo il prompt dei comandi e digitiamo:

git --version

se vediamo un output simile a questo:

C:\Users\User>git --version
git version 2.37.2.windows.2

allora l'installazione di Git è andata a buon fine

• Node.js: sempre nel prompt di comandi digitiamo:

node --version

e dovremmo vedere l'output simile a:

C:\Users\User>node --version
v16.17.0

• Gatsby CLI: ancora nel prompt di comandi scriviamo:

gatsby --version

il quale, se l'installazione è riuscita, risponderà con:

C:\Users\User>gatsby --version
Gatsby CLI version: 4.21.0
Gatsby version: 4.21.0

• Visual Studio code: sempre nel prompt di comandi scriviamo:

code .

e, se l'installazione di Visual Studio Code è andata a buon fine, si aprirà l'editor.

Definizione della struttura del sito

Dopo aver verificato la corretta installazione dei requisiti, possiamo finalmente creare il nostro blog:

• creiamo una directory che conterrà i nostri blog, ad esempio come subdirectory di C:, con il comando:

md MyBlogs

• ci spostiamo nella directory appena aggiunta e creiamo la struttura del nostro blog con il comando "gatsby new ...":

cd MyBlogs
gatsby new MyFirstBlog https://github.com/gatsbyjs/gatsby-starter-hello-world

Il comando "gatsby new ..." premette di creare un sito basato su un tema predefinito.

In particolare, il comando riportato crea la directory "MyFirstBlog" e, all'interno, definisce la struttura del sito in funzione del tema (starter) "gatsby-starter-hello-world";

• ci posizioniamo dentro la directory che è stata creata per il nostro blog:

cd MyFirstBlog

e apriamo il sito con Visual Studio Code con il comando:

code .

• apriamo il terminale interno di Visual Studio Code e digitiamo il comando:

gatsby develop

per avviare il server di sviluppo e accedere al sito appena creato.

Se il comando gatsby develop genera un errore di questo tipo:

gatsby : File C:*********\npm\gatsby.ps1 cannot be loaded because running scripts is disabled on this system. For more
information, see about_Execution_Policies at https:/go.microsoft.com/fwlink/?LinkID=135170.
At line:1 char:1
+ gatsby develop
+ ~~~~~~
    + CategoryInfo          : SecurityError: (:) [], PSSecurityException
    + FullyQualifiedErrorId : UnauthorizedAccess

apriamo una finestra PowerShell con modalità amministratore e digitiamo il comando:

Set-ExecutionPolicy RemoteSigned

Con il server di sviluppo avviato, possiamo accedere al nostro sito navigando all'url:

localhost:8000

La pagina visualizzata è quella predefinita per il tema scelto:

File -> Salvataggio automatico

Modifichiamo la home page

Il blog appena creato è sostanzialmente vuoto, a parte la home page che abbiamo visto navigando all'indirizzo localhost:8000.

Cominciamo a modificare la home page, il cui contenuto è memorizzato nel file index.js.

Apriamo il file index.js e sostituiamo il codice con questo:

      import React from "react"

      export default function Home() {
      return <div>Hello world!<br/>Questo è il mio nuovo blog</div>
      }

Salviamo il file (se non abbiamo attivato il salvataggio automatico) e, con il server di sviluppo ancora attivo, possiamo vedere la home page modificata nel browser:

Non abbiamo aggiunto molto al sito, però abbiamo visto come sia semplice modificare il contenuto di una pagina e vedere in tempo reale le modifiche.

GraphQL e gatsby-config.js

GraphQL è un linguaggio di interrogazione (query language) utilizzato per accedere ai dati e utilizzarli nelle pagine che andremo ad aggiungere al nostro blog.

Le interrogazioni (query) sono la rappresentazione dei dati di cui abbiamo bisogno; GraphQL permette di esprimere in maniera dichiarativa la struttura dei dati.

Vediamo subito un esempio:

• apriamo il file gatsby-config.js e aggiungiamo nella sezione module.exports questo contenuto:

        module.exports = {
        /* Your site config here */
        siteMetadata: {
          title: 'Il mio blog',
          description: 'Questo è il mio nuovo blog progettato con Gatsby.'  
        },
        plugins: [],
      }

• modifichiamo di nuovo il file index.js, sostituendo il contenuto con:

      import { graphql } from "gatsby"

      export default function Home({ data }) {
        const { title, description } = data.site.siteMetadata

        return (
          <div>
            <h1>{title}</h1>
            <p>{description}</p>
          </div>
        )
      }

      export const pageQuery = graphql`
        query MetadataQuery {
          site {
            siteMetadata {
              title
              description
            }
          }
        }
      `

• salviamo i due file, fermiamo il server di sviluppo premendo CTRL + C nel terminale e lo facciamo ripartire con il comando gatsby develop; questa operazione è necessaria, in quanto abbiamo modificato un file di configurazione, per cui non potremmo vedere le modifiche se non riavviando il server di sviluppo.

  Ora possiamo vedere la home page modificata nel browser:

Vediamo nel dettaglio le modifiche apportate:

• nel file gatsby-config.js abbiamo aggiunto il titolo del blog e una descrizione nei metadati relativi al sito;
• questi dati sono letti dalla query definita nel file index.js:

      export const pageQuery = graphql`
        query MetadataQuery {
          site {
            siteMetadata {
              title
              description
            }
          }
        }
      `

• attraverso questa query, stiamo dicendo a Gatsby di recuperare le informazioni title e description definite all'interno dei metadati del sito;

  il contenuto di queste informazioni è visualizzato con la sintassi "{informazione}":

      return (
            <div>
                  <h1>{title}</h1>
                  <p>{description}</p>
            </div>
            )

• come è intuibile, possiamo aggiungere altri attributi nel file di configurazione, ad esempio l'autore del sito, per poi aggiungerlo al contenuto della home page:

  ```gatsby-config.js```

        module.exports = {
        /* Your site config here */
        siteMetadata: {
          title: 'Il mio blog',
          description: 'Questo è il mio nuovo blog progettato con Gatsby.'  
        },
        plugins: [],
      }

index.js

      import { graphql } from "gatsby"

      export default function Home({ data }) {
        const { title, description } = data.site.siteMetadata

        return (
          <div>
            <h1>{title}</h1>
            <p>{description}</p>
          </div>
        )
      }

      export const pageQuery = graphql`
        query MetadataQuery {
          site {
            siteMetadata {
              title
              description
            }
          }
        }
      `

Nel prossimo articolo, vedremo come aggiungere pagine e definiremo la navigazione tra la home page e le pagine aggiunte.