Cos'è Gatsby

È un front end framework per lo sviluppo di siti web: è veloce, sicuro e scalabile ed offre gli strumenti per rendere il sito web accessibile a tutti. È basato su React, per cui tutto ciò che è possibile fare con React è possibile farlo anche con Gatsby.

Nello sviluppo di un sito web, si può scegliere di partire da zero nella sua costruzione oppure è possibile utilizzare uno dei tanti siti predefiniti e open source (Starter), scegliendo quello che si avvicina di più alla nostra idea per il sito.

Ci sono starter per creare blog, siti di e-commerce oppure siti di documentazione di vario genere.

Inoltre, ci sono migliaia di plugin, attraverso i quali è possibile estendere le funzionalità di Gatsby per rendere più semplice e funzionale lo sviluppo del nostro sito.

Prerequisiti

Per meglio comprendere i meccanismi e le funzionalità di Gatsby, è utile avere conoscenza, anche di base, di tecnologie e linguaggi che stanno alla base dello sviluppo di siti web, quali:

• HTML (HyperText Markup Language): è il linguaggio utilizzato per la creazione di pagine web; permette la definizione sia del contenuto della pagina che della sua formattazione
• CSS (Cascading Style Sheets): è il linguaggio utilizzato per definire la formattazione di pagine o documenti scritti con HTML, ovvero le pagine dei siti web
• Javascript: è un linguaggio ad oggetti utilizzato nella programmazione web sia lato client che server, per rendere i documenti HTML dinamici e interattivi

È consigliabile avere le nozioni di base anche riguardo a:

• CLI (Command Line Interface, ovvero interfaccia a riga di comando): fornisce le funzionalità per impartire comandi tramite la scrittura di istruzioni testuali anziché l'utilizzo del mouse
• React: è una libreria Javascript per la creazione di pagine web, in particolare rivolta alla definizione dell'interfaccia utente
• GraphQL: è un linguaggio di interrogazione per API (interfacce di programmazione delle applicazioni)

È possibile installare Gatsby sui più diffusi sistemi operativi, quali Windows, Linux o MacOs.

In questa guida, sono fornite le indicazioni per l'ambiente Windows.

Preparazione dell'ambiente di sviluppo

Prima di procedere all'installazione di Gatsby, occorre installare i seguenti tools:

• Node.js: è un framework che permette l'esecuzione di codice Javascript all'esterno del browser, ovvero lato server. Per installarlo, occorre scaricare il pacchetto relativo alla versione richiesta ed eseguirlo. Insieme a Node.js, viene installato anche npm (Node Package Manager): è un gestore di pacchetti con interfaccia a riga di comando (CLI) che permette l'installazione, l'aggiornamento e la gestione delle dipendenze di librerie e applicazioni Node.js.
• Git: è un VCS (Version Control System: sistema per il controllo di versione). Permette di tenere traccia di tutte le modifiche apportate al codice sorgente e di storicizzarlo ogni volta che lo riteniamo opportuno. In questo modo, se durante la scrittura del codice ci accorgiamo di aver preso una strada sbagliata, è possibile tornare sui propri passi e ripristinare una versione precedente. Per installare Git, occorre scaricare il pacchetto (link) ed eseguirlo.
• Visual Studio Code: è un editor di codice sorgente con funzionalità avanzate per debugging, version control integrato (Git), syntax highlighting e molto altro. In alternativa, è possibile utilizzare qualsiasi altro editor, benché l'utilizzo di Visual Studio Code faciliti non poco il processo di costruzione del sito web. È possibile scaricare il pacchetto per il proprio sistema operativo da qui.
• Gatsby CLI (Gatsby Command Line Interface):
  è uno strumento che permette la creazione e la manutenzione di siti Web. Gatsby CLI è distribuito come un package npm, per cui la sua installazione avviene utilizzando i comandi di npm:
  • apri il prompt dei comandi di Windows (tasto ⊞ Win + R e digita "cmd")
  • scrivi questo comando e premi Invio:

npm install -g gatsby-cli

• l'installazione potrebbe impiegare qualche minuto. Al termine, per verificare che il processo sia andato a buon fine, puoi verificare la versione installata con il comando:

gatsby --version

• se l'installazione è terminata senza errori, il comando precedente visualizzerà la versione installata; ad esempio:

Gatsby CLI version: 3.12.0

• naturalmente, ci sono altri comandi disponibili ed è possibile elencarli con il comando:

gatsby --help

• Il risultato sarà:

Usage: gatsby <command> [options]
Commands:
gatsby develop                      Start development server. Watches files, rebuilds, and hot reloads if something changes
gatsby build                        Build a Gatsby project.
gatsby serve                        Serve previously built Gatsby site.
gatsby info                         Get environment information for debugging and issue reporting
gatsby clean                        Wipe the local gatsby environment including built assets and cache
gatsby repl                         Get a node repl with context of Gatsby environment, see (https://www.gatsbyjs.com/docs/gatsby-repl/)
gatsby recipes [recipe]             [EXPERIMENTAL] Run a recipe
gatsby plugin <cmd> [plugins...]    Useful commands relating to Gatsby plugins
gatsby new [rootPath] [starter]     Create new Gatsby project.
gatsby telemetry                    Enable or disable Gatsby anonymous analytics collection.
gatsby options [cmd] [key] [value]  View or set your gatsby-cli configuration settings.
Options:
--verbose                Turn on verbose output                                             [boolean] [default: false]
--no-color, --no-colors  Turn off the color in output                                       [boolean] [default: false]
--json                   Turn on the JSON logger                                            [boolean] [default: false]
-h, --help               Show help                                                                           [boolean]
-v, --version            Show the version of the Gatsby CLI and the Gatsby package in the current project    [boolean]

A questo punto, abbiamo gli strumenti necessari per costruire un sito con Gatsby.

Nel prossimo articolo, vedremo in che modo è possibile creare un blog.