{"id":74283,"date":"2023-11-04T11:03:46","date_gmt":"2023-11-04T10:03:46","guid":{"rendered":"https:\/\/kinsta.com\/it\/?p=74283&#038;preview=true&#038;preview_id=74283"},"modified":"2023-11-09T15:34:01","modified_gmt":"2023-11-09T14:34:01","slug":"sveltekit-statico","status":"publish","type":"post","link":"https:\/\/kinsta.com\/it\/blog\/sveltekit-statico\/","title":{"rendered":"Come creare un sito statico con SvelteKit"},"content":{"rendered":"<p>I siti statici sono diventati sempre pi\u00f9 popolari grazie alla loro velocit\u00e0, sicurezza e semplicit\u00e0. Quando si tratta di costruire siti statici, sono disponibili diversi strumenti e framework, ma uno che sta guadagnando rapidamente terreno \u00e8 <a href=\"https:\/\/kinsta.com\/it\/blog\/generatore-siti-statici-svelte\/#1-sveltekit\">SvelteKit<\/a>.<\/p>\n<p>Questa guida spiega come creare un <a href=\"https:\/\/kinsta.com\/it\/blog\/sito-web-statico\/\">sito statico<\/a> con SvelteKit, dalla configurazione alla distribuzione con l&#8217;<a href=\"https:\/\/sevalla.com\/static-site-hosting\/\">Hosting di Siti Statici di Kinsta<\/a>, gratuitamente.<\/p>\n<figure id=\"attachment_105526\" aria-describedby=\"caption-attachment-105526\" style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-105526 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/sveltekit-static-site-demo.gif\" alt=\"Demo di un sito statico SvelteKit\" width=\"1001\" height=\"471\"><figcaption id=\"caption-attachment-105526\" class=\"wp-caption-text\">Demo di un sito statico SvelteKit.<\/figcaption><\/figure>\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>Cos&#8217;\u00e8 SvelteKit?<\/h2>\n<p><a href=\"https:\/\/kit.svelte.dev\/\" target=\"_blank\" rel=\"noopener noreferrer\">SvelteKit<\/a> \u00e8 un solido web framework progettato per la creazione di interfacce utente, compresi i siti statici. \u00c8 noto per le sue prestazioni, la sua semplicit\u00e0 e la possibilit\u00e0 di creare componenti con un approccio dichiarativo.<\/p>\n<p>SvelteKit estende le funzionalit\u00e0 del framework Svelte aggiungendo il routing, il rendering lato server e altro ancora.<\/p>\n<h3>Primi passi con SvelteKit<\/h3>\n<p>Per seguire questa guida, partiamo dal presupposto che abbiate:<\/p>\n<ul>\n<li>Conoscenza delle basi 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>Conoscenza di base di <a href=\"https:\/\/kinsta.com\/it\/blog\/svelte-vs-react\/\">Svelte<\/a>.<\/li>\n<li><a href=\"https:\/\/nodejs.org\/en\/download\" target=\"_blank\" rel=\"noopener noreferrer\">Node.js e npm<\/a> installati sul computer.<\/li>\n<\/ul>\n<p>Per creare la vostra nuova applicazione SvelteKit, seguite questi passaggi.<\/p>\n<ol start=\"1\">\n<li>Create un nuovo progetto eseguendo:<\/li>\n<\/ol>\n<pre><code class=\"language-bash\">npm create svelte@latest my-app<\/code><\/pre>\n<p>Questo comando crea un nuovo progetto nella cartella <code>my-app<\/code>, chiedendo di configurare alcuni strumenti di base, come <a href=\"https:\/\/kinsta.com\/it\/blog\/typescript\/\">TypeScript<\/a>. Assicuratevi di scegliere l&#8217;opzione progetto Skeleton e di cambiare <code>my-app<\/code> con il nome che volete dare al progetto.<\/p>\n<ol start=\"2\">\n<li>Navigate nella directory del progetto e installate le sue dipendenze:<\/li>\n<\/ol>\n<pre><code class=\"language-bash\">cd my-app\nnpm install<\/code><\/pre>\n<ol start=\"3\">\n<li>Eseguite <code>npm run dev<\/code> per avviare il server di sviluppo locale su <code>localhost:5173<\/code>.<\/li>\n<\/ol>\n<figure id=\"attachment_105526\" aria-describedby=\"caption-attachment-105526\" style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-105526 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/sveltekit-skeleton-site.png\" alt=\"Sito scheletro di SvelteKit\" width=\"1001\" height=\"471\"><figcaption id=\"caption-attachment-105526\" class=\"wp-caption-text\">Sito scheletro di SvelteKit.<\/figcaption><\/figure>\n<h2>La struttura dei file di SvelteKit<\/h2>\n<p>Quando aprite il progetto in un editor di codice, vedrete la seguente struttura. La comprensione di questa struttura \u00e8 fondamentale perch\u00e9 vi aiuta a organizzare il codice in modo efficace.<\/p>\n<pre><code class=\"language-bash\">\/\n|-- \/src\n    |-- \/lib\n    |-- \/routes\n        |-- +page.svelte\n    |-- app.html\n|-- \/static\n|-- svelte.config.js<\/code><\/pre>\n<ul>\n<li><strong>\/src:<\/strong> \u00e8 il cuore del progetto e contiene varie sottodirectory e file:\n<ul>\n<li><strong>\/lib:<\/strong> questa directory ospita librerie, utili o moduli personalizzati. \u00c8 un buon posto per conservare il codice riutilizzabile che pu\u00f2 essere usato in tutta l&#8217;applicazione.<\/li>\n<li><strong>\/routes:<\/strong> la directory routes \u00e8 fondamentale per definire le diverse pagine o viste dell&#8217;applicazione. Ogni pagina \u00e8 rappresentata da un file <strong>.svelte<\/strong>, ad esempio <strong>+page.svelte<\/strong>. Questi file <strong>.svelte<\/strong> contengono i componenti, la logica e gli stili specifici di quella pagina.<\/li>\n<li><strong>app.html:<\/strong> questo file \u00e8 il punto di ingresso dell&#8217;applicazione. \u00c8 il punto in cui viene definita la struttura principale della pagina web.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<ul>\n<li><strong>\/static:<\/strong> questa directory \u00e8 utilizzata per memorizzare le risorse statiche, come immagini, font o qualsiasi altro file che non deve essere elaborato dall&#8217;applicazione. Queste risorse possono essere direttamente richiamate nel vostro HTML e nei componenti di Svelte.<\/li>\n<li><strong>svelte.config.js:<\/strong> questo file di configurazione permette di personalizzare vari aspetti del progetto SvelteKit. Potete usarlo per configurare il rendering lato server, definire layout personalizzati e altro ancora.<\/li>\n<\/ul>\n<h2>Routing in SvelteKit<\/h2>\n<p>Una delle caratteristiche principali di SvelteKit \u00e8 il suo sistema di routing. Segue un approccio basato sul file system, in cui i percorsi degli URL sono definiti da file e cartelle nella directory <strong>src\/routes<\/strong>, rendendolo intuitivo e semplice da gestire.<\/p>\n<p>In SvelteKit, ogni file corrispondente a un percorso deve essere denominato <strong>+page.svelte<\/strong>. Ad esempio, il file indice del sito SvelteKit si trova nella cartella <strong>routes<\/strong> e si chiama <strong>+page.svelte<\/strong>.<\/p>\n<p>Aggiungete il seguente codice a questo file per creare la pagina iniziale:<\/p>\n<pre><code class=\"language-js\">&lt;!-- src\/routes\/+page.svelte --&gt;\n&lt;div class=\"home_hero\"&gt;\n    &lt;h1&gt;Enjoy Static Site Hosting With Kinsta StSH.&lt;\/h1&gt;\n    &lt;p&gt;Fast, Secure, Reliable Hosting Solution.&lt;\/p&gt;\n    &lt;a href=\"https:\/\/sevalla.com\/static-site-hosting\/\"&gt;\n        &lt;div class=\"btn\"&gt;Read more&lt;\/div&gt;\n    &lt;\/a&gt;\n&lt;\/div&gt;\n\n&lt;style&gt;\n    .home_hero {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        flex-direction: column;\n        text-align: center;\n    }\n    .home_hero h1 {\n        font-size: 60px;\n        width: 70%;\n    }\n    .home_hero p {\n        color: #6e7076;\n        font-size: 20px;\n    }\n    .btn {\n        background-color: #5333ed;\n        padding: 20px 30px;\n        margin-top: 40px;\n        border-radius: 5px;\n        color: #fff;\n    }\n    @media (max-width: 700px) {\n        .home_hero h1 {\n            font-size: 40px;\n        }\n        .home_hero p {\n            font-size: 16px;\n        }\n    }\n&lt;\/style&gt;<\/code><\/pre>\n<p>Per creare un percorso annidato in SvelteKit, ad esempio una pagina informativa accessibile all&#8217;indirizzo <code>localhost:5173\/about<\/code>, dovrete creare una cartella all&#8217;interno della cartella <strong>routes<\/strong> con un nome che rappresenti il percorso dell&#8217;URL. All&#8217;interno di questa cartella, create un file <strong>+page.svelte<\/strong> da renderizzare per il percorso.<\/p>\n<p>Aggiungete il seguente codice a <strong>routes\/about\/+page.svelte<\/strong>:<\/p>\n<pre><code class=\"language-js\">&lt;div class=\"about_cont\"&gt;\n    &lt;h2&gt;About&lt;\/h2&gt;\n    &lt;div class=\"about_info\"&gt;\n        &lt;div class=\"about_text\"&gt;\n            &lt;p&gt;\n                Kinsta allows you to{' '}\n                &lt;a&gt; href=\"https:\/\/sevalla.com\/static-site-hosting\/\"&gt;\n                    host up to 100 static websites\n                &lt;\/a&gt;{' '}\n                for free. This can be done by pushing your code to your preferred Git provider\n                (Bitbucket, GitHub, or GitLab) and then deploying it to Kinsta.\n            &lt;\/p&gt;\n            &lt;p&gt;\n                As an alternative to Static Site Hosting, you can opt for deploying your\n                static site with Kinsta\u2019s{' '}\n                &lt;a&gt; href=\"https:\/\/sevalla.com\/application-hosting\/\"&gt;\n                    Application Hosting\n                &lt;\/a&gt;\n                , which provides greater hosting flexibility, a wider range of benefits,\n                and access to more robust features. For example, scalability, customized\n                deployment using a Dockerfile, and comprehensive analytics encompassing real-time\n                and historical data.\n            &lt;\/p&gt;\n        &lt;\/div&gt;\n        &lt;iframe&gt; width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/H7CNbsda8OA?si=40FGVlNvJ74_6hlj\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen&gt; &lt;\/iframe&gt;\n    &lt;\/div&gt;\n&lt;\/div&gt;\n\n&lt;style&gt;&gt;\n    .about_cont h2 {\n        font-size: 40px;\n        margin-bottom: 20px;\n    }\n    .about_info {\n        display: flex;\n        width: 100%;\n        justify-content: space-between;\n        gap: 20px;\n    }\n    @media (max-width: 700px) {\n        .about_info {\n            flex-direction: column;\n        }\n    }\n    .about_text {\n        flex-basis: 50%;\n    }\n    .about_text p {\n        margin-bottom: 20px;\n        font-size: 18px;\n    }\n    .about_img {\n        flex-basis: 50%;\n        width: 200px;\n        border-radius: 10px;\n    }\n    @media (max-width: 700px) {\n        .about_info {\n            flex-direction: column;\n        }\n        .about_img {\n            width: 100%;\n        }\n    }\n&lt;\/style&gt;<\/code><\/pre>\n<p>Qualsiasi stile aggiunto al componente Svelte ha uno scopo e non influisce sugli altri componenti.<\/p>\n<p>\u00c8 fondamentale capire che SvelteKit gestisce la navigazione tra le pagine utilizzando gli elementi standard <code>&lt;a&gt;<\/code>, rendendo il processo di navigazione intuitivo. Non c&#8217;\u00e8 bisogno di importare componenti aggiuntivi come <code>&lt;Link&gt;<\/code>, come richiesto da <a href=\"https:\/\/kinsta.com\/it\/blog\/react-js\/\">React<\/a>. Nella prossima sezione creeremo un componente di navigazione da aggiungere a ogni pagina.<\/p>\n<p>Per il progetto attuale, la struttura del percorso \u00e8 la seguente:<\/p>\n<pre><code class=\"language-bash\">|-- \/src\n    |-- \/routes\n        |-- \/about\n            |-- +page.svelte\n        |-- +page.svelte<\/code><\/pre>\n<h3>Usare i componenti in SvelteKit<\/h3>\n<p>Per rendere il codice pi\u00f9 modulare, potete creare dei componenti e importarli nelle pagine. Ad esempio, potete creare un componente <strong>Navbar.svelte<\/strong> nella cartella <strong>routes<\/strong>:<\/p>\n<pre><code class=\"language-js\">&lt;!-- src\/routes\/Navbar.svelte --&gt;\n&lt;nav&gt;\n    &lt;a href=\"\/\"&gt;\n        &lt;img src=\"\/kinsta-logo.png\" alt=\"\" class=\"logo-img\" \/&gt;\n    &lt;\/a&gt;\n    &lt;div class=\"nav-links\"&gt;\n        &lt;a href=\"\/\"&gt;Home&lt;\/a&gt;\n        &lt;a href=\"\/about\"&gt;About&lt;\/a&gt;\n        &lt;a href=\"\/posts\"&gt;Posts&lt;\/a&gt;\n    &lt;\/div&gt;\n&lt;\/nav&gt;<\/code><\/pre>\n<p>Poi, importatelo nella homepage <strong>+page.svelte<\/strong> in questo modo:<\/p>\n<pre><code class=\"language-js\">&lt;!-- src\/routes\/+page.svelte --&gt;\n&lt;script&gt;&gt;\n    import Navbar from '.\/Navbar.svelte'\n&lt;\/script&gt;\n\n&lt;Navbar \/&gt;\n&lt;div class=\"home_hero\"&gt;\n    &lt;h1&gt;Enjoy Static Site Hosting With Kinsta.&lt;\/h1&gt;\n    &lt;p&gt;Fast, Secure, Reliable Hosting Solution.&lt;\/p&gt;\n    &lt;a href=\"https:\/\/kinsta.com\/static-site-hosting\"&gt;\n        &lt;div&gt; class=\"btn\"&gt;Read more&lt;\/div&gt;\n    &lt;\/a&gt;\n&lt;\/div&gt;\n\n&lt;style&gt;\n      \/* CSS styles *\/\n&lt;\/style&gt;<\/code><\/pre>\n<p>Per i componenti globali come <code>Navbar<\/code> e <code>Footer<\/code>, che vengono utilizzati in pi\u00f9 file, createli nella cartella <strong>src\/lib<\/strong> per evitare lunghi percorsi di importazione. Quando create componenti o moduli nella cartella <strong>lib<\/strong>, potete importarli comodamente in qualsiasi componente usando l&#8217;alias <code>$lib<\/code> import:<\/p>\n<pre><code class=\"language-js\">&lt;script&gt;\n    import Navbar from '$lib\/Navbar.svelte'\n&lt;\/script&gt;<\/code><\/pre>\n<p>Per utilizzare componenti indipendenti, ad esempio, supponiamo che vi serva un componente solo per la pagina About, createlo all&#8217;interno del percorso <strong>routes\/about<\/strong> e poi importalo nella pagina.<\/p>\n<p>Per questo progetto, potete anche creare un componente <code>Footer<\/code> nella cartella <strong>lib<\/strong> e aggiungere questo codice:<\/p>\n<pre><code class=\"language-js\">&lt;div class=\"footer\"&gt;\n    &lt;p&gt;\n        Hosted with \u2764\ufe0f by Kinsta's{' '}\n        &lt;a&gt; href=\"https:\/\/kinsta.com\/static-site-hosting\"&gt;Static Site Hosting&lt;\/a&gt;\n        .\n    &lt;\/p&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<p>Quindi, importatelo in tutte le pagine.<\/p>\n<h3>Usare il layout in SvelteKit<\/h3>\n<p>Per evitare di importare componenti in molte pagine, SvelteKit permette di definire dei layout per le tue pagine utilizzando i file <strong>+layout.svelte<\/strong>.<\/p>\n<p>Creare un layout che si applichi a ogni pagina \u00e8 semplice. Create un file chiamato <strong>src\/routes\/+layout.svelte<\/strong> e personalizzatelo con il markup, gli stili e i comportamenti desiderati. Il requisito fondamentale \u00e8 quello di includere un elemento <code><\/code> per ospitare il contenuto della pagina.<\/p>\n<p>Ad esempio, potete integrare i componenti <code>Navbar<\/code> e <code>Footer<\/code> in questo layout:<\/p>\n<pre><code class=\"language-js\">&lt;script&gt;\n    import Navbar from '$lib\/Navbar.svelte';\n    import Footer from '$lib\/Footer.svelte';\n&lt;\/script&gt;\n\n&lt;div class=\"layout\"&gt;\n    &lt;Navbar \/&gt;\n    &lt;slot \/&gt;\n    &lt;Footer \/&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<p>L&#8217;elemento <code>&lt;slot&gt;<\/code> permette di inserire il contenuto di ogni pagina nel layout.<\/p>\n<p>I layout possono anche essere annidati per pagine specifiche. Ad esempio, se avete una pagina <code>\/dashboard<\/code> con pagine annidate come <code>\/profile<\/code> e <code>\/settings<\/code>, potete creare un layout speciale:<\/p>\n<pre><code class=\"language-bash\">|-- \/dashboard\n    |-- \/profile\n        |-- +page.svelte\n    |-- \/settings\n        |-- +page.svelte\n    |-- +layout.svelte<\/code><\/pre>\n<aside data-x1=\"Q3FRNnh6UGczd0R1ZF9jN1gxRw==\" data-X1l=\"LWhqTDJrWm9UUlgudXZxSkRZZQ==\" class=\"WzI2MjM3LDI1OTE4LDI2MjM4XQ==\" data-ETGk=\"Ty0waFBURmtESkNqcHJW\" data-k=\"M1N4RTFYX2ZQbWJUekRyQUlHOA==\" id=\"NzQyODM=\" data-r3koi=\"Im1pZGRsZSI=|Iml0X0lUIg==\" data-rnESJd=\"VTNHSkFlME12Njd5ejlM\" data-6n8frG=\"eXgyUjVqdGhrZ3pzSzFh\"><\/aside>\n<h3>Navigazione programmatica in SvelteKit<\/h3>\n<p>SvelteKit fornisce una funzione <code>goto<\/code> per la navigazione programmatica. Ad esempio, per navigare alla pagina <code>\/dashboard<\/code> dopo un&#8217;azione di login:<\/p>\n<pre><code class=\"language-js\">&lt;script&gt;\n    import { goto } from '$app\/navigation';\n    \n    async function login() {\n        \/\/ Perform login action\n        goto('\/dashboard');\n    }\n&lt;\/script&gt;<\/code><\/pre>\n<h3>Stilizzazione in SvelteKit<\/h3>\n<p>SvelteKit supporta i CSS tradizionali per lo styling delle pagine. Gli stili possono essere definiti all&#8217;interno dei componenti Svelte utilizzando il tag <code>&lt;style&gt;<\/code>, oppure potete scegliere di collegare fogli di stile esterni.<\/p>\n<p>Potreste notare che i componenti <code>Navbar<\/code> e <code>Footer<\/code> non hanno stili specifici. Per risolvere questo problema, \u00e8 buona norma applicare uno stile globale. Questo si pu\u00f2 ottenere creando un file CSS all&#8217;interno della cartella <strong>src<\/strong> e importandolo nel file di layout principale.<\/p>\n<p>Per una migliore organizzazione, create una cartella <strong>styles<\/strong> all&#8217;interno della cartella <strong>src<\/strong>. Questa cartella pu\u00f2 contenere tutti gli stili. Come parte di questo progetto, create un file <strong>global.css<\/strong> nella cartella <strong>styles<\/strong> e aggiungete il seguente codice:<\/p>\n<pre><code class=\"language-css\">@import url('https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500&display=swap');\n* {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n}\nbody {\n    background-color: #ddd;\n    font-family: 'Poppins',\n        sans-serif;\n    width: 1200px;\n    margin: 0 auto;\n}\na {\n    text-decoration: none;\n}\nimg {\n    width: 100%;\n}\nnav {\n    display: flex;\n    justify-content: space-between;\n    height: 200px;\n    align-items: center;\n}\nnav .logo-img {\n    width: 100px;\n}\nnav .nav-links a {\n    padding: 0 20px;\n    font-size: 18px;\n}\n@media (max-width:700px) {\n    body {\n        width: 100%;\n        padding: 0 20px;\n    }\n    nav .nav-links a {\n        padding: 0 18px;\n    }\n}\n.footer {\n    width: 100%;\n    text-align: center;\n    margin: 100px 0 20px;\n}<\/code><\/pre>\n<p>Potete quindi importare il file CSS nel file di layout in modo che sia globale e funzioni per tutti i file:<\/p>\n<pre><code class=\"language-js\">&lt;script&gt;&gt;\n    import Navbar from '$lib\/Navbar.svelte';\n    import Footer from '$lib\/Footer.svelte';\n    import '..\/styles\/global.css';\n&lt;\/script&gt;<\/code><\/pre>\n<h2>Caricare i dati con SvelteKit<\/h2>\n<p>Quando si lavora con SvelteKit, spesso si ha bisogno di caricare dati nei layout, pagine e componenti. Questi dati possono provenire da API esterne, database o dal server locale. Per gestire questo aspetto, potete utilizzare un file <strong>+page.js<\/strong> per le pagine e <strong>+layout.js<\/strong> per i layout.<\/p>\n<p>Nel progetto SvelteKit, un file <strong>+page.svelte<\/strong> pu\u00f2 avere un fratello <strong>+page.js<\/strong> che esporta una funzione di caricamento. Il valore di ritorno di questa funzione viene reso disponibile alla pagina attraverso il prop <code>data<\/code>. Facciamo un esempio: supponiamo che vogliate creare una route per recuperare un <a href=\"https:\/\/jsonplaceholder.typicode.com\/posts\" target=\"_blank\" rel=\"noopener noreferrer\">elenco di post<\/a> dall&#8217;<a href=\"https:\/\/jsonplaceholder.typicode.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">API JSON Placeholder<\/a>.<\/p>\n<p>Per caricare i dati dall&#8217;API, create un file <strong>+page.js<\/strong> nella cartella <strong>posts<\/strong>. Questo file esporta una funzione <code>load<\/code>.<\/p>\n<pre><code class=\"language-js\">export const load = async () =&gt; {\n    const title = \"Hello World\";\n    return {\n        title,\n    };\n};<\/code><\/pre>\n<p>La funzione <code>load<\/code> dovrebbe restituire un oggetto, che viene fornito come props al file <strong>+page.svelte<\/strong>. Il valore <code>title<\/code> pu\u00f2 essere consultato con il prop <code>data<\/code>:<\/p>\n<pre><code class=\"language-js\">&lt;script&gt;&gt;\n    export let data;\n    const title = data.title;\n&lt;\/script&gt;\n\n&lt;div class=\"blog_cont\"&gt;\n    &lt;h2&gt;{title}&lt;\/h2&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<p>Ora passiamo all&#8217;interazione con l&#8217;API JSON Placeholder posts. Per farlo, potete utilizzare l&#8217;<a href=\"https:\/\/kinsta.com\/it\/blog\/richieste-http-javascript\/#4-how-to-make-an-http-request-in-javascript-using-the-fetch-api\">API JavaScript Fetch<\/a>, ma SvelteKit offre il proprio metodo <code>fetch<\/code> che potete utilizzare per recuperare i dati dagli endpoint dell&#8217;API prima del rendering della pagina:<\/p>\n<pre><code class=\"language-js\">export const load = async (loadEvent) =&gt; {\n    const { fetch } = loadEvent;\n    const response = await fetch(\n        'https:\/\/jsonplaceholder.typicode.com\/posts?_limit=10'\n    );\n    const posts = await response.json();\n    return {\n        posts,\n    };\n};<\/code><\/pre>\n<p>Nel codice qui sopra, estraiamo il metodo <code>fetch<\/code> da <code>loadEvent<\/code> ed effettuiamo la richiesta API. La risposta viene poi inviata come props alla pagina Posts, che visualizza tutti i post:<\/p>\n<pre><code class=\"language-js\">&lt;script&gt;\n    export let data;\n    const posts = data.posts;\n&lt;\/script&gt;\n\n&lt;div class=\"blog_cont\"&gt;\n    &lt;h2&gt;Posts&lt;\/h2&gt;\n    &lt;div class=\"blog_grid\"&gt;\n        {#each posts as post}\n            &lt;a href={`\/posts\/${post.id}`} class=\"blog_card\"&gt;\n                &lt;h3&gt;{post.title}&lt;\/h3&gt;\n                &lt;p&gt;\n                    {post.body}\n                &lt;\/p&gt;\n            &lt;\/a&gt;\n        {\/each}\n    &lt;\/div&gt;\n&lt;\/div&gt;\n\n&lt;style&gt;\n    .blog_cont h2 {\n        font-size: 40px;\n        margin-bottom: 20px;\n    }\n    .blog_grid {\n        display: grid;\n        grid-template-columns: 1fr 1fr 1fr;\n        gap: 20px;\n    }\n    @media (max-width: 700px) {\n        .blog_grid {\n            grid-template-columns: 1fr;\n        }\n    }\n    .blog_card {\n        background-color: #bfbfbf;\n        padding: 20px;\n        border-radius: 5px;\n        color: #000;\n        transition: all 0.5s ease-in-out;\n    }\n    .blog_card:hover {\n        background-color: #5333ed;\n        color: #fff;\n    }\n    .blog_card h3 {\n        margin-bottom: 15px;\n    }\n    .blog_card p {\n        margin-bottom: 15px;\n    }\n&lt;\/style&gt;<\/code><\/pre>\n<p>Ecco come appare l&#8217;albero dei file corrente:<\/p>\n<pre><code class=\"language-bash\">|-- \/src\n    |-- \/lib\n        |-- Footer.svelte\n        |-- Navbar.svelte\n    |-- \/routes\n        |-- \/about\n            |-- +page.svelte\n        |-- \/posts\n            |-- +page.js\n            |-- +page.svelte\n        |-- +page.svelte\n        |-- +layout.svelte\n    |-- \/styles\n        |-- global.css<\/code><\/pre>\n<h3>Percorsi dinamici con SvelteKit<\/h3>\n<p>Ora avete 10 post visualizzati nella pagina dei post; se volete creare una pagina individuale per ogni post, il modo migliore per farlo \u00e8 creare un percorso dinamico.<\/p>\n<p>A tal fine, dovete ricevere il valore dello slug dalla route e usarlo come parametro per interrogare il post. In SvelteKit, potete farlo creando una cartella di parentesi quadre con il nome del parametro. Ecco come potete impostare le pagine dei singoli post:<\/p>\n<ol start=\"1\">\n<li>Create una cartella <strong>[postid]<\/strong> all&#8217;interno della cartella <strong>posts<\/strong>. <strong>[postid]<\/strong> rappresenta il parametro dinamico che pu\u00f2 contenere valori come gli ID dei post o gli slug.<\/li>\n<li>Nella cartella [postid], create due file:\n<ul>\n<li><strong>+page.svelte:<\/strong> questo file definir\u00e0 il layout e la struttura delle pagine dei singoli post.<\/li>\n<li><strong>+page.js:<\/strong> questo file JavaScript gestir\u00e0 il reperimento dei dati e la logica specifica dei singoli post.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<p>Nel file <strong>+page.js<\/strong>, recuperate il parametro <code>postid<\/code> dalla route e usatelo per interrogare il post specifico:<\/p>\n<pre><code class=\"language-js\">export const load = async (loadEvent) =&gt; {\n    const { fetch, params } = loadEvent;\n    const { postid } = params;\n    const response = await fetch(\n        `https:\/\/jsonplaceholder.typicode.com\/posts\/${postid}`\n    );\n    const post = await response.json();\n    return {\n        post,\n    };\n};<\/code><\/pre>\n<p>Potrete quindi accedere al parametro <code>data<\/code> come oggetto nel file <strong>+page.svelte<\/strong>:<\/p>\n<pre><code class=\"language-js\">&lt;script&gt;&gt;\n    export let data;\n    const post = data.post;\n&lt;\/script&gt;\n\n&lt;div&gt;\n    &lt;div class=\"blog_content\"&gt;\n        &lt;h3&gt;{post.title}&lt;\/h3&gt;\n        &lt;p&gt;{post.body}&lt;\/p&gt;\n    &lt;\/div&gt;\n&lt;\/div&gt;\n\n&lt;style&gt;&gt;\n    .blog_content h3 {\n        font-size: 40px;\n        margin-bottom: 20px;\n        text-align: center;\n    }\n&lt;\/style&gt;<\/code><\/pre>\n<p>Potete consultare il codice sorgente completo di questo <a href=\"https:\/\/github.com\/kinsta\/static-sveltekit-demo\" target=\"_blank\" rel=\"noopener noreferrer\">progetto SvelteKit su GitHub<\/a>. Potete anche consultare la <a href=\"https:\/\/kit.svelte.dev\/docs\/introduction\" target=\"_blank\" rel=\"noopener noreferrer\">documentazione ufficiale di SvelteKit<\/a> per maggiori informazioni.<\/p>\n<h2>Distribuire i siti statici SvelteKit con Kinsta<\/h2>\n<p>Kinsta permette di <a href=\"https:\/\/sevalla.com\/static-site-hosting\/\" target=\"_blank\" rel=\"noopener noreferrer\">ospitare fino a 100 siti web statici<\/a> <strong>gratis<\/strong>, direttamente dal vostro provider Git preferito (<a href=\"https:\/\/docs.sevalla.com\/applications\/git\/bitbucket#grant-access-to-the-kinsta-bitbucket-application\" target=\"_blank\" rel=\"noopener noreferrer\">Bitbucket<\/a>, <a href=\"https:\/\/docs.sevalla.com\/applications\/git\/github#authenticate-and-authorize\" target=\"_blank\" rel=\"noopener noreferrer\">GitHub<\/a> o <a href=\"https:\/\/docs.sevalla.com\/applications\/git\/gitlab#authorize-the-kinsta-gitlab-application\" target=\"_blank\" rel=\"noopener noreferrer\">GitLab<\/a>).<\/p>\n<p>Prima di iniziare a distribuire il vostro sito SvelteKit, \u00e8 importante adattarlo al vostro obiettivo di distribuzione. In questo progetto particolare, ci stiamo concentrando sull&#8217;utilizzo dell&#8217;Hosting di Siti Statici di Kinsta, che richiede la configurazione di SvelteKit come generatore di siti statici (SSG).<\/p>\n<p>Ecco come ottenere un sito prerenderizzato come una raccolta di file statici:<\/p>\n<ol start=\"1\">\n<li>Installate <a href=\"https:\/\/kit.svelte.dev\/docs\/adapter-static\" target=\"_blank\" rel=\"noopener noreferrer\">@sveltejs\/adapter-static<\/a> eseguendo il seguente comando:<\/li>\n<\/ol>\n<pre><code class=\"language-bash\">npm i -D @sveltejs\/adapter-static<\/code><\/pre>\n<ol start=\"2\">\n<li>Successivamente, adattate il file <strong>svelte.config.js<\/strong> sostituendo <code>adapter-auto<\/code> con <code>fallback<\/code> e <code>404.html<\/code>:<\/li>\n<\/ol>\n<pre><code class=\"language-js\">import adapter from '@sveltejs\/adapter-static';\n\nconst config = {\n    kit: {\n        adapter: adapter({ fallback: '404.html' }),\n    },\n};\n\nexport default config;<\/code><\/pre>\n<p>A questo punto, inviate il codice al vostro provider Git preferito. Quindi, seguite questi passaggi per distribuire il vostro sito statico su Kinsta:<\/p>\n<ol start=\"1\">\n<li>Accedete o create un account per visualizzare la dashboard <a href=\"https:\/\/my.kinsta.com\/?lang=it\" target=\"_blank\" rel=\"noopener noreferrer\">MyKinsta<\/a>.<\/li>\n<li>Autorizzate Kinsta dal provider Git.<\/li>\n<li>Cliccate su <strong>Siti statici<\/strong> nella barra laterale di sinistra e poi su <strong>Aggiungi sito<\/strong>.<\/li>\n<li>Selezionate il repository e il branch da cui desiderate effettuare il deploy.<\/li>\n<li>Assegnate un nome unico al sito.<\/li>\n<li>Aggiungete le impostazioni di build nel seguente formato:\n<ul>\n<li><strong>Comando di build:<\/strong> <code>npm run build<\/code><\/li>\n<li><strong>Versione Node:<\/strong> <code>18.16.0<\/code><\/li>\n<li><strong>Directory di pubblicazione:<\/strong> <code>build<\/code><\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<ol start=\"7\">\n<li>Infine, cliccate su <strong>Crea sito<\/strong>.<\/li>\n<\/ol>\n<p>E il gioco \u00e8 fatto! In pochi secondi avrete un sito distribuito, e riceverete un link per accedere alla versione distribuita del vostro sito. In seguito potrete aggiungere un <a href=\"https:\/\/docs.sevalla.com\/applications\/domains\" target=\"_blank\" rel=\"noopener noreferrer\">dominio personalizzato<\/a> e il vostro <a href=\"https:\/\/docs.sevalla.com\/applications\/domains#install-a-custom-ssl-certificate\" target=\"_blank\" rel=\"noopener noreferrer\">certificato SSL<\/a>, se lo desiderate.<\/p>\n<p>In alternativa all&#8217;hosting statico, potete scegliere di distribuire il sito statico con l&#8217;<a href=\"https:\/\/sevalla.com\/application-hosting\/\">Hosting di Applicazioni<\/a> di Kinsta, che offre una maggiore flessibilit\u00e0 di hosting, una gamma pi\u00f9 ampia di vantaggi e l&#8217;accesso a funzioni pi\u00f9 robuste. Ad esempio, la scalabilit\u00e0, la distribuzione personalizzata tramite un file Docker e l&#8217;<a href=\"https:\/\/docs.sevalla.com\/applications\/analytics\" target=\"_blank\" rel=\"noopener noreferrer\">analisi completa<\/a> dei dati storici e in tempo reale.<\/p>\n<h2>Riepilogo<\/h2>\n<p>Questa guida ha spiegato come creare un sito statico con SvelteKit. Dalla configurazione dell&#8217;ambiente di sviluppo alla distribuzione, ora avete le conoscenze necessarie per creare siti statici ad alte prestazioni con facilit\u00e0.<\/p>\n<p>La creazione di siti statici con SvelteKit offre un mix perfetto di prestazioni e semplicit\u00e0, assicurando che i vostri progetti web brillino su internet.<\/p>\n<p><em>Ora \u00e8 il momento di mettere in pratica le vostre conoscenze e iniziare a costruire il vostro sito statico con SvelteKit. Avete gi\u00e0 utilizzato SvelteKit in passato? Non esitate a condividere i vostri progetti e le vostre esperienze nella sezione commenti qui sotto.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>I siti statici sono diventati sempre pi\u00f9 popolari grazie alla loro velocit\u00e0, sicurezza e semplicit\u00e0. Quando si tratta di costruire siti statici, sono disponibili diversi strumenti &#8230;<\/p>\n","protected":false},"author":287,"featured_media":74284,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[26237,25918,26238],"class_list":["post-74283","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-errori-javascript","topic-framework-javascript","topic-generatore-siti-statici"],"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>Come creare un sito statico con SvelteKit - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Ecco il procedimento per creare un sito statico velocissimo con SvelteKit. Dalla configurazione iniziale alla distribuzione con Kinsta.\" \/>\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\/sveltekit-statico\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Come creare un sito statico con SvelteKit\" \/>\n<meta property=\"og:description\" content=\"Ecco il procedimento per creare un sito statico velocissimo con SvelteKit. Dalla configurazione iniziale alla distribuzione con Kinsta.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/it\/blog\/sveltekit-statico\/\" \/>\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=\"2023-11-04T10:03:46+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-11-09T14:34:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/11\/static-sveltekit.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=\"Joel Olawanle\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Ecco il procedimento per creare un sito statico velocissimo con SvelteKit. Dalla configurazione iniziale alla distribuzione con Kinsta.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/11\/static-sveltekit.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@olawanle_joel\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_IT\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joel Olawanle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/sveltekit-statico\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/sveltekit-statico\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"Come creare un sito statico con SvelteKit\",\"datePublished\":\"2023-11-04T10:03:46+00:00\",\"dateModified\":\"2023-11-09T14:34:01+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/sveltekit-statico\/\"},\"wordCount\":1869,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/it\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/sveltekit-statico\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/11\/static-sveltekit.jpg\",\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/it\/blog\/sveltekit-statico\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/sveltekit-statico\/\",\"url\":\"https:\/\/kinsta.com\/it\/blog\/sveltekit-statico\/\",\"name\":\"Come creare un sito statico con SvelteKit - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/it\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/sveltekit-statico\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/sveltekit-statico\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/11\/static-sveltekit.jpg\",\"datePublished\":\"2023-11-04T10:03:46+00:00\",\"dateModified\":\"2023-11-09T14:34:01+00:00\",\"description\":\"Ecco il procedimento per creare un sito statico velocissimo con SvelteKit. Dalla configurazione iniziale alla distribuzione con Kinsta.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/sveltekit-statico\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/it\/blog\/sveltekit-statico\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/sveltekit-statico\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/11\/static-sveltekit.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/11\/static-sveltekit.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/sveltekit-statico\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/it\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Generatore di Siti Statici\",\"item\":\"https:\/\/kinsta.com\/it\/argomenti\/generatore-siti-statici\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Come creare un sito statico con SvelteKit\"}]},{\"@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\/efa7de30245ca15be5ce1dcacff89c07\",\"name\":\"Joel Olawanle\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"caption\":\"Joel Olawanle\"},\"description\":\"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.\",\"sameAs\":[\"https:\/\/joelolawanle.com\/\",\"https:\/\/www.linkedin.com\/in\/olawanlejoel\/\",\"https:\/\/x.com\/olawanle_joel\",\"https:\/\/www.youtube.com\/@joelolawanle\"],\"gender\":\"male\",\"knowsAbout\":[\"JavaScript\",\"React\",\"Next.js\"],\"knowsLanguage\":[\"English\"],\"jobTitle\":\"Technical Editor\",\"worksFor\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/it\/blog\/author\/joelolawanle\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Come creare un sito statico con SvelteKit - Kinsta\u00ae","description":"Ecco il procedimento per creare un sito statico velocissimo con SvelteKit. Dalla configurazione iniziale alla distribuzione con Kinsta.","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\/sveltekit-statico\/","og_locale":"it_IT","og_type":"article","og_title":"Come creare un sito statico con SvelteKit","og_description":"Ecco il procedimento per creare un sito statico velocissimo con SvelteKit. Dalla configurazione iniziale alla distribuzione con Kinsta.","og_url":"https:\/\/kinsta.com\/it\/blog\/sveltekit-statico\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstaitalia\/","article_published_time":"2023-11-04T10:03:46+00:00","article_modified_time":"2023-11-09T14:34:01+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/11\/static-sveltekit.jpg","type":"image\/jpeg"}],"author":"Joel Olawanle","twitter_card":"summary_large_image","twitter_description":"Ecco il procedimento per creare un sito statico velocissimo con SvelteKit. Dalla configurazione iniziale alla distribuzione con Kinsta.","twitter_image":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/11\/static-sveltekit.jpg","twitter_creator":"@olawanle_joel","twitter_site":"@Kinsta_IT","twitter_misc":{"Scritto da":"Joel Olawanle","Tempo di lettura stimato":"13 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/it\/blog\/sveltekit-statico\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/it\/blog\/sveltekit-statico\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinsta.com\/it\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"Come creare un sito statico con SvelteKit","datePublished":"2023-11-04T10:03:46+00:00","dateModified":"2023-11-09T14:34:01+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/it\/blog\/sveltekit-statico\/"},"wordCount":1869,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/it\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/it\/blog\/sveltekit-statico\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/11\/static-sveltekit.jpg","inLanguage":"it-IT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/it\/blog\/sveltekit-statico\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/it\/blog\/sveltekit-statico\/","url":"https:\/\/kinsta.com\/it\/blog\/sveltekit-statico\/","name":"Come creare un sito statico con SvelteKit - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/it\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/it\/blog\/sveltekit-statico\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/it\/blog\/sveltekit-statico\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/11\/static-sveltekit.jpg","datePublished":"2023-11-04T10:03:46+00:00","dateModified":"2023-11-09T14:34:01+00:00","description":"Ecco il procedimento per creare un sito statico velocissimo con SvelteKit. Dalla configurazione iniziale alla distribuzione con Kinsta.","breadcrumb":{"@id":"https:\/\/kinsta.com\/it\/blog\/sveltekit-statico\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/it\/blog\/sveltekit-statico\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/blog\/sveltekit-statico\/#primaryimage","url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/11\/static-sveltekit.jpg","contentUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/11\/static-sveltekit.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/it\/blog\/sveltekit-statico\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/it\/"},{"@type":"ListItem","position":2,"name":"Generatore di Siti Statici","item":"https:\/\/kinsta.com\/it\/argomenti\/generatore-siti-statici\/"},{"@type":"ListItem","position":3,"name":"Come creare un sito statico con SvelteKit"}]},{"@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\/efa7de30245ca15be5ce1dcacff89c07","name":"Joel Olawanle","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","caption":"Joel Olawanle"},"description":"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.","sameAs":["https:\/\/joelolawanle.com\/","https:\/\/www.linkedin.com\/in\/olawanlejoel\/","https:\/\/x.com\/olawanle_joel","https:\/\/www.youtube.com\/@joelolawanle"],"gender":"male","knowsAbout":["JavaScript","React","Next.js"],"knowsLanguage":["English"],"jobTitle":"Technical Editor","worksFor":"Kinsta","url":"https:\/\/kinsta.com\/it\/blog\/author\/joelolawanle\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/74283","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\/287"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/comments?post=74283"}],"version-history":[{"count":7,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/74283\/revisions"}],"predecessor-version":[{"id":74324,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/74283\/revisions\/74324"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/74283\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/74283\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/74283\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/74283\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/74283\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/74283\/translations\/jp"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/74283\/translations\/es"},{"href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/74283\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/media\/74284"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/media?parent=74283"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/tags?post=74283"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/topic?post=74283"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}