Astro è un moderno framework frontend che consente agli sviluppatori di costruire siti web statici veloci ed efficienti. Con Astro, gli sviluppatori possono sfruttare la potenza dei moderni framework JavaScript come React, Vue.js e Svelte per creare interfacce utente dinamiche e produrre file HTML, CSS e JavaScript statici durante il processo di creazione.

Se abbinato a WordPress come sistema di gestione dei contenuti (CMS) headless, Astro consente una perfetta integrazione tra le API del backend e il codice del frontend, permettendo uno sviluppo efficiente di siti web statici con contenuti dinamici. Questo approccio offre diversi vantaggi.

I siti statici generati con Astro e un backend WordPress vantano prestazioni superiori. Possono essere serviti direttamente da una rete di distribuzione dei contenuti (CDN), eliminando la necessità di un’elaborazione lato server e ottenendo tempi di caricamento più rapidi e un’esperienza utente più fluida.

Questo tutorial ci guida attraverso il processo di creazione di un sito statico utilizzando Astro ospitato sul servizio di Hosting di Siti Statici di Kinsta, utilizzando WordPress per il backend.

Il ruolo di WordPress come CMS headless

Un CMS headless, come WordPress, separa i livelli di gestione dei contenuti da quelli di distribuzione. Consente al backend di gestire i contenuti mentre un altro sistema, come Astro, si occupa del frontend.

WordPress funge da repository dei contenuti e fornisce i dati al frontend, che li mostra agli utenti tramite un’API. Questa architettura aumenta la flessibilità consentendo di riutilizzare i contenuti per diversi output, offrendo agli utenti di WordPress un’esperienza familiare di gestione dei contenuti.

Disaccoppiare il frontend dal backend offre anche una maggiore flessibilità nella progettazione del frontend e nella migrazione dei contenuti. Inoltre, l’accessibilità tramite API rende i contenuti “a prova di futuro”.

Configurare l’ambiente di sviluppo

Per configurare il nostro ambiente, dovremo seguire tre fasi:

  1. Installare Astro.
  2. Creare un sito WordPress.
  3. Creare un ambiente di staging per WordPress.

Prerequisiti

Per seguire questo tutorial, è necessario avere i seguenti requisiti:

Installare Astro

  1. Per il nostro progetto, creiamo una nuova directory e navighiamo al suo interno.
  2. Creiamo un nuovo progetto eseguendo il comando qui sotto nel terminale: 
    npm create astro@latest

    Questo passo produce delle richieste di configurazione. Impostiamole in base a ciò che desideri.

    Finestra del terminale che fornisce le istruzioni per configurare il nuovo progetto Astro. Le richieste sono: - Dove creare il nuovo progetto? - Come si desidera iniziare il nuovo progetto? - Si intende scrivere TypeScript? - Quanto deve essere rigoroso TypeScript? - Installare le dipendenze? - Inizializzare un nuovo repository git?
    Istruzioni per configurare un nuovo progetto Astro.

  3. Una volta che il progetto è stato creato con successo, eseguiamo npm run dev per lanciare il server di sviluppo locale su http://localhost:4321/.

    La pagina di benvenuto del sito Astro, che fornisce collegamenti alla documentazione, alle integrazioni, ai temi e alla community.
    Astro è stato installato con successo.

Configurare un sito WordPress su Kinsta

Kinsta è un provider di hosting WordPress di alto livello rinomato per la sua interfaccia intuitiva e l’infrastruttura ad alte prestazioni. Segui questi passaggi per creare un sito WordPress su Kinsta.

  1. Nella dashboard MyKinsta, clicchiamo su Siti WordPress e poi su Crea un sito.
  2. Selezioniamo l’opzione Installa WordPress e clicchiamo su Continua.
  3. Indichiamo il nome del sito, selezioniamo la posizione del data center e clicchiamo su Continua.
  4. Forniamo tutte le altre informazioni e clicchiamo su Continua.
  5. Una volta creato il sito, dovremmo vedere il messaggio “Il tuo sito è stato creato!”

Creare un ambiente di staging di WordPress

Ogni installazione di WordPress su Kinsta ha la possibilità di creare un ambiente di staging gratuito separato dal sito di produzione vero e proprio. Questo è l’ideale per testare nuove versioni di WordPress, plugin, codice e lavori di sviluppo in generale.

I passaggi per creare un ambiente di staging WordPress su Kinsta sono i seguenti.

  1. Nella barra dei menu, clicchiamo su Live e poi su Crea un nuovo ambiente.

    Pagina di informazioni sul sito che fornisce l'ubicazione del data center e il nome del sito.
    Ambiente di staging WordPress.

  2. Selezioniamo Ambiente standard e clicchiamo su Continua.
  3. Clicchiamo su Clona un ambiente esistente, indichiamo il nome dell’ambiente, selezioniamo Live per l’ambiente da clonare e clicchiamo su Continua.
  4. Una volta distribuito, troveremo l’ambiente di staging di WordPress nel menu Live.

    La pagina Informazioni sul sito mostra il menu Live con le voci Live, Staging e Crea nuovo ambiente.
    Creazione di un ambiente di staging avvenuta con successo.

Integrare WordPress con Astro

Esistono due metodi principali per integrare WordPress con Astro: un’API REST e GraphQL. Questa guida utilizza l’approccio GraphQL.

Per integrare WordPress con Astro, dovremo:

  • Installare WPGraphQL.
  • Collegare Astro a WordPress.

Installare WPGraphQL

Per prima cosa, installiamo il plugin WPGraphQL sul sito WordPress prima di utilizzare GraphQL per connettere Astro ad esso.

  1. Nella dashboard di MyKinsta, selezioniamo il sito WordPress.
  2. Nella barra dei menu, clicchiamo su Staging e poi su Apri WP Admin nell’angolo in alto a destra.

    La pagina delle informazioni sul sito mostra il menu Staging e i pulsanti Push environment, Apri WP Admin e Visita sito.
    Pagina Informazioni sul sito.

  3. Forniamo le credenziali che abbiamo utilizzato per la creazione del sito WordPress.
  4. Clicchiamo sul menu Plugin nella barra di navigazione sinistra.
  5. Clicchiamo su Aggiungi nuovo plugin per aggiungere il plugin WPGraphQL.
  6. Cerchiamo “WPGraphQL”, clicchiamo su Installa nuovo per installare il plugin WPGraphQL e poi su Attiva.

    La pagina Aggiungi plugin mostra il plugin WPGraphQL e altri con un pulsante Installa nuovo accanto ad essi.
    Installazione del plugin WPGraphQL.

  7. Per verificare che il plugin WPGraphQL installato funzioni come previsto, apriamo il menu GraphQL sulla barra di navigazione e clicchiamo su GraphiQL IDE.
  8. Usiamo il seguente codice nell’IDE GraphiQL e clicchiamo su Run in alto a sinistra per eseguire la query GraphQL: 
    {
  posts {
    nodes {
      slug
      excerpt
      title
    }
  }
}

    Questa query GraphQL recupera in modo efficiente slugs, excerpts e titles dei post del sito WordPress.

    Pagina GraphQL che mostra il codice della query GraphQL e un pulsante di esecuzione in alto
    Esecuzione della query GraphQL.

    Sul lato sinistro dell’IDE GraphiQL, possiamo vedere l’elenco dei post restituiti dall’esecuzione della query GraphQL. L’endpoint GraphQL di WordPress è accessibile all’indirizzo https://your_wordpress_staging_url/graphql.

Collegare Astro a WordPress

Per collegare Astro a WordPress, seguiamo queste istruzioni:

  1. Creiamo una cartella denominata graphql all’interno della cartella src del progetto Astro.
  2. Creiamo un file wordPressQuery.ts all’interno della cartella graphql.
  3. Utilizziamo il seguente codice all’interno del file wordPressQuery.ts. Assicuriamoci di sostituire https://your_wordpress_staging_url/graphql con l’URL di staging di WordPress. 
    interface gqlParams {
    query: String;
    variables?: object;
}

export async function wpquery({ query, variables = {} }: gqlParams) {
    const res = await fetch('https://your_wordpress_staging_url/graphql', {
        method: "post",
        headers: {
            "Content-Type": "application/json",

        },

        body: JSON.stringify({
            query,
            variables,
        }),
    });

    if (!res.ok) {
        console.error(res);
        return {};
    }

    const { data } = await res.json();
    return data;
}

    Questo codice definisce un’interfaccia gqlParams e una funzione asincrona wpquery che facilita le query GraphQL al sito WordPress.

Sviluppare il sito con Astro e WordPress

  1. Per creare una nuova pagina statica in Astro, creiamo un file chiamato blog.astro nella directory src/pages.
  2. Incolliamo il seguente codice nel file appena creato: 
    ---
import Layout from "../layouts/Layout.astro";
import { wpquery } from "../graphql/wordPressQuery";

const data = await wpquery({
  query: `
   {
    posts{
      nodes{
        slug
        excerpt
        title
      }
     }
   }  
  `,
});
---

<Layout title="Astro-WordPress Blog Posts">
  <main>
    <h1><span class="text-gradient">Blog Posts</span></h1>

    {
      data.posts.nodes.map((post: any) => (
        <>
          <h2 set:html={post.title} />
          <p set:html={post.excerpt} />
        </>
      ))
    }
  </main>
</Layout>
<style>
  main {
    margin: auto;
    padding: 1rem;
    width: 800px;
    max-width: calc(100% - 2rem);
    color: white;
    font-size: 20px;
    line-height: 1.6;
  }

  h1 {
    font-size: 4rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    margin-bottom: 1em;
  }
</style>

    Questo codice dimostra come utilizzare la funzione wpquery per recuperare i dati dal sito WordPress utilizzando GraphQL e renderli sul sito Astro.

  3. Usiamo npm run dev per lanciare il server di sviluppo locale e vedere gli ultimi post del blog WordPress sul nostro sito Astro all’indirizzo http://localhost:4321/blog.

    Pagina del progetto Astro che visualizza i post di WordPress
    Progetto Astro che visualizza i post di WordPress.

Per gestire il routing dinamico per i singoli post del blog, dobbiamo utilizzare una combinazione dei percorsi dinamici di Astro e delle variabili di query di WordPress GraphQL. Passando l’ID del post o lo slug come variabile di query, possiamo generare dinamicamente il contenuto della pagina per ogni post del blog. In questo modo l’esperienza dell’utente sul sito web sarà più personalizzata.

Distribuire un sito statico su Kinsta

Ora inviamo i codici al nostro provider Git preferito (Bitbucket, GitHub o GitLab). Quindi, seguiamo questi passaggi per distribuire il nostro sito statico su Kinsta:

  1. Nella dashboard di MyKinsta, clicchiamo su Siti statici e poi su Aggiungi sito.
  2. Autorizziamo Kinsta con il provider Git.
  3. Selezioniamo un repository GitHub e un ramo predefinito. Forniamo un nome visualizzato per il sito statico e selezioniamo la casella Distribuzione automatica su commit. In questo modo si attiva la distribuzione automatica di tutte le nuove modifiche apportate al repository. Clicchiamo su Continua.
  4. Nella sezione Impostazioni di build, Kinsta compila automaticamente tutti i campi. Lasciamo tutto così com’è e clicchiamo su Crea sito.
  5. Accediamo al sito Astro andando all’URL che appare come dominio nella pagina Panoramica del sito distribuito. Possiamo accedere ai post del blog tramite https://your_kinsta_site_url/blog.

Riepilogo

Le cose che si possono fare con Astro e WordPress sono tantissime. L’API di WordPress può essere utilizzata per accedere a diversi dati del sito e creare casi d’uso unici con Astro.

Con l’Hosting WordPress gestito di Kinsta, si ottiene l’accesso a un’infrastruttura solida, a un CDN a livello globale, a un edge caching, a più data center e a funzioni di livello enterprise. Questo garantisce un ambiente veloce e sicuro per il vostro sito WordPress.

Inoltre, se utilizzate framework frontend come Astro con WordPress headless, potrete ospitare gratuitamente i suoi file statici sull’Hosting di Siti Statici di Kinsta. In questo modo pagherete solo l’hosting di WordPress, massimizzando l’efficienza e il rapporto qualità-prezzo.

Qual è la vostra opinione su WordPress headless e Astro? Avete esplorato il loro potenziale per creare soluzioni uniche? Condividete le vostre esperienze nella sezione commenti qui sotto.

Jeremy Holcombe Kinsta

Content & Marketing Editor presso Kinsta, web developer di WordPress e content writer. Al di fuori di tutto ciò che riguarda WordPress, mi piacciono la spiaggia, il golf e il cinema. Ho anche i problemi di tutte le persone più alte della media ;).