Se vuoi un sito di una sola pagina e con poche semplici funzioni, con gli strumenti gratuiti oggi a disposizione puoi farlo in completa autonomia.
In questa guida farò un esempio in pochi semplici passi di come è possibile realizzare un semplice sito in HTML e pubblicarlo usando un LLM, cioè una intelligenza artificiale come ChatGPT, e altri servizi gratuiti e abbastanza intuitivi.
Attenzione: se vuoi pubblicare il tuo sito su un dominio personalizzato, ad es. www.ilmiosito.com, dovrai necessariamente sostenere la spesa dell’acquisto del dominio, che può variare da pochi euro fino a centinaia. Vedi la mia guida: come scegliere il dominio da acquistare.
Prima di iniziare: prepara il contenuto
È meglio non lasciare scegliere tutto alla IA. Preparati un documento di testo, anche un semplice blocco note, e butta giù una bozza di quali cose vuoi dire sul tuo sito. È preferibile dividere già il testo in più blocchi. La IA lo può correggere, espandere, revisionare e proporre cambiamenti.
Puoi incollarlo nella chat con la IA e chiedere sia piccole correzioni sia di generare interi testi, per esempio:
“Correggi questi testi per il mio sito web, ma non cambiare il tono e il ritmo di quello che ho scritto”
oppure:
“Genera dei testi per il mio sito parlando di queste cose: [tuo testo]”
In questo modo la IA non dovrà inventare il contenuto, ma solo rimodellarlo per renderlo più adatto ad un sito web. Non devi per forza accontentarti del primo output, a volte ci vogliono diversi tentativi prima di arrivare a un risultato soddisfacente.
Creazione del sito
Il primo step è decidere il layout, quindi la posizione degli elementi sul sito, i colori e lo stile che vuoi. Non devi inventare nulla: basta fare un giro sul web, cercare un sito che ti piace e usarlo come riferimento e ispirazione. Fornisci alla IA il sito da usare come riferimento, i colori che vuoi ed eventuali altri dettagli. Più precise sono le indicazioni, più il risultato si avvicinerà a quello che hai in mente.
Inizia il prompt scrivendo: “Genera un file HTML per la homepage del mio sito web. [inserisci specifiche, riferimenti, descrizioni, indicazioni, colori ecc.]”
Dovrai attendere un po’. Una volta scaricato il file in output puoi aprirlo nel browser per controllare come è venuto. Mentre lo guardi, scrivi una nota con tutto quello che noti da sistemare. Quando hai finito, rispondi alla IA con un prompt simile a questo:
“Fai delle modifiche all’HTML del mio sito. Ecco le cose da correggere: […]”
Ripeti questo processo finché il risultato non ti soddisfa. A quel punto, il file del sito è completo e va solamente pubblicato.
Pubblicare il sito
A questo punto hai il tuo file HTML e devi semplicemente metterlo online. Esistono diversi servizi che permettono di pubblicare gratuitamente un sito statico, cioè un sito composto principalmente da file HTML, CSS e immagini. In questa guida userò Netlify, perché per un sito semplice è abbastanza intuitivo e permette di caricare direttamente i file senza dover configurare un server.
Crea un account gratuito su Netlify e scegli l’opzione per aggiungere un nuovo sito caricando manualmente i file. Prima di farlo controlla che il file della homepage si chiami index.html: se la IA gli ha dato un altro nome, puoi semplicemente rinominarlo. Crea poi una cartella sul computer, metti al suo interno index.html ed eventuali altri file che fanno parte del sito e carica l’intera cartella su Netlify.
Una volta completato il caricamento, Netlify pubblicherà il sito e gli assegnerà automaticamente un indirizzo gratuito che sarà simile a nomedelsito.netlify.app. Aprilo dal browser e controlla che tutto funzioni come nell’anteprima che avevi sul computer. Se il sito si vede correttamente, a questo punto è online e puoi già condividere il link con altre persone.
Fare modifiche in seguito
Conserva sempre sul computer la cartella con i file del sito, perché sarà quella che modificherai in futuro. Se vuoi cambiare un testo, aggiungere una sezione o sistemare qualcosa nella grafica, puoi caricare nuovamente il file nella chat con la IA e spiegare cosa vuoi modificare, nello stesso modo in cui hai fatto durante la creazione iniziale.
Per esempio puoi scrivere:
“Modifica questo HTML sostituendo il testo della sezione Chi sono con questo: […]. Non cambiare nient’altro.”
oppure:
“Da smartphone questa sezione occupa troppo spazio. Rendila più compatta, ma mantieni invariata la versione desktop.”
Anche in questo caso controlla sempre il nuovo file nel browser prima di pubblicarlo. Quando il risultato ti convince, puoi aggiornare il sito su Netlify caricando la nuova versione. Esistono anche sistemi più comodi per aggiornare automaticamente il sito ogni volta che cambiano i file, ma per iniziare e per un sito che viene modificato solo ogni tanto non è necessario complicare le cose.
Usare un dominio personalizzato
Se non vuoi utilizzare l’indirizzo gratuito fornito da Netlify e preferisci qualcosa come www.ilmiosito.it, devi acquistare un dominio e collegarlo al sito. Il dominio e lo spazio che ospita il sito sono due cose diverse: in questo caso Netlify può continuare a ospitare gratuitamente i file, mentre quello che paghi è il diritto di utilizzare quel determinato indirizzo.
Il collegamento del dominio richiede qualche passaggio in più, ma normalmente il servizio da cui acquisti il dominio e Netlify forniscono tutte le informazioni necessarie. Se non hai mai fatto questa operazione, ti consiglio prima di leggere la mia guida su come scegliere e acquistare un dominio, perché ci sono alcune cose che è meglio sapere prima di comprarne uno.
Cosa si può fare con un sito di questo tipo?
Questo metodo è particolarmente adatto se vuoi creare un sito semplice: una pagina di presentazione, il sito di una piccola attività, un portfolio, una landing page o comunque qualcosa che serve principalmente a mostrare informazioni. La IA può aggiungere senza troppi problemi anche menu, animazioni, gallerie di immagini, pulsanti e diverse piccole interazioni.
Se invece vuoi funzioni più complesse, per esempio creare account per gli utenti, salvare informazioni in un database, gestire pagamenti o realizzare un’area riservata, il procedimento diventa inevitabilmente un po’ più complicato. La IA può comunque aiutarti a costruire queste cose, ma iniziano a entrare in gioco altri servizi e soprattutto aspetti legati alla sicurezza che è meglio capire prima di pubblicare tutto alla cieca.
Controlla il sito prima di considerarlo finito
Prima di fermarti, prova il sito almeno da computer e da smartphone. Controlla tutti i pulsanti e i link, assicurati che il testo sia leggibile, che le immagini vengano caricate correttamente e che non ci siano elementi che da telefono escono dallo schermo o si sovrappongono.
Se trovi qualche problema, cerca di descriverlo alla IA nel modo più preciso possibile. Scrivere “da telefono è brutto” lascia moltissimo spazio all’interpretazione, mentre una richiesta come “da telefono il titolo è troppo vicino al bordo e il pulsante occupa quasi tutta la larghezza dello schermo” indica chiaramente cosa deve essere sistemato. Come durante la creazione iniziale, più precise sono le richieste e più sarà facile ottenere il risultato che vuoi.
A questo punto hai realizzato e pubblicato un piccolo sito senza dover imparare a programmare prima di iniziare e senza necessariamente pagare un servizio per costruirlo. Questo metodo va benissimo per progetti semplici e per chi vuole iniziare a capire come funzionano i file di un sito e la pubblicazione online. Se il progetto cresce, raccoglie dati, deve gestire pagamenti o diventa una parte importante del tuo lavoro, vale la pena approfondire la parte tecnica oppure farsi aiutare.