{"id":77100,"date":"2024-03-20T09:41:15","date_gmt":"2024-03-20T08:41:15","guid":{"rendered":"https:\/\/kinsta.com\/it\/?p=77100&#038;preview=true&#038;preview_id=77100"},"modified":"2024-03-22T10:25:17","modified_gmt":"2024-03-22T09:25:17","slug":"wordpress-astro","status":"publish","type":"post","link":"https:\/\/kinsta.com\/it\/blog\/wordpress-astro\/","title":{"rendered":"Creare un sito statico con WordPress e Astro"},"content":{"rendered":"<p>Astro \u00e8 un moderno framework frontend che consente agli sviluppatori di costruire <a href=\"https:\/\/kinsta.com\/it\/blog\/sito-web-statico\/\">siti web statici<\/a> veloci ed efficienti. Con <a href=\"https:\/\/kinsta.com\/it\/blog\/astro-js\/\">Astro<\/a>, gli sviluppatori possono sfruttare la potenza dei moderni framework JavaScript come <a href=\"https:\/\/kinsta.com\/it\/blog\/wordpress-react\/\">React<\/a>, <a href=\"https:\/\/kinsta.com\/it\/blog\/wordpress-headless\/\">Vue.js<\/a> e <a href=\"https:\/\/kinsta.com\/it\/blog\/sveltekit-statico\/\">Svelte<\/a> per creare interfacce utente dinamiche e produrre file HTML, CSS e JavaScript statici durante il processo di creazione.<\/p>\n<p>Se abbinato a <a href=\"https:\/\/kinsta.com\/wordpress\/\">WordPress<\/a> come <a href=\"https:\/\/kinsta.com\/it\/blog\/content-management-system\/\">sistema di gestione dei contenuti<\/a> (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.<\/p>\n<p>I siti statici generati con Astro e un backend WordPress vantano prestazioni superiori. Possono essere serviti direttamente da una <a href=\"https:\/\/kinsta.com\/it\/blog\/cosa-e-un-cdn\/\">rete di distribuzione dei contenuti<\/a> (CDN), eliminando la necessit\u00e0 di un&#8217;elaborazione lato server e ottenendo tempi di caricamento pi\u00f9 rapidi e un&#8217;esperienza utente pi\u00f9 fluida.<\/p>\n<p>Questo tutorial ci guida attraverso il processo di creazione di un sito statico utilizzando Astro ospitato sul servizio di <a href=\"https:\/\/docs.sevalla.com\/static-sites\/overview\">Hosting di Siti Statici di Kinsta<\/a>, utilizzando WordPress per il backend.<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>Il ruolo di WordPress come CMS headless<\/h2>\n<p>Un <a href=\"https:\/\/kinsta.com\/it\/argomenti\/cms-headless\/\">CMS headless<\/a>, 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.<\/p>\n<p>WordPress funge da repository dei contenuti e fornisce i dati al frontend, che li mostra agli utenti tramite un&#8217;API. Questa architettura aumenta la flessibilit\u00e0 consentendo di riutilizzare i contenuti per diversi output, offrendo agli utenti di WordPress un&#8217;esperienza familiare di gestione dei contenuti.<\/p>\n<p>Disaccoppiare il frontend dal backend offre anche una maggiore flessibilit\u00e0 nella progettazione del frontend e nella migrazione dei contenuti. Inoltre, l&#8217;accessibilit\u00e0 tramite API rende i contenuti &#8220;a prova di futuro&#8221;.<\/p>\n<h2>Configurare l&#8217;ambiente di sviluppo<\/h2>\n<p>Per configurare il nostro ambiente, dovremo seguire tre fasi:<\/p>\n<ol start=\"1\">\n<li>Installare Astro.<\/li>\n<li>Creare un sito WordPress.<\/li>\n<li>Creare un ambiente di staging per WordPress.<\/li>\n<\/ol>\n<h3>Prerequisiti<\/h3>\n<p>Per seguire questo tutorial, \u00e8 necessario avere i seguenti requisiti:<\/p>\n<ul>\n<li>Conoscenza fondamentale di <a href=\"https:\/\/kinsta.com\/it\/blog\/html\/\">HTML<\/a>, <a href=\"https:\/\/kinsta.com\/it\/blog\/best-practice-css\/\">CSS<\/a> e <a href=\"https:\/\/kinsta.com\/javascript\/\">JavaScript<\/a><\/li>\n<li>Node.js e npm (<a href=\"https:\/\/kinsta.com\/it\/blog\/cos-e-npm\/\">Node Package Manager<\/a>) o yarn installati sul computer<\/li>\n<li>Un account Kinsta. Possiamo <a href=\"https:\/\/kinsta.com\/it\/registrazione\/\">creare un account<\/a> per ospitare un sito statico gratuitamente e avere accesso alla <a href=\"https:\/\/my.kinsta.com\/login?lang=it\" target=\"_blank\" rel=\"noopener noreferrer\">dashboard di MyKinsta<\/a>.<\/li>\n<\/ul>\n<h3>Installare Astro<\/h3>\n<ol start=\"1\">\n<li>Per il nostro progetto, creiamo una nuova directory e navighiamo al suo interno.<\/li>\n<li>Creiamo un nuovo progetto eseguendo il comando qui sotto nel terminale:\n<pre><code class=\"language-js\">npm create astro@latest<\/code><\/pre>\n<p>Questo passo produce delle richieste di configurazione. Impostiamole in base a ci\u00f2 che desideri.<\/p>\n<p><figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/03\/terminal-window-configuring-astro-project.png\" alt=\"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?\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Istruzioni per configurare un nuovo progetto Astro.<\/figcaption><\/figure><\/li>\n<li>Una volta che il progetto \u00e8 stato creato con successo, eseguiamo <code>npm run dev<\/code> per lanciare il server di sviluppo locale su http:\/\/localhost:4321\/.\n<p><figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/03\/welcome-page.png\" alt=\"La pagina di benvenuto del sito Astro, che fornisce collegamenti alla documentazione, alle integrazioni, ai temi e alla community.\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Astro \u00e8 stato installato con successo.<\/figcaption><\/figure><\/li>\n<\/ol>\n<h3>Configurare un sito WordPress su Kinsta<\/h3>\n<p>Kinsta \u00e8 un <a href=\"https:\/\/kinsta.com\/it\/docs\/hosting-wordpress\/\">provider di hosting WordPress di alto livello<\/a> rinomato per la sua interfaccia intuitiva e l&#8217;infrastruttura ad alte prestazioni. Segui questi passaggi per creare un sito WordPress su Kinsta.<\/p>\n<ol start=\"1\">\n<li>Nella dashboard <a href=\"https:\/\/my.kinsta.com\/?lang=it\" target=\"_blank\" rel=\"noopener noreferrer\">MyKinsta<\/a>, clicchiamo su <strong>Siti WordPress<\/strong> e poi su <strong>Crea un sito<\/strong>.<\/li>\n<li>Selezioniamo l&#8217;opzione <strong>Installa WordPress<\/strong> e clicchiamo su <strong>Continua<\/strong>.<\/li>\n<li>Indichiamo il <strong>nome del sito<\/strong>, selezioniamo la <strong>posizione<\/strong> del <strong>data center<\/strong> e clicchiamo su <strong>Continua<\/strong>.<\/li>\n<li>Forniamo tutte le altre informazioni e clicchiamo su <strong>Continua<\/strong>.<\/li>\n<li>Una volta creato il sito, dovremmo vedere il messaggio &#8220;Il tuo sito \u00e8 stato creato!&#8221;<\/li>\n<\/ol>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>\u00c8 anche possibile creare un sito WordPress utilizzando <a href=\"https:\/\/kinsta.com\/it\/devkinsta\/\">DevKinsta<\/a> in locale o con l&#8217;<a href=\"https:\/\/api-docs.kinsta.com\/tag\/WordPress-Sites\" target=\"_blank\" rel=\"noopener noreferrer\">API di Kinsta<\/a> in modo programmatico.<\/p>\n<\/aside>\n\n<h3>Creare un ambiente di staging di WordPress<\/h3>\n<p>Ogni installazione di WordPress su Kinsta ha la possibilit\u00e0 di creare un ambiente di staging gratuito separato dal sito di produzione vero e proprio. Questo \u00e8 l&#8217;ideale per testare nuove versioni di WordPress, plugin, codice e lavori di sviluppo in generale.<\/p>\n<p>I passaggi per creare un <a href=\"https:\/\/kinsta.com\/it\/docs\/hosting-wordpress\/ambienti-di-staging\/\">ambiente di staging WordPress su Kinsta<\/a> sono i seguenti.<\/p>\n<ol start=\"1\">\n<li>Nella barra dei menu, clicchiamo su <strong>Live<\/strong> e poi su <strong>Crea un nuovo ambiente<\/strong>.\n<p><figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/03\/add-new-environment.png\" alt=\"Pagina di informazioni sul sito che fornisce l'ubicazione del data center e il nome del sito.\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Ambiente di staging WordPress.<\/figcaption><\/figure><\/li>\n<li>Selezioniamo <strong>Ambiente standard<\/strong> e clicchiamo su <strong>Continua<\/strong>.<\/li>\n<li>Clicchiamo su <strong>Clona un ambiente esistente<\/strong>, indichiamo il <strong>nome dell&#8217;ambiente<\/strong>, selezioniamo <strong>Live<\/strong> per l&#8217;<strong>ambiente da clonare<\/strong> e clicchiamo su <strong>Continua<\/strong>.<\/li>\n<li>Una volta distribuito, troveremo l&#8217;ambiente di staging di WordPress nel menu <strong>Live<\/strong>.\n<p><figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/03\/all-wp-environments.png\" alt=\"La pagina Informazioni sul sito mostra il menu Live con le voci Live, Staging e Crea nuovo ambiente.\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Creazione di un ambiente di staging avvenuta con successo.<\/figcaption><\/figure><\/li>\n<\/ol>\n<h2>Integrare WordPress con Astro<\/h2>\n<p>Esistono due metodi principali per integrare WordPress con Astro: un&#8217;<a href=\"https:\/\/kinsta.com\/it\/blog\/rest-api-wordpress\/\">API REST<\/a> e <a href=\"https:\/\/kinsta.com\/it\/blog\/wpgraphql-e-wp-api-rest\/\">GraphQL<\/a>. Questa guida utilizza l&#8217;approccio GraphQL.<\/p>\n<p>Per integrare WordPress con Astro, dovremo:<\/p>\n<ul>\n<li>Installare WPGraphQL.<\/li>\n<li>Collegare Astro a WordPress.<\/li>\n<\/ul>\n<h3>Installare WPGraphQL<\/h3>\n<p>Per prima cosa, installiamo il plugin WPGraphQL sul sito WordPress prima di utilizzare GraphQL per connettere Astro ad esso.<\/p>\n<ol start=\"1\">\n<li>Nella <a href=\"https:\/\/my.kinsta.com\/login?lang=it\" target=\"_blank\" rel=\"noopener noreferrer\">dashboard di MyKinsta<\/a>, selezioniamo il sito WordPress.<\/li>\n<li>Nella barra dei menu, clicchiamo su <strong>Staging<\/strong> e poi su <strong>Apri WP Admin<\/strong> nell&#8217;angolo in alto a destra.\n<p><figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/03\/site-info-page.png\" alt=\"La pagina delle informazioni sul sito mostra il menu Staging e i pulsanti Push environment, Apri WP Admin e Visita sito.\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Pagina Informazioni sul sito.<\/figcaption><\/figure><\/li>\n<li>Forniamo le credenziali che abbiamo utilizzato per la creazione del sito WordPress.<\/li>\n<li>Clicchiamo sul menu <strong>Plugin<\/strong> nella barra di navigazione sinistra.<\/li>\n<li>Clicchiamo su <strong>Aggiungi nuovo plugin<\/strong> per aggiungere il plugin WPGraphQL.<\/li>\n<li>Cerchiamo &#8220;WPGraphQL&#8221;, clicchiamo su <strong>Installa nuovo<\/strong> per installare il plugin <strong>WPGraphQL<\/strong> e poi su <strong>Attiva<\/strong>.\n<p><figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/03\/add-wpgraphql-plugin.png\" alt=\"La pagina Aggiungi plugin mostra il plugin WPGraphQL e altri con un pulsante Installa nuovo accanto ad essi.\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Installazione del plugin WPGraphQL.<\/figcaption><\/figure><\/li>\n<li>Per verificare che il plugin WPGraphQL installato funzioni come previsto, apriamo il menu <strong>GraphQL<\/strong> sulla barra di navigazione e clicchiamo su <strong>GraphiQL IDE<\/strong>.<\/li>\n<li>Usiamo il seguente codice nell&#8217;IDE GraphiQL e clicchiamo su <strong>Run<\/strong> in alto a sinistra per eseguire la query GraphQL:\n<pre><code class=\"language-js\">{\n  posts {\n    nodes {\n      slug\n      excerpt\n      title\n    }\n  }\n}<\/code><\/pre>\n<p>Questa query GraphQL recupera in modo efficiente <code>slugs<\/code>, <code>excerpts<\/code> e <code>titles<\/code> dei post del sito WordPress.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/03\/test-graphql-in-wp.png\" alt=\"Pagina GraphQL che mostra il codice della query GraphQL e un pulsante di esecuzione in alto\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Esecuzione della query GraphQL.<\/figcaption><\/figure>\n<p>Sul lato sinistro dell&#8217;IDE GraphiQL, possiamo vedere l&#8217;elenco dei post restituiti dall&#8217;esecuzione della query GraphQL. L&#8217;endpoint GraphQL di WordPress \u00e8 accessibile all&#8217;indirizzo <code>https:\/\/your_wordpress_staging_url\/graphql<\/code>.<\/li>\n<\/ol>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Assicuratevi di trasferire il sito WordPress dall&#8217;ambiente di staging a quello Live quando avrete completato tutti i test e sarete soddisfatti delle prestazioni e delle funzionalit\u00e0 del sito.<\/p>\n<\/aside>\n\n<h3>Collegare Astro a WordPress<\/h3>\n<p>Per collegare Astro a WordPress, seguiamo queste istruzioni:<\/p>\n<ol start=\"1\">\n<li>Creiamo una cartella denominata <strong>graphql<\/strong> all&#8217;interno della cartella <strong>src<\/strong> del progetto Astro.<\/li>\n<li>Creiamo un file <strong>wordPressQuery.ts<\/strong> all&#8217;interno della cartella <strong>graphql<\/strong>.<\/li>\n<li>Utilizziamo il seguente codice all&#8217;interno del file <strong>wordPressQuery.ts<\/strong>. Assicuriamoci di sostituire <code>https:\/\/your_wordpress_staging_url\/graphql<\/code> con l&#8217;URL di staging di WordPress.\n<pre><code class=\"language-js\">interface gqlParams {\n    query: String;\n    variables?: object;\n}\n\nexport async function wpquery({ query, variables = {} }: gqlParams) {\n    const res = await fetch('https:\/\/your_wordpress_staging_url\/graphql', {\n        method: \"post\",\n        headers: {\n            \"Content-Type\": \"application\/json\",\n\n        },\n\n        body: JSON.stringify({\n            query,\n            variables,\n        }),\n    });\n\n    if (!res.ok) {\n        console.error(res);\n        return {};\n    }\n\n    const { data } = await res.json();\n    return data;\n}<\/code><\/pre>\n<p>Questo codice definisce un&#8217;interfaccia <code>gqlParams<\/code> e una funzione asincrona <code>wpquery<\/code> che facilita le query GraphQL al sito WordPress.<\/li>\n<\/ol>\n<h2>Sviluppare il sito con Astro e WordPress<\/h2>\n<ol start=\"1\">\n<li>Per creare una nuova pagina statica in Astro, creiamo un file chiamato <strong>blog.astro<\/strong> nella directory <strong>src\/pages<\/strong>.<\/li>\n<li>Incolliamo il seguente codice nel file appena creato:\n<pre><code class=\"language-js\">---\nimport Layout from \"..\/layouts\/Layout.astro\";\nimport { wpquery } from \"..\/graphql\/wordPressQuery\";\n\nconst data = await wpquery({\n  query: `\n   {\n    posts{\n      nodes{\n        slug\n        excerpt\n        title\n      }\n     }\n   }  \n  `,\n});\n---\n\n&lt;Layout title=\"Astro-WordPress Blog Posts\"&gt;\n  &lt;main&gt;\n    &lt;h1&gt;&lt;span class=\"text-gradient\"&gt;Blog Posts&lt;\/span&gt;&lt;\/h1&gt;\n\n    {\n      data.posts.nodes.map((post: any) =&gt; (\n        &lt;&gt;\n          &lt;h2 set:html={post.title} \/&gt;\n          &lt;p set:html={post.excerpt} \/&gt;\n        &lt;\/&gt;\n      ))\n    }\n  &lt;\/main&gt;\n&lt;\/Layout&gt;\n&lt;style&gt;\n  main {\n    margin: auto;\n    padding: 1rem;\n    width: 800px;\n    max-width: calc(100% - 2rem);\n    color: white;\n    font-size: 20px;\n    line-height: 1.6;\n  }\n\n  h1 {\n    font-size: 4rem;\n    font-weight: 700;\n    line-height: 1;\n    text-align: center;\n    margin-bottom: 1em;\n  }\n&lt;\/style&gt;<\/code><\/pre>\n<p>Questo codice dimostra come utilizzare la funzione <code>wpquery<\/code> per recuperare i dati dal sito WordPress utilizzando GraphQL e renderli sul sito Astro.<\/li>\n<li>Usiamo <code>npm run dev<\/code> per lanciare il server di sviluppo locale e vedere gli ultimi post del blog WordPress sul nostro sito Astro all&#8217;indirizzo <code>http:\/\/localhost:4321\/blog<\/code>.\n<p><figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/03\/posts-displayed-astro.png\" alt=\"Pagina del progetto Astro che visualizza i post di WordPress\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Progetto Astro che visualizza i post di WordPress.<\/figcaption><\/figure><\/li>\n<\/ol>\n<p>Per gestire il routing dinamico per i singoli post del blog, dobbiamo utilizzare una combinazione dei <a href=\"https:\/\/docs.astro.build\/en\/guides\/routing\/#dynamic-routes\" target=\"_blank\" rel=\"noopener noreferrer\">percorsi dinamici di Astro<\/a> e delle variabili di query di WordPress GraphQL. Passando l&#8217;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&#8217;esperienza dell&#8217;utente sul sito web sar\u00e0 pi\u00f9 personalizzata.<\/p>\n<h2>Distribuire un sito statico su Kinsta<\/h2>\n<p>Ora inviamo i codici al nostro provider Git preferito (<a href=\"https:\/\/docs.sevalla.com\/applications\/git\/bitbucket#grant-access-to-the-kinsta-bitbucket-application\">Bitbucket<\/a>, <a href=\"https:\/\/docs.sevalla.com\/applications\/git\/github#authenticate-and-authorize\">GitHub<\/a> o <a href=\"https:\/\/docs.sevalla.com\/applications\/git\/gitlab#authorize-the-kinsta-gitlab-application\">GitLab<\/a>). Quindi, seguiamo questi passaggi per distribuire il nostro sito statico su Kinsta:<\/p>\n<ol start=\"1\">\n<li>Nella <a href=\"https:\/\/my.kinsta.com\/?lang=it\" target=\"_blank\" rel=\"noopener noreferrer\">dashboard di MyKinsta<\/a>, clicchiamo su <strong>Siti statici<\/strong> e poi su <strong>Aggiungi sito<\/strong>.<\/li>\n<li>Autorizziamo Kinsta con il provider Git.<\/li>\n<li>Selezioniamo un <strong>repository GitHub<\/strong> e un <strong>ramo predefinito<\/strong>. Forniamo un <strong>nome visualizzato<\/strong> per il sito statico e selezioniamo la casella <strong>Distribuzione automatica su commit<\/strong>. In questo modo si attiva la distribuzione automatica di tutte le nuove modifiche apportate al repository. Clicchiamo su <strong>Continua<\/strong>.<\/li>\n<li>Nella sezione <strong>Impostazioni di build<\/strong>, Kinsta compila automaticamente tutti i campi. Lasciamo tutto cos\u00ec com&#8217;\u00e8 e clicchiamo su <strong>Crea sito<\/strong>.<\/li>\n<li>Accediamo al sito Astro andando all&#8217;URL che appare come dominio nella pagina Panoramica del sito distribuito. Possiamo accedere ai post del blog tramite <code>https:\/\/your_kinsta_site_url\/blog<\/code>.<\/li>\n<\/ol>\n<h2>Riepilogo<\/h2>\n<p>Le cose che si possono fare con Astro e WordPress sono tantissime. L&#8217;API di WordPress pu\u00f2 essere utilizzata per accedere a diversi dati del sito e creare casi d&#8217;uso unici con Astro.<\/p>\n<p>Con l&#8217;<a href=\"https:\/\/kinsta.com\/it\/hosting-wordpress\/\">Hosting WordPress gestito di Kinsta<\/a>, si ottiene l&#8217;accesso a un&#8217;infrastruttura solida, a un CDN a livello globale, a un edge caching, a pi\u00f9 data center e a funzioni di livello enterprise. Questo garantisce un ambiente veloce e sicuro per il vostro sito WordPress.<\/p>\n<p>Inoltre, se utilizzate framework frontend come Astro con WordPress headless, potrete ospitare gratuitamente i suoi file statici sull&#8217;<a href=\"https:\/\/sevalla.com\/static-site-hosting\/\">Hosting di Siti Statici di Kinsta<\/a>. In questo modo pagherete solo l&#8217;hosting di WordPress, massimizzando l&#8217;efficienza e il rapporto qualit\u00e0-prezzo.<\/p>\n<p><em>Qual \u00e8 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.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Astro \u00e8 un moderno framework frontend che consente agli sviluppatori di costruire siti web statici veloci ed efficienti. Con Astro, gli sviluppatori possono sfruttare la potenza &#8230;<\/p>\n","protected":false},"author":199,"featured_media":77101,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[26179,25918],"class_list":["post-77100","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-cms-headless","topic-framework-javascript"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Creare un sito statico con WordPress e Astro - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Combina perfettamente le potenti funzionalit\u00e0 CMS di WordPress con le prestazioni velocissime di Astro con questo tutorial.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/it\/blog\/wordpress-astro\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Creare un sito statico con WordPress e Astro\" \/>\n<meta property=\"og:description\" content=\"Combina perfettamente le potenti funzionalit\u00e0 CMS di WordPress con le prestazioni velocissime di Astro con questo tutorial.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/it\/blog\/wordpress-astro\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstaitalia\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-20T08:41:15+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-22T09:25:17+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/03\/wp-build-a-static-site-with-wordpress-and-astro.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Jeremy Holcombe\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Combina perfettamente le potenti funzionalit\u00e0 CMS di WordPress con le prestazioni velocissime di Astro con questo tutorial.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/03\/wp-build-a-static-site-with-wordpress-and-astro.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@Kinsta_IT\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_IT\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jeremy Holcombe\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/wordpress-astro\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/wordpress-astro\/\"},\"author\":{\"name\":\"Jeremy Holcombe\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21\"},\"headline\":\"Creare un sito statico con WordPress e Astro\",\"datePublished\":\"2024-03-20T08:41:15+00:00\",\"dateModified\":\"2024-03-22T09:25:17+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/wordpress-astro\/\"},\"wordCount\":1511,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/it\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/wordpress-astro\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/03\/wp-build-a-static-site-with-wordpress-and-astro.jpg\",\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/it\/blog\/wordpress-astro\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/wordpress-astro\/\",\"url\":\"https:\/\/kinsta.com\/it\/blog\/wordpress-astro\/\",\"name\":\"Creare un sito statico con WordPress e Astro - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/it\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/wordpress-astro\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/wordpress-astro\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/03\/wp-build-a-static-site-with-wordpress-and-astro.jpg\",\"datePublished\":\"2024-03-20T08:41:15+00:00\",\"dateModified\":\"2024-03-22T09:25:17+00:00\",\"description\":\"Combina perfettamente le potenti funzionalit\u00e0 CMS di WordPress con le prestazioni velocissime di Astro con questo tutorial.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/wordpress-astro\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/it\/blog\/wordpress-astro\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/wordpress-astro\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/03\/wp-build-a-static-site-with-wordpress-and-astro.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/03\/wp-build-a-static-site-with-wordpress-and-astro.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/wordpress-astro\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/it\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CMS Headless\",\"item\":\"https:\/\/kinsta.com\/it\/argomenti\/cms-headless\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Creare un sito statico con WordPress e Astro\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/it\/#website\",\"url\":\"https:\/\/kinsta.com\/it\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Soluzioni di hosting premium, veloci e sicure\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/it\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/it\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/it\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/it\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstaitalia\/\",\"https:\/\/x.com\/Kinsta_IT\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21\",\"name\":\"Jeremy Holcombe\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g\",\"caption\":\"Jeremy Holcombe\"},\"description\":\"Senior Editor at Kinsta, WordPress Web Developer, and Content Writer. Outside of all things WordPress, I enjoy the beach, golf, and movies. I also have tall people problems.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/jeremyholcombe\/\"],\"url\":\"https:\/\/kinsta.com\/it\/blog\/author\/jeremyholcombe\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Creare un sito statico con WordPress e Astro - Kinsta\u00ae","description":"Combina perfettamente le potenti funzionalit\u00e0 CMS di WordPress con le prestazioni velocissime di Astro con questo tutorial.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/it\/blog\/wordpress-astro\/","og_locale":"it_IT","og_type":"article","og_title":"Creare un sito statico con WordPress e Astro","og_description":"Combina perfettamente le potenti funzionalit\u00e0 CMS di WordPress con le prestazioni velocissime di Astro con questo tutorial.","og_url":"https:\/\/kinsta.com\/it\/blog\/wordpress-astro\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstaitalia\/","article_published_time":"2024-03-20T08:41:15+00:00","article_modified_time":"2024-03-22T09:25:17+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/03\/wp-build-a-static-site-with-wordpress-and-astro.jpg","type":"image\/jpeg"}],"author":"Jeremy Holcombe","twitter_card":"summary_large_image","twitter_description":"Combina perfettamente le potenti funzionalit\u00e0 CMS di WordPress con le prestazioni velocissime di Astro con questo tutorial.","twitter_image":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/03\/wp-build-a-static-site-with-wordpress-and-astro.jpg","twitter_creator":"@Kinsta_IT","twitter_site":"@Kinsta_IT","twitter_misc":{"Scritto da":"Jeremy Holcombe","Tempo di lettura stimato":"8 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/it\/blog\/wordpress-astro\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/it\/blog\/wordpress-astro\/"},"author":{"name":"Jeremy Holcombe","@id":"https:\/\/kinsta.com\/it\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21"},"headline":"Creare un sito statico con WordPress e Astro","datePublished":"2024-03-20T08:41:15+00:00","dateModified":"2024-03-22T09:25:17+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/it\/blog\/wordpress-astro\/"},"wordCount":1511,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/it\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/it\/blog\/wordpress-astro\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/03\/wp-build-a-static-site-with-wordpress-and-astro.jpg","inLanguage":"it-IT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/it\/blog\/wordpress-astro\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/it\/blog\/wordpress-astro\/","url":"https:\/\/kinsta.com\/it\/blog\/wordpress-astro\/","name":"Creare un sito statico con WordPress e Astro - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/it\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/it\/blog\/wordpress-astro\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/it\/blog\/wordpress-astro\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/03\/wp-build-a-static-site-with-wordpress-and-astro.jpg","datePublished":"2024-03-20T08:41:15+00:00","dateModified":"2024-03-22T09:25:17+00:00","description":"Combina perfettamente le potenti funzionalit\u00e0 CMS di WordPress con le prestazioni velocissime di Astro con questo tutorial.","breadcrumb":{"@id":"https:\/\/kinsta.com\/it\/blog\/wordpress-astro\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/it\/blog\/wordpress-astro\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/blog\/wordpress-astro\/#primaryimage","url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/03\/wp-build-a-static-site-with-wordpress-and-astro.jpg","contentUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/03\/wp-build-a-static-site-with-wordpress-and-astro.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/it\/blog\/wordpress-astro\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/it\/"},{"@type":"ListItem","position":2,"name":"CMS Headless","item":"https:\/\/kinsta.com\/it\/argomenti\/cms-headless\/"},{"@type":"ListItem","position":3,"name":"Creare un sito statico con WordPress e Astro"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/it\/#website","url":"https:\/\/kinsta.com\/it\/","name":"Kinsta\u00ae","description":"Soluzioni di hosting premium, veloci e sicure","publisher":{"@id":"https:\/\/kinsta.com\/it\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/it\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/it\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/it\/","logo":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstaitalia\/","https:\/\/x.com\/Kinsta_IT","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/it\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21","name":"Jeremy Holcombe","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g","caption":"Jeremy Holcombe"},"description":"Senior Editor at Kinsta, WordPress Web Developer, and Content Writer. Outside of all things WordPress, I enjoy the beach, golf, and movies. I also have tall people problems.","sameAs":["https:\/\/www.linkedin.com\/in\/jeremyholcombe\/"],"url":"https:\/\/kinsta.com\/it\/blog\/author\/jeremyholcombe\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/77100","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/users\/199"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/comments?post=77100"}],"version-history":[{"count":4,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/77100\/revisions"}],"predecessor-version":[{"id":77109,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/77100\/revisions\/77109"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/77100\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/77100\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/77100\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/77100\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/77100\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/77100\/translations\/jp"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/77100\/translations\/es"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/77100\/translations\/nl"},{"href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/77100\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/media\/77101"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/media?parent=77100"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/tags?post=77100"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/topic?post=77100"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}