Post Image

Vuoi creare un blog professionale, veloce e moderno, ma non sai da dove cominciare? In questa guida passo passo, ti mostrerò come creare il tuo primo blog usando Gatsby. Non preoccuparti se sei alle prime armi: partiremo dalle basi e, alla fine, avrai un blog funzionante che mostrerà i post nella homepage e attraverso un link ti consentirà di vedere il dettaglio del post stesso.

Cos'è Gatsby e Perché Usarlo

Gatsby è uno Static Site Generator (SSG) moderno e potente, costruito utilizzando il framework React. Ma cosa significa esattamente "Static Site Generator"? A differenza dei classici sistemi di gestione dei contenuti (CMS) come WordPress, che generano dinamicamente le pagine ogni volta che un utente visita il sito, un SSG crea le pagine una sola volta, in anticipo, e le salva come file HTML statici. Questo approccio offre numerosi vantaggi, sia in termini di performance che di semplicità nella distribuzione dei contenuti.

Il cuore di Gatsby è React, una libreria JavaScript molto popolare per costruire interfacce utente. Questo significa che con Gatsby puoi sfruttare tutta la potenza e la modularità di React per creare componenti riutilizzabili e interattivi, mantenendo però i benefici di un sito statico.

Perché scegliere Gatsby?

Gatsby è particolarmente indicato per chi vuole creare siti veloci, moderni e altamente ottimizzati per i motori di ricerca. È perfetto per blog personali, portfolio, siti aziendali o qualsiasi progetto in cui la velocità e l'ottimizzazione siano fondamentali.

  • Velocità: Le pagine statiche generate da Gatsby sono incredibilmente veloci, perché non richiedono elaborazioni lato server al momento della visita. Sono servite direttamente come file HTML precompilati, rendendo il caricamento quasi istantaneo.

  • SEO (Search Engine Optimization): Le pagine statiche sono facili da indicizzare per i motori di ricerca. Inoltre, Gatsby integra strumenti avanzati per ottimizzare automaticamente i contenuti, come la gestione di meta tag, sitemap e prestazioni delle immagini.

  • Flessibilità: Con Gatsby, puoi collegarti a fonti di contenuto diverse, come file Markdown, CMS headless (ad esempio, Contentful o Strapi), database, API esterne e molto altro. Inoltre, dispone di un vasto ecosistema di plugin che semplificano l'aggiunta di funzionalità come Google Analytics, feed RSS, immagini ottimizzate e molto altro.

In sintesi, Gatsby combina il meglio di due mondi: la flessibilità di un moderno framework JavaScript come React e l'efficienza di un sito statico. Questa combinazione lo rende una scelta ideale per chi desidera costruire un sito veloce, scalabile e facile da mantenere. Anche se non hai esperienza con React o con gli SSG, Gatsby ti guiderà con una documentazione dettagliata e strumenti che semplificano ogni fase dello sviluppo.

Creazione di un Nuovo Progetto Gatsby

Se stai iniziando a lavorare con Gatsby, hai a disposizione due metodi principali per creare un nuovo progetto: utilizzare npm oppure utilizzare Gatsby CLI. Entrambi sono validi, ma presentano differenze significative nel flusso di lavoro. Analizziamo nel dettaglio entrambe le opzioni per aiutarti a scegliere quella più adatta alle tue esigenze.

Creare un Progetto con Gatsby CLI

La Gatsby CLI (Command Line Interface) è uno strumento ufficiale sviluppato dal team di Gatsby per semplificare la creazione e la gestione dei progetti. Questo metodo è consigliato se vuoi un approccio rapido e ottimizzato, con accesso immediato a comandi specifici di Gatsby.

Di seguito, elenco i passaggi per creare un progetto con Gatsby CLI.

  1. Installa la Gatsby CLI globalmente
    Prima di tutto, assicurati di avere Node.js installato. Poi, utilizza il seguente comando per installare Gatsby CLI:

    sudo npm install -g gatsby-cli
    

    Questo rende disponibile il comando gatsby da qualsiasi directory del tuo sistema.

  2. Crea un nuovo progetto Gatsby
    Con il comando gatsby new, puoi creare un progetto basato su uno dei tanti template ufficiali. Ad esempio:

    gatsby new nome-del-progetto
    

    Questo scaricherà automaticamente il template predefinito, come il popolare gatsby-starter-default, e configurerà l'ambiente di lavoro per te.

  3. Accedi alla directory del progetto e avvia il server di sviluppo
    Una volta completata la creazione del progetto, spostati nella directory appena creata e avvia il server di sviluppo con:

    cd nome-del-progetto
    gatsby develop
    

    Dopo qualche istante, potrai visualizzare il tuo sito in sviluppo visitando http://localhost:8000 nel browser.

Questo metodo è particolarmente vantaggioso per i principianti perché automatizza molti passaggi, permettendoti di concentrarti direttamente sullo sviluppo del sito.

Creare un Progetto con npm (senza Gatsby CLI)

Se preferisci evitare di installare strumenti globali come Gatsby CLI, puoi utilizzare npm (o yarn) per creare un progetto Gatsby. Questo approccio ti offre maggiore controllo sulla configurazione iniziale, ma richiede qualche passaggio manuale in più.

Di seguito, elenco i passaggi per create un progetto con npm.

  1. Inizializza un nuovo progetto con npm
    Usa il seguente comando per avviare un wizard interattivo:

    npm init gatsby
    

    Durante il processo, ti verranno chieste informazioni come il nome del progetto e la directory di installazione.

  2. Accedi alla directory del progetto
    Dopo la configurazione iniziale, spostati nella cartella appena creata:

    cd mio-progetto
    
  3. Avvia il server di sviluppo
    Ora puoi lanciare il server di sviluppo per vedere il tuo sito in azione:

    npm run develop
    

    Anche in questo caso, il sito sarà accessibile all'indirizzo http://localhost:8000.

Questo metodo è ideale per chi desidera personalizzare fin da subito ogni aspetto del progetto, ma è meno immediato rispetto all’uso della Gatsby CLI.

Differenze Principali tra i Due Metodi

Di seguito alcune differenze tra i due approcci:

  • Semplicità:

    • Gatsby CLI: Facile e veloce
    • npm (senza CLI): Più passaggi manuali
  • Automazione:

    • Gatsby CLI: Automatizza molte configurazioni
    • npm (senza CLI): Richiede configurazioni manuali
  • Controllo sulla configurazione:

    • Gatsby CLI: Limitato (template predefiniti)
    • npm (senza CLI): Maggiore controllo

Consiglio: Se sei un principiante, ti suggeriamo di iniziare con la Gatsby CLI, perché ti consente di configurare il progetto rapidamente e concentrarti sul codice. Gli utenti più esperti, invece, potrebbero preferire il metodo basato su npm per avere maggiore flessibilità.

Struttura della cartella di progetto

Questo comando avvia la creazione di un nuovo progetto Gatsby, scaricando e configurando la struttura base del sito all'interno della cartella che hai appena creato. Alla fine del processo, vedrai una struttura di directory simile a questa:

mio_blog
├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-node.js
├── gatsby-ssr.js
├── LICENSE
├── node_modules
├── package.json
├── package-lock.json
├── README.md
└── src

In questa struttura:

  • gatsby-browser.js: Questo file ti permette di configurare comportamenti personalizzati specifici per il browser, come ad esempio modifiche al comportamento della navigazione o gestione di eventi durante il ciclo di vita del rendering del sito.
  • gatsby-config.js: Qui vanno le configurazioni principali del progetto Gatsby. Contiene informazioni come il titolo del sito, i plugin da usare, le fonti di dati (ad esempio, file Markdown, CMS, etc.) e altre impostazioni globali del progetto.
  • gatsby-node.js: In questo file puoi configurare e gestire la creazione dinamica delle pagine del sito. Ad esempio, puoi usarlo per creare pagine a partire da file Markdown o aggiungere logica personalizzata alla costruzione del sito.
  • gatsby-ssr.js: Come gatsby-browser.js, ma specifico per il server-side rendering. Permette di manipolare il rendering delle pagine lato server prima che vengano inviate al client.
  • LICENSE: Il file che contiene la licenza con cui il codice del progetto è rilasciato. Se hai scelto una licenza durante la creazione del progetto (ad esempio, MIT), sarà indicata qui.
  • node_modules/: Contiene tutte le dipendenze del progetto. Ogni pacchetto che Gatsby o i suoi plugin richiedono verrà installato qui.
  • package.json: Questo file contiene le informazioni principali sul progetto, come il nome, la versione e le dipendenze. È il cuore della gestione delle dipendenze e degli script del progetto.
  • package-lock.json: Generato automaticamente da npm, questo file tiene traccia delle versioni esatte delle dipendenze installate, per garantire che tutti gli sviluppatori del progetto utilizzino le stesse versioni di librerie.
  • README.md: Il file di documentazione iniziale del progetto. Qui troverai delle informazioni di base su come avviare e configurare il progetto, ma puoi anche aggiungere ulteriori dettagli sul tuo blog.
  • src/: Questa è la cartella principale dove vivranno tutti i tuoi file sorgente, inclusi:
    • Pagine (pages/)
    • Componenti (components/)
    • Template (templates/)
    • Stili (styles/)

Creazione del Blog con Gatsby

Creare un blog con Gatsby è un ottimo modo per esplorare le potenzialità di questo potente Static Site Generator. Dopo aver configurato il progetto, segui questi passaggi per impostare un blog funzionante, completo di post dinamici generati a partire da file Markdown o MDX.

Installa i Plugin Necessari

Per gestire i contenuti del blog, è necessario installare alcuni plugin essenziali. Questi strumenti permettono a Gatsby di leggere e trasformare i file Markdown o MDX in contenuti pronti per essere visualizzati sul tuo sito.

  • gatsby-source-filesystem: consente di leggere i file di contenuto dalla directory specificata (ad esempio, file Markdown).
  • gatsby-transformer-remark: converte i file Markdown in nodi GraphQL che Gatsby utilizza per generare le pagine.
  • gatsby-plugin-mdx: indispensabile se preferisci utilizzare il formato MDX, che combina Markdown con codice JSX.

Per installarli, utilizza questi comandi:

  • Per Markdown:

    npm install gatsby-source-filesystem gatsby-transformer-remark
    
  • Per MDX:

    npm install gatsby-plugin-mdx @mdx-js/mdx @mdx-js/react
    

Configura i Plugin nel File gatsby-config.js

Una volta installati i plugin, devi registrarli nel file di configurazione del progetto gatsby-config.js. Ecco un esempio di configurazione base:

module.exports = {
  siteMetadata: {
    title: "Il mio Blog",
    description: "Un blog creato con Gatsby",
    author: "@tuo_nome",
  },
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `blog`,
        path: `${__dirname}/content/blog/`, // Percorso dei tuoi file di contenuto
      },
    },
    `gatsby-transformer-remark`, // Per usare Markdown
    // Per MDX, aggiungi:
    // `gatsby-plugin-mdx`,
  ],
};

In questa configurazione:

  • La chiave siteMetadata permette di definire informazioni basilari sul sito.
  • Il plugin gatsby-source-filesystem specifica la cartella da cui leggere i file di contenuto (in questo caso, content/blog/).

Organizza i Tuoi Contenuti

Crea una directory denominata content/blog all'interno del tuo progetto. Qui salverai i file Markdown o MDX che rappresentano i tuoi post. Ogni file sarà un singolo articolo.

Esempio di file Markdown:

---
title: "Il mio primo post su Gatsby"
date: "2024-11-21"
---

Benvenuti nel mio blog! Questo è il mio primo post creato con Gatsby.

Crea un Template per i Post

Per generare automaticamente una pagina per ogni post, crea un template dedicato. Questo servirà come base per visualizzare i contenuti dei tuoi articoli.

Esempio di file template: src/templates/blog-post.js

import React from "react";
import { graphql } from "gatsby";
import Layout from "../components/layout";

const BlogPost = ({ data }) => {
  const post = data.markdownRemark;

  return (
    <Layout>
      <h1>{post.frontmatter.title}</h1>
      <p>{post.frontmatter.date}</p>
      <div dangerouslySetInnerHTML={{ __html: post.html }} />
    </Layout>
  );
};

export const query = graphql`
  query($id: String!) {
    markdownRemark(id: { eq: $id }) {
      html
      frontmatter {
        title
        date(formatString: "MMMM DD, YYYY")
      }
    }
  }
`;

export default BlogPost;

Spiegazione del codice:

  • markdownRemark: fornisce i dati del post, inclusi titolo e contenuto.
  • Layout: è un componente che racchiude l’intestazione, il contenuto e il piè di pagina.

Genera Pagine Dinamiche con gatsby-node.js

Per collegare i file Markdown ai template, modifica il file gatsby-node.js. Se non hai questo file nella cartella root di progetto, crealo. Successivamente, aggiungi il seguente codice per creare una pagina per ogni post:

const path = require('path');

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions;

  const result = await graphql(`
    query {
      allMarkdownRemark {
        edges {
          node {
            id
            frontmatter {
              title
            }
          }
        }
      }
    }
  `);

  result.data.allMarkdownRemark.edges.forEach(({ node }) => {
    createPage({
      path: `/blog/${node.frontmatter.title.toLowerCase().replace(/\s+/g, '-')}/`,
      component: path.resolve(`./src/templates/blog-post.js`),
      context: {
        id: node.id,
      },
    });
  });
};

Questo codice:

  • Recupera tutti i post da GraphQL.
  • Crea una pagina per ogni post, con un URL basato sul titolo (ad esempio: /blog/il-mio-primo-post/).

Aggiungere un layout per il blog

Per avere una struttura più pulita, puoi creare un componente Layout che gestisca l'intestazione, il piè di pagina e altri elementi comuni del sito.

Ecco un esempio base di un layout, da creare all'interno del file src/components/layout.js:

import React from "react"

const Layout = ({ children }) => (
  <div>
    <header>
      <h1>Il mio Blog Gatsby</h1>
    </header>
    <main>{children}</main>
    <footer>
      <p>© {new Date().getFullYear()}, Tutti i diritti riservati</p>
    </footer>
  </div>
)

export default Layout

Visualizza un Elenco dei Post nella Home

Per visualizzare un elenco dei post nella home del blog, modifica il file src/pages/index.js:

import React from "react";
import { graphql, Link } from "gatsby";
import Layout from "../components/layout";

const IndexPage = ({ data }) => (
  <Layout>
    <h1>Benvenuti nel mio blog!</h1>
    <ul>
      {data.allMarkdownRemark.edges.map(({ node }) => (
        <li key={node.id}>
          <Link to={`/blog/${node.frontmatter.title.toLowerCase().replace(/\s+/g, '-')}/`}>
            {node.frontmatter.title}
          </Link>
        </li>
      ))}
    </ul>
  </Layout>
);

export const query = graphql`
  query {
    allMarkdownRemark {
      edges {
        node {
          id
          frontmatter {
            title
          }
        }
      }
    }
  }
`;

export default IndexPage;

Esecuzione del Blog

Ora il tuo blog è funzionante! Per eseguire e vedere i tuoi post esegui:

npm run develop

ed accedi nel browser alla pagina: http://localhost:8000..

Conclusioni

Creare un blog con Gatsby non è solo un’esperienza formativa, ma anche un’occasione per realizzare un sito moderno, veloce e altamente ottimizzato. Con questa guida hai imparato i fondamenti per configurare il tuo progetto, gestire i contenuti tramite Markdown o MDX e generare pagine dinamiche utilizzando i template e le funzionalità di Gatsby.

Ora hai una base solida per continuare a personalizzare il tuo blog, integrando nuove funzionalità e migliorandone l’estetica. Che tu voglia espandere il progetto aggiungendo un CMS headless o ottimizzare ulteriormente la SEO, Gatsby offre gli strumenti giusti per portare il tuo blog al livello successivo.

Non ti resta che mettere in pratica quanto appreso e condividere i tuoi contenuti con il mondo. Buona creazione del tuo blog con Gatsby!