Il percorso più
veloce: prompt → sito live
Claude genera artefatti HTML interattivi direttamente in chat. Netlify li pubblica in 2 minuti con drag and drop. Insieme formano il percorso più rapido per portare online qualsiasi contenuto HTML senza toccare il terminale, senza Git, senza configurazione server.
Landing page da mostrare a un cliente. Guida didattica da condividere con gli studenti. Portfolio personale. Strumento interattivo HTML. Qualsiasi contenuto che Claude può generare come artefatto HTML in una conversazione — pubblicato in meno di 5 minuti.
Il flusso completo
Cosa sono gli
artefatti HTML
Gli artefatti sono contenuti separati dalla chat che Claude genera in un pannello dedicato — documenti Markdown, codice, componenti React, SVG, visualizzazioni interattive e file HTML completi.
| Tipo artefatto | Estensione | Pubblicabile su Netlify |
|---|---|---|
| Pagina HTML completa | .html | ✅ Sì — direttamente |
| Componente React (JSX) | .jsx | ⚠️ Richiede build step |
| Markdown | .md | ⚠️ Converte in HTML prima |
| SVG | .svg | ✅ Come immagine |
Nella chat con Claude specifica esplicitamente: "Crea come artefatto HTML standalone" oppure "Genera un file HTML completo con CSS incluso". Claude capisce la distinzione tra una risposta testuale e un artefatto pubblicabile — se non specifica il tipo di output, potrebbe rispondere solo con il codice inline nel testo della chat.
Scaricare il file
dall'artefatto
Una volta che Claude ha generato l'artefatto HTML, scaricarlo è semplice — l'interfaccia di Claude.ai include un pulsante di download direttamente nel pannello artefatto.
Se il pulsante di download non è visibile, clicca "Copy code" sull'artefatto, apri un editor di testo (Blocco note, TextEdit, VS Code), incolla il codice e salva il file con estensione .html (es. index.html). Assicurati che l'editor salvi come testo semplice, non come .txt.
Trascina e pubblica
con Netlify Drop
Netlify Drop è la funzione di deployment più semplice di Netlify — trascini una cartella o un file HTML direttamente nel browser e il sito va live immediatamente, senza account obbligatorio.
Netlify Drop richiede una cartella come input, non un singolo file. Crea una cartella (es. "mio-sito"), metti dentro index.html e tutti gli asset collegati, poi trascina la cartella intera. Se trascini solo index.html, Netlify potrebbe non riconoscerlo correttamente come sito.
Il sito è online
con HTTPS automatico
Dopo il drop, Netlify assegna immediatamente un URL pubblico accessibile da chiunque nel mondo, con HTTPS già attivo — nessuna configurazione richiesta.
| URL | Formato | Esempio |
|---|---|---|
| Default Netlify | nome-casuale.netlify.app | fuzzy-panda-abc123.netlify.app |
| Nome personalizzato Netlify | tuonome.netlify.app | marco-portfolio.netlify.app |
| Dominio personalizzato | tuodominio.it | marcoconsiglio.it |
Cambiare il nome del sito Netlify
Nell'account Netlify → Site settings → General → Site details → "Change site name". Puoi usare qualsiasi nome non già preso — da fuzzy-panda-abc123 a marco-portfolio. L'URL diventa subito tuonome.netlify.app.
Collegare il tuo
dominio personalizzato
Puoi trasferire la gestione DNS direttamente a Netlify — cambia i nameserver del dominio ai nameserver Netlify, e Netlify gestisce tutto automaticamente inclusi i record per il sito e per le email. Più semplice ma richiede di trasferire il controllo DNS a Netlify.
Form di contatto
senza backend
Una delle funzioni più utili di Netlify per i siti statici: i form HTML funzionano senza nessun backend — Netlify raccoglie automaticamente le submission e le invia via email.
<form name="contatto" method="POST" data-netlify="true"> <input type="hidden" name="form-name" value="contatto"> <input type="text" name="nome" placeholder="Il tuo nome" required> <input type="email" name="email" placeholder="Email" required> <textarea name="messaggio" placeholder="Messaggio"></textarea> <button type="submit">Invia</button> </form>
Nell'artefatto HTML chiedi a Claude: "Aggiungi un form di contatto con attributo data-netlify=true e il campo hidden form-name — deve funzionare su Netlify senza backend". Claude sa come strutturare i form Netlify-ready.
Il piano gratuito di Netlify include 100 submission di form al mese. Per volumi più alti o integrazioni (Slack, webhook) serve il piano Pro ($19/mese).
Pubblicare
aggiornamenti
Con Netlify ci sono due modi per aggiornare il sito: drag and drop di una nuova cartella, oppure collegamento a GitHub per deploy automatici.
Metodo 1 — Nuovo drag and drop
Genera la versione aggiornata con Claude, scarica il file HTML, sostituiscilo nella cartella locale, poi trascina di nuovo la cartella su Netlify nello stesso sito (Site overview → Deploys → Drag and drop). Netlify fa il deploy della nuova versione mantenendo URL e dominio.
Metodo 2 — Collega GitHub (consigliato)
In Site settings → Build and deploy → Link to Git. Collega il repository GitHub che contiene il sito. Da quel momento ogni push su main fa il deploy automaticamente — il metodo più professionale per siti che aggiornano frequentemente.
Netlify mantiene la cronologia di tutti i deploy. Se una nuova versione ha problemi, vai in Deploys → seleziona il deploy precedente → "Publish deploy". Il sito torna alla versione precedente in secondi.
Da zero a
sito live in 5 minuti
- In una chat con Claude, scrivi: "Crea un artefatto HTML standalone — una landing page per un corso di AI con hero, 3 caratteristiche e un form di contatto con data-netlify=true."
- Quando l'artefatto appare, clicca il pulsante di download. Rinominalo index.html.
- Crea una cartella "mio-corso-ai" sul desktop, metti index.html dentro.
- Vai su app.netlify.com/drop e trascina la cartella nella zona di drop.
- Aspetta 30 secondi, copia l'URL assegnato — il sito è live. Aprilo in una scheda in incognito per verificare.
- Crea un account gratuito su Netlify e rivendica il sito creato nell'Esercizio 1.
- In Site settings → General → Change site name: imposta un nome leggibile (es. marco-corso-ai).
- Vai in Domain management → Add custom domain → inserisci il tuo dominio.
- Configura i record DNS al tuo registrar seguendo le istruzioni di Netlify.
- Compila e invia il form di contatto del sito — vai in Forms su Netlify per verificare che la submission sia stata ricevuta.