Questo Sito
Un sito data-driven dove foto, tracce GPS e dati geografici diventano pagine web. Da YAML strutturati a HTML statico, passando per Python e Astro.
Live
alessiogoria.com non è un template. È un sistema dove i dati delle mie esperienze — foto, tracce GPS, coordinate, metadati — diventano pagine web automaticamente. Questa è la storia di come è stato costruito.
L'evoluzione
Versione 1: sito statico con HTML scritto a mano. Versione 2: React SPA con routing client-side. Versione 3 (attuale): migrazione completa ad Astro 4 SSG con React islands. Zero JavaScript per i contenuti, idratazione solo dove serve (galleria, navigazione). Risultato: Lighthouse 95+, SEO perfetto, tempi di caricamento sotto il secondo.
Architettura data-driven
I contenuti vivono in file YAML strutturati: 22 viaggi, 20+ uscite montagna, ciascuno con metadati completi (coordinate, date, foto, descrizioni bilingue). Script Python trasformano i YAML in JSON ottimizzati. Astro genera una pagina HTML statica per ogni contenuto a build time. Nessun database in produzione per i contenuti: tutto è pre-compilato.
Admin Panel
Per la gestione dei contenuti ho costruito un pannello admin completo: React SPA con autenticazione JWT e hashing PBKDF2, form strutturati generati da schema, upload immagini con drag & drop su Netlify Blobs, coda revisioni per editor, gestione utenti con ruoli e permessi per sezione. Il backend usa Netlify Functions v2 con database Turso (libsql serverless).
Pipeline contenuti
Il flusso è: YAML sorgente → script Python (build_content.py) → JSON in content-data/ → Astro getStaticPaths() → HTML statico. Le foto passano per ottimizzazione automatica. Le traduzioni IT/EN sono gestite da un sistema i18n dedicato. Il sitemap viene generato automaticamente. Tutto il processo è riproducibile con un singolo comando.
Bilingue nativo
Ogni pagina esiste in italiano e inglese con URL dedicati (/viaggi/giappone-2025 e /en/viaggi/giappone-2025). Le traduzioni dell'interfaccia sono centralizzate in un file translations.js. I contenuti hanno campi _it e _en in ogni YAML. Il language toggle mantiene la posizione nella pagina. I tag hreflang garantiscono l'indicizzazione corretta.