Per i più curiosi

Se sei arrivato fin qui, probabilmente sei uno di quelli che guarda il codice sorgente delle pagine web. Complimenti, sei dei nostri! 🎉

Questa pagina racconta come è costruito il sito della Strabareggia — niente tutorial o documentazione tecnica, solo una chiacchierata su come funziona il tutto dietro le quinte. Perché anche una gara podistica di quartiere merita un sito fatto come si deve.

L'architettura

Il sito gira interamente su Microsoft Azure e non ha bisogno di nessun server tradizionale. Ecco i pezzi del puzzle:

  • Azure Static Web App — ospita tutto il sito: pagine HTML, CSS, JavaScript, immagini. È velocissima perché serve file statici da una CDN globale.
  • Azure Blob Storage — qui vivono le migliaia di foto delle gallery. Uno storage separato, pensato per file pesanti, con costi ridottissimi.
  • Azure Function — una piccola funzione serverless che si sveglia solo quando qualcuno usa il chatbot in modalità intelligente. Zero costi quando non viene usata.
  • OpenAI (GPT-4o mini) — il cervello dietro al chatbot Sherpa, che risponde alle domande sulla gara in modo naturale e preciso.

Schema dell'architettura — tutto serverless, tutto su Azure.

Il sito

Il sito è generato con Eleventy (11ty), un generatore di siti statici basato su Node.js. In pratica, scriviamo i contenuti in HTML e Markdown, e Eleventy li compila in pagine statiche pronte per essere servite.

Le news sono scritte in Markdown — un formato di testo semplice che chiunque può editare — e vengono automaticamente trasformate in pagine HTML con il layout del sito. Le gallery sono generate dinamicamente a partire da un file JSON che descrive le foto disponibili.

Tutto il codice è su GitHub e ogni volta che facciamo una modifica, una pipeline automatica (GitHub Actions) ricompila il sito e lo pubblica in pochi secondi. Zero deploy manuali, zero stress.

Le immagini

Ogni immagine del sito è stata ottimizzata nel formato WebP, un formato moderno che pesa fino al 30% in meno rispetto al classico JPEG, mantenendo la stessa qualità visiva. Il risultato? Pagine che si caricano in un lampo, anche da mobile con connessione ballerina.

Le foto della hero in homepage — quelle grandi che scorrono in alto — sono state elaborate con l'intelligenza artificiale per renderle più cinematografiche ed epiche. L'originale è sempre una vera foto della Strabareggia, ma l'AI ci ha dato una mano a farla brillare un po' di più. 🎬

Il chatbot Sherpa

Sherpa — il nostro assistente virtuale in basso a destra — è un mix di due anime:

  • Da giugno a metà settembre (quando il sito è più visitato, vicino alla gara), Sherpa usa GPT-4o mini di OpenAI per capire le domande e rispondere in modo naturale e conversazionale. Tutte le informazioni che usa vengono esclusivamente dal contenuto del sito — non inventa nulla.
  • Il resto dell'anno, per contenere i costi, Sherpa usa un motore di ricerca locale costruito con TF-IDF e uno stemmer italiano semplificato. Funziona tutto nel browser, senza chiamate esterne.

Il nome Sherpa è un omaggio a Vico Motta, il fondatore della Strabareggia, super appassionato di montagna. Scopri la sua storia →

Ah, e se provate a chiedergli qualcosa che non c'entra con la Strabareggia... beh, ci ha provato già qualcuno. Non ci casca. 😄

E quanto costa?

Tutto è stato sviluppato con una fortissima attenzione ai costi ricorrenti. Sembra incredibile, ma tutto quello descritto sopra costa quasi 0€ all'anno.

Azure Static Web App ha un piano gratuito più che sufficiente. Il Blob Storage costa frazioni di centesimo per le foto che ospitiamo. L'Azure Function non costa nulla quando nessuno la usa — e quando la usa, parliamo di millesimi di euro a richiesta.

L'unico vero costo vivo è per i servizi di OpenAI che alimentano il chatbot Sherpa — ma parliamo di pochi euro all'anno. Il chatbot intelligente è attivo solo nei mesi estivi, e il resto dell'anno il motore di ricerca locale gira nel browser gratis.

In pratica, una gara podistica di quartiere ha un'infrastruttura cloud seria, moderna e scalabile — al prezzo di un caffè all'anno. ☕

Ti piace quello che vedi?

Tutto quello che hai letto in questa pagina — il sito, il chatbot, le gallery, l'infrastruttura cloud — è stato progettato e sviluppato da una sola persona. Se sei un'azienda (o un'associazione, o chiunque abbia un'idea) e vuoi costruire qualcosa di simile — o anche molto più complesso, eh... — il nostro engineer è disponibile per una chiacchierata.

📬 Scrivimi