I siti web statici sono tornati alla ribalta negli ultimi anni grazie alla loro velocità, sicurezza e semplicità. Uno dei principali strumenti per la creazione di siti statici è Gatsby, un generatore di siti statici (SSG) velocissimo.

Se siete sviluppatori web e volete creare un blog personale, un sito portfolio o un sito aziendale, Gatsby può aiutarvi a raggiungere i vostri obiettivi. Questa guida completa vi accompagna nel processo di creazione di siti statici con Gatsby. Copre tutto, dalle basi agli argomenti più avanzati.

Un sito demo che mostra cosa si può costruire dopo aver letto questa guida
Un sito demo che mostra cosa si può costruire dopo aver letto questa guida.

Capire i siti statici

I siti statici sono pagine web contenenti file HTML, CSS e JavaScript prerenderizzati. A differenza dei siti dinamici, non si affidano all’elaborazione lato server per ogni richiesta. Al contrario, tutti i contenuti vengono generati in anticipo e serviti direttamente al browser dell’utente. Questo approccio offre diversi vantaggi:

  1. Velocità: i siti statici si caricano velocemente perché non c’è elaborazione lato server.
  2. Sicurezza: senza l’esecuzione di codice lato server, i siti statici sono meno vulnerabili alle minacce alla sicurezza.
  3. Scalabilità: è facile memorizzare nella cache e distribuire i siti statici attraverso le reti di distribuzione dei contenuti (CDN).
  4. Semplicità: sono più facili da sviluppare, distribuire e mantenere.

Ora che abbiamo approfondito cosa sono i siti statici e quali sono i loro vantaggi, vediamo come funziona Gatsby.

Cos’è Gatsby?

Gatsby è un framework open-source basato sulla libreria JavaScript React che semplifica il processo di costruzione di siti web statici. Combina la potenza dei componenti React con GraphQL per la gestione dei dati, rendendolo una scelta eccellente per gli sviluppatori di tutti i livelli. Ecco perché Gatsby si distingue:

  1. Velocità straordinaria: Gatsby ottimizza i siti per la velocità utilizzando tecniche come code splitting e lazy loading, per un caricamento quasi istantaneo delle pagine.
  2. Fornitura flessibile dei dati: può reperire i dati da diversi luoghi, tra cui file Markdown, API e database.
  3. Ricco ecosistema di plugin: l’ampio ecosistema di plugin di Gatsby permette di estendere le sue funzionalità senza alcuno sforzo.
  4. SEO e prestazioni: Gatsby genera automaticamente un HTML ottimizzato per migliorare la SEO e le prestazioni.

Primi passi con Gatsby

Per seguire questa guida, è necessario avere:

  • Conoscenza di base di HTML, CSS e JavaScript
  • Conoscenza di base di React
  • Node.js e npm (Node Package Manager) o yarn installati sul computer

Per iniziare a utilizzare Gatsby e creare un progetto, potete utilizzare uno dei tanti esempi presenti nella Gatsby Starter Library o creare un progetto da zero.

Per questa guida, utilizziamo lo starter ufficiale di hello world per GatsbyJS perché ci fornisce un progetto semplice senza plugin o file aggiuntivi con cui partire.

  1. Per prima cosa, installiamo la Gatsby CLI sul computer eseguendo il comando qui sotto:
npm install -g gatsby-cli

Eseguiamo gatsby --version per verificare se l’installazione è avvenuta con successo.

  1. Successivamente, navighiamo nella cartella in cui desideriamo creare il progetto ed eseguiamo il comando:
npx gatsby new <project-name> https://github.com/gatsbyjs/gatsby-starter-hello-world

Cambiate pure <project-name> con il nome che preferite per il vostro progetto.

  1. Una volta completata l’operazione, navighiamo nella cartella del progetto e avviamo il server di sviluppo:
cd <project-name>
gatsby develop

Il server di sviluppo locale verrà avviato all’indirizzo http://localhost:8000, dove potremo accedere al nostro sito Gatsby.

Il tema Gatsby hello world
Il tema Gatsby hello world.

Capire la struttura dei file di Gatsby

Una volta aperto il progetto in un editor di codice, vedremo la seguente struttura:

/
|-- /public
|-- /src
    |-- /pages
        |-- index.js
|-- /static
|-- gatsby-config.js
  • /public: Questa directory contiene l’output del processo di creazione di Gatsby. È dove risiedono l’HTML, il CSS, il JavaScript e altre risorse generate.
  • /src: è il cuore del progetto Gatsby, dove passeremo la maggior parte del tempo. Contiene varie sottodirectory e file:
    • /pages: qui sono archiviate tutte le pagine del progetto. Ogni file JavaScript qui presente corrisponde a un percorso del sito web.
  • /static: questa directory è utilizzata per i file statici che vogliamo includere nel sito, come immagini, font o file scaricabili. Questi file vengono serviti così come sono e non vengono elaborati da Gatsby.
  • gatsby-config.js: in questo file di configurazione vengono definite varie impostazioni per il sito Gatsby. Qui possiamo specificare i plugin, i metadati del sito e altre configurazioni.

Creare pagine e componenti

In Gatsby, la creazione di pagine web è un processo semplice. Qualsiasi file JavaScript creato all’interno della cartella /src/pages diventa automaticamente una pagina con il suo percorso corrispondente, grazie alla generazione automatica di pagine di Gatsby.

Possiamo creare tutte le pagine di cui abbiamo bisogno per il sito web aggiungendo altri file JavaScript alla cartella /src/pages. Ad esempio, possiamo creare un file about.js per una pagina “Informazioni”.

Sebbene sia possibile creare singoli file JavaScript per ogni pagina direttamente nella cartella /src/pages, è anche possibile organizzare ulteriormente le pagine. Possiamo creare delle sottocartelle per raggruppare pagine correlate. Ad esempio, potreste creare una cartella blog per organizzare tutte le pagine relative al blog.

Per questo progetto, la struttura delle pagine sarà la seguente:

|-- /src
    |-- /pages
        |-- about.js
        |-- index.js
        |-- /blog
            |-- index.js

Utilizzare JSX per le pagine

Poiché Gatsby è costruito su React, le sue pagine e i suoi componenti sono scritti in JSX (JavaScript XML). JSX è un’estensione della sintassi di JavaScript che permette di definire la struttura e il layout delle interfacce utente in modo altamente leggibile ed espressivo.

Ad esempio, possiamo creare il contenuto della pagina iniziale (index.js) in questo modo:

import React from 'react';

export default function Home() {
  return (
    <>
      <div>
        <h1>Enjoy Static Site Hosting With Kinsta StSH.</h1>
        <p>Fast, Secure, Reliable Hosting Solution.</p>
      </div>
    </>
  );
}

Collegare le pagine in Gatsby

Per creare un link a un’altra pagina, possiamo utilizzare il componente Link come segue:

import React from 'react';
import { Link } from 'gatsby';

export default function Home() {
    return (
        <>
            <div>
                <h1>Enjoy Static Site Hosting With Kinsta StSH.</h1>
                <p>Fast, Secure, Reliable Hosting Solution.</p>
                <Link> to="/about">About Us</Link>
                <Link> to="/blog">Blog</Link>
            </div>
        </>
    );
}

Nell’esempio precedente, abbiamo importato il componente Link da gatsby e lo abbiamo utilizzato per creare collegamenti alla pagina “Chi siamo” e a un blog. La pagina “Chi siamo”, ad esempio, ha il percorso /about. Quando gli utenti cliccheranno sul link “Chi siamo”, verranno indirizzati alla pagina /about.

Per creare collegamenti a siti web esterni, possiamo utilizzare i normali tag di ancoraggio (<a>) con l’attributo href:

import React from 'react';

export default function Home() {
  return (
        <>
            <div>
                <h1>Enjoy Static Site Hosting With Kinsta StSH.</h1>
                <p>Fast, Secure, Reliable Hosting Solution.</p>
                <div>
                    <h1>Enjoy Static Site Hosting With Kinsta StSH.</h1>
                    <p>Fast, Secure, Reliable Hosting Solution.</p>
                    <a href="https://kinsta.com/docs/static-site-hosting/" target="_blank" rel="noreferrer">
                        <div>Read more</div>
                    </a>
                </div>
            </div>
        </>
    );
}

In questo caso, il link apre il sito esterno in una nuova scheda del browser grazie agli attributi target="_blank" e rel="noreferrer".

Creare componenti in Gatsby

L’architettura a componenti di Gatsby permette di creare blocchi riutilizzabili per le pagine web. Invece di duplicare il codice in più pagine, è possibile incapsulare elementi comuni in componenti, rendendo così la base di codice più organizzata, manutenibile ed efficiente.

Supponiamo che il codice della homepage includa la sezione di navigazione, il contenuto principale e il footer:

import React from 'react';
import { Link } from 'gatsby';

export default function Home() {
  return (
    <>
      <div className="nav-links">
        <Link> to="/">Home</Link>
        <Link> to="/about">About</Link>
        <Link> to="/blog">Blog</Link>
      </div>
      <div>
        <h1>Enjoy Static Site Hosting With Kinsta StSH.</h1>
        <p>Fast, Secure, Reliable Hosting Solution.</p>
        <a href="https://kinsta.com/docs/static-site-hosting/">
          <div>Read more</div>
        </a>
      </div>
      <div className="footer">
        <p>
          Hosted with ❤️ by Kinsta's{' '}
          <a> href="https://kinsta.com/static-site-hosting">
            Static Site Hosting
          </a>
          .
        </p>
      </div>
    </>
  );
}

Immaginiamo di dover duplicare il codice della navbar e del footer per ogni pagina del sito. È qui che entra in gioco la potenza dei componenti. Possiamo creare componenti riutilizzabili per la navbar, il footer e ogni pezzo di codice che si ripete su più pagine e componenti.

Per lavorare con i componenti in Gatsby, creiamo una cartella components nella cartella src per memorizzare tutti i componenti. Quindi, creiamo i nostri componenti, ad esempio Navbar.js e Footer.js. Nel file Navbar.js, separiamo il codice in questo modo:

import { Link } from 'gatsby';
import React from 'react';

const Navbar = () => {
    return (
        <nav>
            <div className="nav-links">
                <Link to="/">Home</Link>
                <Link to="/about">About</Link>
                <Link to="/blog">Blog</Link>
            </div>
        </nav>
    );
};

export default Navbar;

E anche Footer.js:

import React from 'react';
const Footer = () => {
    return (
        <div className="footer">
            <p>
                Hosted with ❤️ by Kinsta's{' '}
                <a> href="https://kinsta.com/static-site-hosting">Static Site Hosting</a>
                .
            </p>
        </div>
    );
};

export default Footer;

Successivamente, importiamo i file dei componenti nelle pagine o nei componenti e utilizziamo questo metodo:

import React from 'react';
import Navbar from '../components/Navbar';
import Footer from '../components/Footer';

export default function Home() {
  return (
    <>
      <Navbar />
      <div>
        <h1>Enjoy Static Site Hosting With Kinsta StSH.</h1>
        <p>Fast, Secure, Reliable Hosting Solution.</p>
        <a href="https://kinsta.com/docs/static-site-hosting/">
          <div>Read more</div>
        </a>
      </div>
      <Footer />
    </>
  );
}

Creare un componente di layout

Una pratica comune nello sviluppo web è quella di creare un componente di layout che racchiuda la struttura generale del sito. Il componente di layout in genere include elementi che appaiono in ogni pagina, come header, footer, menu di navigazione e barre laterali.

Creiamo un nuovo file chiamato Layout.js nella cartella /src/components. Successivamente, definiamo la struttura del layout. Per questa guida, la struttura del layout includerà solo la navbar e il footer:

import React from 'react';
import Navbar from './Navbar';
import Footer from './Footer';

const Layout = ({ children }) => {
    return (
        <div className="layout">
            <Navbar />
            <div> className="content">{children}</div>
            <Footer />
        </div>
    );
};

export default Layout;

In questo componente di layout, utilizziamo i componenti per avvolgere il contenuto della pagina (forniti come children). Per utilizzare il componente di layout nelle pagine, importiamolo e inseriamolo nel contenuto della pagina. Ad esempio, nella pagina index.js:

import React from 'react';
import Layout from '../components/Layout';

export default function Home() {
  return (
    <Layout>
      <div>
        <h1>Enjoy Static Site Hosting With Kinsta StSH.</h1>
        <p>Fast, Secure, Reliable Hosting Solution.</p>
        <a href="https://kinsta.com/docs/static-site-hosting/">
          <div>Read more</div>
        </a>
      </div>
    </Layout>
  );
}

Utilizzando un componente di layout, garantiamo una struttura e un aspetto coerenti in tutte le pagine, mantenendo il codice organizzato e manutenibile. È un modo efficace per gestire gli elementi comuni del sito in modo efficiente.

Modificare lo stile delle pagine e dei componenti in Gatsby

Lo styling dei siti in Gatsby dispone di una certa flessibilità e permette di utilizzare diversi approcci, tra cui CSS normale, CSS-in-JS o preprocessori CSS come Sass. Scopriamo come creare uno stile normale e un modulo per le pagine.

Styling del CSS

In Gatsby è possibile creare facilmente un file CSS e collegarlo a un componente o a una pagina che funziona perfettamente. Ad esempio, è possibile creare una cartella styles nella cartella src e poi creare un file global.css con il proprio codice CSS.

Ad esempio, ecco alcuni stili globali di base per i componenti creati in precedenza:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #ddd;
    font-family: 'Poppins',
        sans-serif;
    width: 1200px;
    margin: 0 auto;
}

a {
    text-decoration: none;
}

img {
    width: 100%;
}

nav {
    display: flex;
    justify-content: space-between;
    height: 200px;
    align-items: center;
}

nav .logo-img {
    width: 100px;
}

nav .nav-links a {
    padding: 0 20px;
    font-size: 18px;
}

@media (max-width:700px) {
    body {
        width: 100%;
        padding: 0 20px;
    }

    nav .nav-links a {
        padding: 0 18px;
    }
}

.footer {
    width: 100%;
    text-align: center;
    margin: 100px 0 20px;
}

Nel codice qui sopra, stiamo importando il font Poppins da Google Fonts e poi definiamo gli stili di base da applicare a tutti i componenti.

Successivamente, potrete importare il file CSS nei componenti a cui desiderate applicare lo stile, ma per questo progetto possiamo aggiungerlo al componente Layout in modo che si applichi globalmente:

import React from 'react';
import Navbar from './Navbar';
import Footer from './Footer';
import '../styles/global.css';

const Layout = ({ children }) => {
    return (
        <div>
            <Navbar />
            <div> className="content">{children}</div>
            <Footer />
        </div>
    );
};

export default Layout;

Stile dei moduli CSS

I moduli CSS permettono di applicare gli stili a componenti o pagine specifiche. In questo modo si evitano conflitti di stile e si facilita la manutenzione del codice. Nella cartella styles, creiamo i nostri moduli CSS utilizzando il formato <nomepagina>.module.css e aggiungiamo lo stile specifico al file.

Ad esempio, creiamo home.module.css per la homepage e aggiungiamo il seguente codice:

.home_hero {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;

}

.home_hero h1 {
    font-size: 60px;
    width: 70%;
}

.home_hero p {
    color: #6E7076;
    font-size: 20px;
}

.btn {
    background-color: #5333ed;
    padding: 20px 30px;
    margin-top: 40px;
    border-radius: 5px;
    color: #fff;
}

@media (max-width:700px) {
    .home_hero h1 {
        font-size: 40px;
    }

    .home_hero p {
        font-size: 16px;
    }
}

Per utilizzare gli stili CSS del modulo nella nostra pagina o nel nostro componente Gatsby, importiamo gli stili del modulo CSS come oggetto all’inizio del file della pagina o del componente e usiamoli in questo modo:

import React from 'react';
import Layout from '../components/Layout';
import * as styles from '../styles/home.module.css';

export default function Home() {
  return (
    <Layout>
      <div className={styles.home_hero}>
        <h1>Enjoy Static Site Hosting With Kinsta StSH.</h1>
        <p>Fast, Secure, Reliable Hosting Solution.</p>
        <a href="https://kinsta.com/docs/static-site-hosting/">
          <div className={styles.btn}>Read more</div>
        </a>
      </div>
    </Layout>
  );
}


Usare i file statici in Gatsby

In Gatsby, i file statici si riferiscono a risorse come immagini, font, file CSS e altre risorse che vengono servite direttamente al browser del cliente senza alcuna elaborazione lato server. Questi file vengono aggiunti alla directory /static nella radice del progetto.

Ad esempio, se aggiungiamo un’immagine kinsta-logo.png alla cartella /static, possiamo visualizzarla nel componente in questo modo:

import { Link } from 'gatsby';
import React from 'react';

const Navbar = () => {
    return (
        <nav>
            <Link> to="/">
                <img src="/kinsta-logo.png" alt="Kinsta Logo" className="logo-img" />
            </Link>
            <div className="nav-links">
                <Link> to="/">Home</Link>
                <Link> to="/about">About</Link>
                <Link> to="/blog">Blog</Link>
            </div>
        </nav>
    );
};

export default Navbar;

Gatsby risolve automaticamente questi percorsi relativi con l’URL corretto quando il sito viene creato. Più avanti in questa guida scopriremo come ottimizzare le immagini in Gatsby.

Plugin e integrazioni

Gatsby ha un ricco ecosistema di plugin che possono estendere le sue funzionalità. Esistono plugin per la SEO, le statistiche, l’ottimizzazione delle immagini, la trasformazione di markdown e molto altro ancora. Installare e configurare i plugin è semplice e questi possono migliorare notevolmente le funzionalità del sito.

In questa guida utilizziamo quattro plugin:

  1. gatsby-transformer-remark: questo plugin permette di trasformare i file Markdown in contenuti HTML, rendendo più semplice la creazione e la gestione di post di blog, documentazione o qualsiasi altro contenuto testuale.
  2. gatsby-transformer-sharp e gatsby-plugin-sharp: questi plugin lavorano insieme per ottimizzare e manipolare le immagini nel progetto Gatsby.
  3. gatsby-source-filesystem: questo plugin permette di creare dei file dalla directory del progetto e di renderli disponibili per le interrogazioni con GraphQL.

Per utilizzare questi plugin nel nostro progetto Gatsby, eseguiamo il comando qui sotto nella directory principale del progetto per installarli:

npm install gatsby-transformer-remark gatsby-transformer-sharp gatsby-plugin-sharp gatsby-source-filesystem

Successivamente, configuriamoli nel file gatsby-config.js. Ecco un esempio di come configurare i plugin:

module.exports = {
    plugins: [
        // ...other plugins
        // Transform Markdown files into HTML
        'gatsby-transformer-remark',
        // Optimize and manipulate images
        'gatsby-transformer-sharp',
        'gatsby-plugin-sharp',
        // Source files from your project directory
        {
            resolve: `gatsby-source-filesystem`,
            options: {
                name: `posts`,
                path: `${__dirname}/src/posts/`,
            },
        },
        {
            resolve: `gatsby-source-filesystem`,
            options: {
                name: `images`,
                path: `${__dirname}/src/images/`,
            },
        },
    ],
};

Vengono create due configurazioni di gatsby-source-filesystem che puntano a due cartelle: posts e images. Posts memorizzerà alcuni file markdown (post del blog) che verranno trasformati con gatsby-transformer-remark, mentre images memorizzerà le immagini del blog e altre immagini che desideriamo ottimizzare.

Ricordate sempre di riavviare il server di sviluppo locale quando apportate delle modifiche al file gatsby-config.js.

Creare i post del blog

Ora che abbiamo configurato i nostri plugin, creiamo una cartella posts nella directory src e poi creiamo due file Markdown con il seguente contenuto:

post-1.md:

---
title: "Introduction to Gatsby"
date: "2023-10-01"
slug: "introduction-to-gatsby"
description: "Learn the basics of Gatsby and its features."
featureImg: ../images/featured/image-1.jpeg
---

Welcome to the world of Gatsby! In this post, we will introduce you to the basics of Gatsby and its powerful features.

E post-2.md:

---
title: "Optimizing Images in Gatsby"
date: "2023-10-05"
slug: "optimizing-images-in-gatsby"
description: "Explore how to optimize images in your Gatsby project."
featureImg: ../images/featured/image-2.jpeg
---

Images play a crucial role in web development. In this post, we'll dive into how to optimize images in Gatsby using plugins.

Questi file Markdown contengono frontmatter con metadati sui post del blog, tra cui titoli, date, slug, descrizioni e percorsi delle immagini.

Interrogare Gatsby con GraphQL

Gatsby utilizza GraphQL per interrogare e recuperare i dati del sito web. GraphQL è un potente linguaggio di interrogazione che permette di richiedere esattamente i dati di cui si ha bisogno, rendendolo efficiente e flessibile. Scopriamo come interrogare i dati in Gatsby utilizzando GraphQL.

Quando eseguite gatsby develop nel terminale, noterete che, oltre al link gatsby-source-filesystem, che apre il progetto sul web, vedrete anche l’URL http://localhost:8000/___graphql. Questo URL fornisce l’accesso all’editor GraphiQL per il progetto Gatsby.

Aprendo l’editor, vedremo questa interfaccia:

L'interfaccia GraphiQL di Gatsby
L’interfaccia di GraphiQL di Gatsby.

Da questo editor è possibile interrogare tutte le informazioni sul sito. Ma dato che abbiamo creato i file markdown e abbiamo effettuato tutte le configurazioni nel file gatsby-config.js, interroghiamo i file Markdown e il loro contenuto con la seguente query nell’editor:

query BlogList {
    allMarkdownRemark {
        nodes {
            frontmatter {
                title
                slug
                description
            }
            id
        }
    }
}

Questa query recupera i dati da tutti i file Markdown utilizzando allMarkdownRemark. Recupera i dati title, slug e description dal frontmatter di ogni file e anche il loro id.

Dopo aver scritto la query, clicchiamo sul pulsante “Play” (un’icona a forma di triangolo rivolta verso destra) per eseguirla. I risultati verranno visualizzati sul lato destro dell’editor.

Come utilizzare il playground di GraphiQL per ottenere informazioni markdown
Come utilizzare il playground di GraphiQL per ottenere informazioni markdown.

Possiamo quindi utilizzare GraphQL per interrogare i dati Markdown nei componenti o nelle pagine. Per interrogare questi dati nella pagina blog/index.js, importiamo prima graphql da gatsby. Poi, in fondo al codice JSX, aggiungiamo quanto segue:

export const query = graphql`
query BlogList {
    allMarkdownRemark {
        nodes {
            frontmatter {
                title
                slug
                description
            }
            id
        }
    }
}
`;

Nel codice qui sopra, utilizziamo il tag graphql per creare una query GraphQL chiamata query. Ecco come dovrebbe apparire il file blog/index.js:

import { graphql, Link } from 'gatsby';
import React from 'react';
import Layout from '../../components/Layout';
import * as styles from '../../styles/blog.module.css';

const blog = ({ data }) => {
    const posts = data.allMarkdownRemark.nodes;
    return (
        <Layout>
            <div className={styles.blog_cont}>
                <h2>Blog</h2>
                <div className={styles.blog_grid}>
                    {posts.map((post) => (
                        <Link
                            to={`/blog/${post.frontmatter.slug}`}
                            className={styles.blog_card}
                            key={post.id}
                        >
                            <h3>{post.frontmatter.title}</h3>
                            <p>{post.frontmatter.description}</p>
                        </Link>
                    ))}
                </div>
            </div>
        </Layout>
    );
};
export default blog;

export const query = graphql`
query BlogList {
    allMarkdownRemark {
        nodes {
            frontmatter {
                title
                slug
                description
            }
            id
        }
    }
}
`;

Nel codice precedente, accediamo al risultato di query tramite il prop data nel componente. Successivamente, eseguiamo il loop dei dati di posts utilizzando il metodo map() e poi visualizziamo i titoli in un elenco.

Per evitare errori, creiamo un file blog.module.css nella cartella styles e aggiungiamo il seguente codice:

.blog_cont h2 {
    font-size: 40px;
    margin-bottom: 20px;
}

.blog_grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}

@media (max-width:700px) {
    .blog_grid {
        grid-template-columns: 1fr;
    }
}

.blog_card {
    background-color: #bfbfbf;
    padding: 20px;
    border-radius: 5px;
    color: #000;
    transition: all .5s ease-in-out;
}

.blog_card:hover {
    background-color: #5333ed;
    color: #fff;
}

.blog_card h3 {
    margin-bottom: 15px;
}

.blog_card p {
    margin-bottom: 15px;
}
Visualizzazione dei post del blog recuperati tramite GraphQL
Visualizzazione dei post del blog recuperati tramite GraphQL.

Capire i template e generare pagine dinamiche in Gatsby con GraphQL

In Gatsby, i template e le pagine dinamiche sono concetti essenziali che permettono di creare siti web flessibili e basati sui dati. I template permettono di definire la struttura e il layout delle pagine, mentre GraphQL aiuta a recuperare i dati per popolare questi template in modo dinamico.

Creare un template di post per il blog

Supponiamo di voler creare un blog in cui ogni post abbia una struttura coerente, che includa un titolo e un contenuto. Possiamo creare un template BlogDetails per definire questo layout. Nella cartella src, creiamo una cartella templates, quindi creiamo un file blog-details.js:

import React from 'react';
import Layout from '../components/Layout';
import * as styles from '../styles/blog-details.module.css';

const BlogDetails = () => {

    return (
        <Layout>
            <div>
                <div className={styles.blog_content}>
                    <Img
                        className={styles.blog_featured}
                    />
                    <h3>Title</h3>
                    <div>
                        className={styles.html}
                        dangerouslySetInnerHTML={}
                    />
                </div>
            </div>
        </Layout>
    );
};

export default BlogDetails;

In questo esempio, il template BlogDetails definisce la struttura dei singoli post del blog. Successivamente, utilizziamo GraphQL per recuperare i dati relativi a specifici post del blog e passarli come props a questo template.

Generare pagine dinamiche

Per generare pagine dinamiche, creiamo un file gatsby-node.js nella directory principale del progetto. Questo file permette di definire le modalità di creazione delle pagine.

Nel file gatsby-node.js, usiamo GraphQL per interrogare i dati che vogliamo usare per le pagine dinamiche. Ad esempio, se avete dei post del blog in Markdown, potete interrogare i loro slug:

const path = require(`path`);

exports.createPages = async ({ graphql, actions }) => {
  const { data } = await graphql(`
    query Articles {
      allMarkdownRemark {
        nodes {
          frontmatter {
            slug
          }
        }
      }
    }
  `);

  data.allMarkdownRemark.nodes.forEach((node) => {
    actions.createPage({
      path: '/blog/' + node.frontmatter.slug,
      component: path.resolve('./src/templates/blog-details.js'),
      context: { slug: node.frontmatter.slug },
    });
  });
};

In questo esempio, interroghiamo gli slug di tutti i post Markdown e creiamo pagine dinamiche per ogni post utilizzando il template BlogDetails. L’oggetto contesto viene utilizzato per passare i dati al template. Questi dati (slug) sono utilizzati dal template per recuperare altri dati che si allineano con lo slug.

Vediamo come funziona l’ottimizzazione delle immagini in Gatsby prima di aggiungere una query GraphQL alla pagina del template.

Ottimizzazione delle immagini in Gatsby

In precedenza, abbiamo installato e configurato gatsby-transformer-sharp e gatsby-plugin-sharp insieme a gatsby-source-filesystem per recuperare le immagini.

Con questi plugin, possiamo interrogare e ottimizzare le immagini con GraphQL. Ecco un esempio di come interrogare e visualizzare un’immagine ottimizzata utilizzando gatsby-plugin-sharp:

export const query = graphql`
  query {
    file(relativePath: { eq: "example.jpg" }) {
      childImageSharp {
        fluid {
          ...GatsbyImageSharpFluid
        }
      }
    }
  }
`;

Nel codice qui sopra, stiamo interrogando un’immagine denominata example.jpg dalla sorgente immagini e stiamo utilizzando la proprietà fluid dell’immagine interrogata per visualizzarla con un rendering reattivo e ottimizzato.

Possiamo quindi importare Img da gatsby-image per lavorare con le immagini ottimizzate.

import React from 'react';
import { graphql } from 'gatsby';
import Img from 'gatsby-image';

const ImageExample = ({ data }) => {
  const { fluid } = data.file.childImageSharp;

  return (
    <div>
      <Img fluid={fluid} alt="Example Image" />
    </div>
  );
};

export default ImageExample;

Interrogare le pagine dinamiche

Gatsby utilizzerà il template specificato per creare pagine individuali per ogni post del blog. Aggiungiamo ora una query GraphQL alla pagina del template per recuperare i dati in base allo slug:

import { graphql } from 'gatsby';
import Img from 'gatsby-image';
import React from 'react';
import Layout from '../components/Layout';
import * as styles from '../styles/blog-details.module.css';

const BlogDetails = ({ data }) => {
    const { html } = data.markdownRemark;
    const { title, featureImg } = data.markdownRemark.frontmatter;
    return (
        <Layout>
            <div>
                <div className={styles.blog_content}>
                    <Img
                        fluid={featureImg.childImageSharp.fluid}
                        className={styles.blog_featured}
                    />
                    <h3>{title}</h3>
                    <div
                        className={styles.html}
                        dangerouslySetInnerHTML={{ __html: html }}
                    />
                </div>
            </div>
        </Layout>
    );
};

export default BlogDetails;

export const query = graphql`
    query ProjectDetails($slug: String) {
        markdownRemark(frontmatter: { slug: { eq: $slug } }) {
            html
            frontmatter {
                title
                featureImg {
                    childImageSharp {
                        fluid {
                            ...GatsbyImageSharpFluid
                        }
                    }
                }
            }
        }
    }
`;

Nel codice qui sopra, noterete che stiamo eseguendo una query per l’immagine ottimizzata e una query per il post del blog che corrisponde allo slug.

Potete consultare il codice sorgente completo di questo progetto Gatsby su GitHub.

Distribuire i siti statici Gatsby con Kinsta

Kinsta permette di ospitare fino a 100 siti web statici gratuitamente. Per farlo è sufficiente inviare il codice al vostro provider Git preferito (Bitbucket, GitHub o GitLab) e poi distribuirlo su Kinsta.

Una volta che il repo sarà pronto, seguite questi passaggi per distribuire il vostro sito statico su Kinsta:

  1. Accedete o create un account per visualizzare il vostro cruscotto MyKinsta.
  2. Autorizzate Kinsta con il vostro provider Git.
  3. Cliccate su Siti statici nella barra laterale di sinistra e poi su Aggiungi sito.
  4. Selezionate il repository e il branch da cui desiderate effettuare il deploy.
  5. Assegnate un nome unico al sito.
  6. MyKinsta rileverà automaticamente le impostazioni di build per questo progetto Gatsby. Vedrete le seguenti impostazioni precompilate:
    • Comando di build: npm run build
    • Versione Node: 18.16.0
    • Directory di pubblicazione: public
  1. Infine, cliccate su Crea sito.

E il gioco è fatto! In pochi secondi avrete un sito distribuito, e riceverete un link per accedere alla versione distribuita del sito. In seguito, potrete aggiungere il vostro dominio personalizzato e il vostro certificato SSL, se lo desiderate.

In alternativa all’Hosting di Siti Statici, potreste scegliere di distribuire il vostro sito statico con l’Hosting di Applicazioni di Kinsta, che offre una maggiore flessibilità di hosting, una gamma più ampia di vantaggi e l’accesso a funzioni più strutturate. Ad esempio, la scalabilità, la distribuzione personalizzata tramite un file Docker e l’analisi completa dei dati storici e in tempo reale.

Riepilogo

Questa guida copre le basi del data sourcing, del routing, dello styling, dell’ottimizzazione delle immagini, dei plugin, della distribuzione e molto altro ancora.

La flessibilità, la velocità e il ricco ecosistema di Gatsby lo rendono una scelta ottimale per la creazione di siti web statici. Che stiate creando un blog personale, un sito di portfolio o un sito aziendale, Gatsby può essere la soluzione ideale per voi.

Ora è il momento di mettere in pratica le vostre conoscenze e iniziare a costruire il vostro sito Gatsby. Avete già utilizzato Gatsby per creare qualcosa? Non esitate a condividere con noi i vostri progetti e le vostre esperienze nella sezione commenti qui sotto.

Joel Olawanle Kinsta

Joel è uno Frontend developer che lavora in Kinsta come redattore tecnico. È un insegnante appassionato che ama l'open source e ha scritto oltre 200 articoli tecnici principalmente su JavaScript e i suoi framework.