I siti statici sono diventati sempre più popolari grazie alla loro velocità, sicurezza e semplicità. Quando si tratta di costruire siti statici, sono disponibili diversi strumenti e framework, ma uno che sta guadagnando rapidamente terreno è SvelteKit.
Questa guida spiega come creare un sito statico con SvelteKit, dalla configurazione alla distribuzione con l’Hosting di Siti Statici di Kinsta, gratuitamente.
Cos’è SvelteKit?
SvelteKit è un solido web framework progettato per la creazione di interfacce utente, compresi i siti statici. È noto per le sue prestazioni, la sua semplicità e la possibilità di creare componenti con un approccio dichiarativo.
SvelteKit estende le funzionalità del framework Svelte aggiungendo il routing, il rendering lato server e altro ancora.
Primi passi con SvelteKit
Per seguire questa guida, partiamo dal presupposto che abbiate:
- Conoscenza delle basi di HTML, CSS e JavaScript.
- Conoscenza di base di Svelte.
- Node.js e npm installati sul computer.
Per creare la vostra nuova applicazione SvelteKit, seguite questi passaggi.
- Create un nuovo progetto eseguendo:
npm create svelte@latest my-appQuesto comando crea un nuovo progetto nella cartella my-app, chiedendo di configurare alcuni strumenti di base, come TypeScript. Assicuratevi di scegliere l’opzione progetto Skeleton e di cambiare my-app con il nome che volete dare al progetto.
- Navigate nella directory del progetto e installate le sue dipendenze:
cd my-app
npm install- Eseguite
npm run devper avviare il server di sviluppo locale sulocalhost:5173.
La struttura dei file di SvelteKit
Quando aprite il progetto in un editor di codice, vedrete la seguente struttura. La comprensione di questa struttura è fondamentale perché vi aiuta a organizzare il codice in modo efficace.
/
|-- /src
|-- /lib
|-- /routes
|-- +page.svelte
|-- app.html
|-- /static
|-- svelte.config.js- /src: è il cuore del progetto e contiene varie sottodirectory e file:
- /lib: questa directory ospita librerie, utili o moduli personalizzati. È un buon posto per conservare il codice riutilizzabile che può essere usato in tutta l’applicazione.
- /routes: la directory routes è fondamentale per definire le diverse pagine o viste dell’applicazione. Ogni pagina è rappresentata da un file .svelte, ad esempio +page.svelte. Questi file .svelte contengono i componenti, la logica e gli stili specifici di quella pagina.
- app.html: questo file è il punto di ingresso dell’applicazione. È il punto in cui viene definita la struttura principale della pagina web.
- /static: questa directory è utilizzata per memorizzare le risorse statiche, come immagini, font o qualsiasi altro file che non deve essere elaborato dall’applicazione. Queste risorse possono essere direttamente richiamate nel vostro HTML e nei componenti di Svelte.
- svelte.config.js: 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.
Routing in SvelteKit
Una delle caratteristiche principali di SvelteKit è 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 src/routes, rendendolo intuitivo e semplice da gestire.
In SvelteKit, ogni file corrispondente a un percorso deve essere denominato +page.svelte. Ad esempio, il file indice del sito SvelteKit si trova nella cartella routes e si chiama +page.svelte.
Aggiungete il seguente codice a questo file per creare la pagina iniziale:
<!-- src/routes/+page.svelte -->
<div class="home_hero">
<h1>Enjoy Static Site Hosting With Kinsta StSH.</h1>
<p>Fast, Secure, Reliable Hosting Solution.</p>
<a href="https://kinsta.com/static-site-hosting/">
<div class="btn">Read more</div>
</a>
</div>
<style>
.home_hero {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
text-align: center;
}
.home_hero h1 {
font-size: 60px;
width: 70%;
}
.home_hero p {
color: #6e7076;
font-size: 20px;
}
.btn {
background-color: #5333ed;
padding: 20px 30px;
margin-top: 40px;
border-radius: 5px;
color: #fff;
}
@media (max-width: 700px) {
.home_hero h1 {
font-size: 40px;
}
.home_hero p {
font-size: 16px;
}
}
</style>Per creare un percorso annidato in SvelteKit, ad esempio una pagina informativa accessibile all’indirizzo localhost:5173/about, dovrete creare una cartella all’interno della cartella routes con un nome che rappresenti il percorso dell’URL. All’interno di questa cartella, create un file +page.svelte da renderizzare per il percorso.
Aggiungete il seguente codice a routes/about/+page.svelte:
<div class="about_cont">
<h2>About</h2>
<div class="about_info">
<div class="about_text">
<p>
Kinsta allows you to{' '}
<a> href="https://kinsta.com/static-site-hosting/">
host up to 100 static websites
</a>{' '}
for free. This can be done by pushing your code to your preferred Git provider
(Bitbucket, GitHub, or GitLab) and then deploying it to Kinsta.
</p>
<p>
As an alternative to Static Site Hosting, you can opt for deploying your
static site with Kinsta’s{' '}
<a> href="https://kinsta.com/application-hosting/">
Application Hosting
</a>
, which provides greater hosting flexibility, a wider range of benefits,
and access to more robust features. For example, scalability, customized
deployment using a Dockerfile, and comprehensive analytics encompassing real-time
and historical data.
</p>
</div>
<iframe> 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> </iframe>
</div>
</div>
<style>>
.about_cont h2 {
font-size: 40px;
margin-bottom: 20px;
}
.about_info {
display: flex;
width: 100%;
justify-content: space-between;
gap: 20px;
}
@media (max-width: 700px) {
.about_info {
flex-direction: column;
}
}
.about_text {
flex-basis: 50%;
}
.about_text p {
margin-bottom: 20px;
font-size: 18px;
}
.about_img {
flex-basis: 50%;
width: 200px;
border-radius: 10px;
}
@media (max-width: 700px) {
.about_info {
flex-direction: column;
}
.about_img {
width: 100%;
}
}
</style>Qualsiasi stile aggiunto al componente Svelte ha uno scopo e non influisce sugli altri componenti.
È fondamentale capire che SvelteKit gestisce la navigazione tra le pagine utilizzando gli elementi standard <a>, rendendo il processo di navigazione intuitivo. Non c’è bisogno di importare componenti aggiuntivi come <Link>, come richiesto da React. Nella prossima sezione creeremo un componente di navigazione da aggiungere a ogni pagina.
Per il progetto attuale, la struttura del percorso è la seguente:
|-- /src
|-- /routes
|-- /about
|-- +page.svelte
|-- +page.svelteUsare i componenti in SvelteKit
Per rendere il codice più modulare, potete creare dei componenti e importarli nelle pagine. Ad esempio, potete creare un componente Navbar.svelte nella cartella routes:
<!-- src/routes/Navbar.svelte -->
<nav>
<a href="/">
<img src="/kinsta-logo.png" alt="" class="logo-img" />
</a>
<div class="nav-links">
<a href="/">Home</a>
<a href="/about">About</a>
<a href="/posts">Posts</a>
</div>
</nav>Poi, importatelo nella homepage +page.svelte in questo modo:
<!-- src/routes/+page.svelte -->
<script>>
import Navbar from './Navbar.svelte'
</script>
<Navbar />
<div class="home_hero">
<h1>Enjoy Static Site Hosting With Kinsta.</h1>
<p>Fast, Secure, Reliable Hosting Solution.</p>
<a href="https://kinsta.com/static-site-hosting">
<div> class="btn">Read more</div>
</a>
</div>
<style>
/* CSS styles */
</style>Per i componenti globali come Navbar e Footer, che vengono utilizzati in più file, createli nella cartella src/lib per evitare lunghi percorsi di importazione. Quando create componenti o moduli nella cartella lib, potete importarli comodamente in qualsiasi componente usando l’alias $lib import:
<script>
import Navbar from '$lib/Navbar.svelte'
</script>Per utilizzare componenti indipendenti, ad esempio, supponiamo che vi serva un componente solo per la pagina About, createlo all’interno del percorso routes/about e poi importalo nella pagina.
Per questo progetto, potete anche creare un componente Footer nella cartella lib e aggiungere questo codice:
<div class="footer">
<p>
Hosted with ❤️ by Kinsta's{' '}
<a> href="https://kinsta.com/static-site-hosting">Static Site Hosting</a>
.
</p>
</div>Quindi, importatelo in tutte le pagine.
Usare il layout in SvelteKit
Per evitare di importare componenti in molte pagine, SvelteKit permette di definire dei layout per le tue pagine utilizzando i file +layout.svelte.
Creare un layout che si applichi a ogni pagina è semplice. Create un file chiamato src/routes/+layout.svelte e personalizzatelo con il markup, gli stili e i comportamenti desiderati. Il requisito fondamentale è quello di includere un elemento per ospitare il contenuto della pagina.
Ad esempio, potete integrare i componenti Navbar e Footer in questo layout:
<script>
import Navbar from '$lib/Navbar.svelte';
import Footer from '$lib/Footer.svelte';
</script>
<div class="layout">
<Navbar />
<slot />
<Footer />
</div>L’elemento <slot> permette di inserire il contenuto di ogni pagina nel layout.
I layout possono anche essere annidati per pagine specifiche. Ad esempio, se avete una pagina /dashboard con pagine annidate come /profile e /settings, potete creare un layout speciale:
|-- /dashboard
|-- /profile
|-- +page.svelte
|-- /settings
|-- +page.svelte
|-- +layout.svelteNavigazione programmatica in SvelteKit
SvelteKit fornisce una funzione goto per la navigazione programmatica. Ad esempio, per navigare alla pagina /dashboard dopo un’azione di login:
<script>
import { goto } from '$app/navigation';
async function login() {
// Perform login action
goto('/dashboard');
}
</script>Stilizzazione in SvelteKit
SvelteKit supporta i CSS tradizionali per lo styling delle pagine. Gli stili possono essere definiti all’interno dei componenti Svelte utilizzando il tag <style>, oppure potete scegliere di collegare fogli di stile esterni.
Potreste notare che i componenti Navbar e Footer non hanno stili specifici. Per risolvere questo problema, è buona norma applicare uno stile globale. Questo si può ottenere creando un file CSS all’interno della cartella src e importandolo nel file di layout principale.
Per una migliore organizzazione, create una cartella styles all’interno della cartella src. Questa cartella può contenere tutti gli stili. Come parte di questo progetto, create un file global.css nella cartella styles e aggiungete il seguente codice:
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #ddd;
font-family: 'Poppins',
sans-serif;
width: 1200px;
margin: 0 auto;
}
a {
text-decoration: none;
}
img {
width: 100%;
}
nav {
display: flex;
justify-content: space-between;
height: 200px;
align-items: center;
}
nav .logo-img {
width: 100px;
}
nav .nav-links a {
padding: 0 20px;
font-size: 18px;
}
@media (max-width:700px) {
body {
width: 100%;
padding: 0 20px;
}
nav .nav-links a {
padding: 0 18px;
}
}
.footer {
width: 100%;
text-align: center;
margin: 100px 0 20px;
}Potete quindi importare il file CSS nel file di layout in modo che sia globale e funzioni per tutti i file:
<script>>
import Navbar from '$lib/Navbar.svelte';
import Footer from '$lib/Footer.svelte';
import '../styles/global.css';
</script>Caricare i dati con SvelteKit
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 +page.js per le pagine e +layout.js per i layout.
Nel progetto SvelteKit, un file +page.svelte può avere un fratello +page.js che esporta una funzione di caricamento. Il valore di ritorno di questa funzione viene reso disponibile alla pagina attraverso il prop data. Facciamo un esempio: supponiamo che vogliate creare una route per recuperare un elenco di post dall’API JSON Placeholder.
Per caricare i dati dall’API, create un file +page.js nella cartella posts. Questo file esporta una funzione load.
export const load = async () => {
const title = "Hello World";
return {
title,
};
};La funzione load dovrebbe restituire un oggetto, che viene fornito come props al file +page.svelte. Il valore title può essere consultato con il prop data:
<script>>
export let data;
const title = data.title;
</script>
<div class="blog_cont">
<h2>{title}</h2>
</div>Ora passiamo all’interazione con l’API JSON Placeholder posts. Per farlo, potete utilizzare l’API JavaScript Fetch, ma SvelteKit offre il proprio metodo fetch che potete utilizzare per recuperare i dati dagli endpoint dell’API prima del rendering della pagina:
export const load = async (loadEvent) => {
const { fetch } = loadEvent;
const response = await fetch(
'https://jsonplaceholder.typicode.com/posts?_limit=10'
);
const posts = await response.json();
return {
posts,
};
};Nel codice qui sopra, estraiamo il metodo fetch da loadEvent ed effettuiamo la richiesta API. La risposta viene poi inviata come props alla pagina Posts, che visualizza tutti i post:
<script>
export let data;
const posts = data.posts;
</script>
<div class="blog_cont">
<h2>Posts</h2>
<div class="blog_grid">
{#each posts as post}
<a href={`/posts/${post.id}`} class="blog_card">
<h3>{post.title}</h3>
<p>
{post.body}
</p>
</a>
{/each}
</div>
</div>
<style>
.blog_cont h2 {
font-size: 40px;
margin-bottom: 20px;
}
.blog_grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
}
@media (max-width: 700px) {
.blog_grid {
grid-template-columns: 1fr;
}
}
.blog_card {
background-color: #bfbfbf;
padding: 20px;
border-radius: 5px;
color: #000;
transition: all 0.5s ease-in-out;
}
.blog_card:hover {
background-color: #5333ed;
color: #fff;
}
.blog_card h3 {
margin-bottom: 15px;
}
.blog_card p {
margin-bottom: 15px;
}
</style>Ecco come appare l’albero dei file corrente:
|-- /src
|-- /lib
|-- Footer.svelte
|-- Navbar.svelte
|-- /routes
|-- /about
|-- +page.svelte
|-- /posts
|-- +page.js
|-- +page.svelte
|-- +page.svelte
|-- +layout.svelte
|-- /styles
|-- global.cssPercorsi dinamici con SvelteKit
Ora avete 10 post visualizzati nella pagina dei post; se volete creare una pagina individuale per ogni post, il modo migliore per farlo è creare un percorso dinamico.
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:
- Create una cartella [postid] all’interno della cartella posts. [postid] rappresenta il parametro dinamico che può contenere valori come gli ID dei post o gli slug.
- Nella cartella [postid], create due file:
- +page.svelte: questo file definirà il layout e la struttura delle pagine dei singoli post.
- +page.js: questo file JavaScript gestirà il reperimento dei dati e la logica specifica dei singoli post.
Nel file +page.js, recuperate il parametro postid dalla route e usatelo per interrogare il post specifico:
export const load = async (loadEvent) => {
const { fetch, params } = loadEvent;
const { postid } = params;
const response = await fetch(
`https://jsonplaceholder.typicode.com/posts/${postid}`
);
const post = await response.json();
return {
post,
};
};Potrete quindi accedere al parametro data come oggetto nel file +page.svelte:
<script>>
export let data;
const post = data.post;
</script>
<div>
<div class="blog_content">
<h3>{post.title}</h3>
<p>{post.body}</p>
</div>
</div>
<style>>
.blog_content h3 {
font-size: 40px;
margin-bottom: 20px;
text-align: center;
}
</style>Potete consultare il codice sorgente completo di questo progetto SvelteKit su GitHub. Potete anche consultare la documentazione ufficiale di SvelteKit per maggiori informazioni.
Distribuire i siti statici SvelteKit con Kinsta
Kinsta permette di ospitare fino a 100 siti web statici gratis, direttamente dal vostro provider Git preferito (Bitbucket, GitHub o GitLab).
Prima di iniziare a distribuire il vostro sito SvelteKit, è importante adattarlo al vostro obiettivo di distribuzione. In questo progetto particolare, ci stiamo concentrando sull’utilizzo dell’Hosting di Siti Statici di Kinsta, che richiede la configurazione di SvelteKit come generatore di siti statici (SSG).
Ecco come ottenere un sito prerenderizzato come una raccolta di file statici:
- Installate @sveltejs/adapter-static eseguendo il seguente comando:
npm i -D @sveltejs/adapter-static- Successivamente, adattate il file svelte.config.js sostituendo
adapter-autoconfallbacke404.html:
import adapter from '@sveltejs/adapter-static';
const config = {
kit: {
adapter: adapter({ fallback: '404.html' }),
},
};
export default config;A questo punto, inviate il codice al vostro provider Git preferito. Quindi, seguite questi passaggi per distribuire il vostro sito statico su Kinsta:
- Accedete o create un account per visualizzare la dashboard MyKinsta.
- Autorizzate Kinsta dal provider Git.
- Cliccate su Siti statici nella barra laterale di sinistra e poi su Aggiungi sito.
- Selezionate il repository e il branch da cui desiderate effettuare il deploy.
- Assegnate un nome unico al sito.
- Aggiungete le impostazioni di build nel seguente formato:
- Comando di build:
npm run build - Versione Node:
18.16.0 - Directory di pubblicazione:
build
- Comando di build:
- Infine, cliccate su Crea sito.
E il gioco è fatto! In pochi secondi avrete un sito distribuito, e riceverete un link per accedere alla versione distribuita del vostro sito. In seguito potrete aggiungere un dominio personalizzato e il vostro certificato SSL, se lo desiderate.
In alternativa all’hosting statico, potete scegliere di distribuire il sito statico con l’Hosting di Applicazioni di Kinsta, che offre una maggiore flessibilità di hosting, una gamma più ampia di vantaggi e l’accesso a funzioni più robuste. Ad esempio, la scalabilità, la distribuzione personalizzata tramite un file Docker e l’analisi completa dei dati storici e in tempo reale.
Riepilogo
Questa guida ha spiegato come creare un sito statico con SvelteKit. Dalla configurazione dell’ambiente di sviluppo alla distribuzione, ora avete le conoscenze necessarie per creare siti statici ad alte prestazioni con facilità.
La creazione di siti statici con SvelteKit offre un mix perfetto di prestazioni e semplicità, assicurando che i vostri progetti web brillino su internet.
Ora è il momento di mettere in pratica le vostre conoscenze e iniziare a costruire il vostro sito statico con SvelteKit. Avete già utilizzato SvelteKit in passato? Non esitate a condividere i vostri progetti e le vostre esperienze nella sezione commenti qui sotto.
Lascia un commento