Intro
La maggior parte del web si basa, nel 2023, su CMS (Content Management System, strumenti e interfacce per gestire siti anche senza scrivere una linea di codice): Wordpress domina, seguono in qualche ordine Joomla, Drupal e altre incarnazioni meno diffuse.
Sono perfettamente in grado di soddisfare determinate richieste, permettendo la creazione di siti di alto livello, in grado di offrire un ampio numero di funzionalità.
Wordpress, l'unico che abbia provato, è pure facilmente utilizzabile senza conoscenze di codice, semplicemente componendo il sito coi blocchi predefiniti , offerti dall'editor interno o dal celeberrimo plugin Elementor. Esistono, infatti, plugin per tutti i gusti, capaci di espandere il pacchetto base in maniera impressionante.
Discorso totalmente differente la creazione di un sito cucito professionalmente sulle esigenze del committente: in tal caso, bisogna mettere mano al codice.
Il rovescio della medaglia è dato dalla complessità intrinseca di queste soluzioni, per di più basate su un database. Le pagine del sito sono, detto in maniera molto basilare (in linea con le mie competenze), elaborate al momento, assemblando i dati contenuti del database, quindi servite.
Una complessità inutile in molti casi. Sicuramente, inutile per questo sito.
I siti statici
Sono quelli che servono pagine già fatte e finite, senza doverle estrapolare da un database. Sono siti tendenzialmente molto veloci e meno impegnativi, sia per il server che per i browser.
Certo, con dispositivi sufficientemente moderni e linee molto veloci non è detto che tale differenza sia immediatamente percepibile, ma su un vecchio pc/telefonino, con poca banda a disposizione, questa differenza è evidente.
Cosa serve per realizzare un sito statico, in ordine?
Un editor di testo qualsiasi, competenze base di codice (MarkDown, nel mio caso)
Un mago del codice, probabilmente, potrebbe realizzare un sito complicatissimo in maniera pregevole usando il solo editor di testo di default del sistema operativo, ma un mago del codice sicuramente non starà qui a leggermi, quindi posso permettermi qualche leggerezza.
Il programma di default sui sistemi Windows è il classico, attempato notepad.exe: sarebbe sufficiente, come dicevo, ma è meglio dotarsi di sistemi più moderni e dotati delle funzioni necessarie a velocizzare la procedura.
Non uso praticamente più Windows, se non per finalità molto specifiche: in ogni caso, il mio editor di default per questo sistema è Notepad++
Su Linux, invece, ahimé non esiste nativamente, bisognerebbe avviarlo con Wine; ho ripiegato, quindi, su un alternativa molto leggera, seppure dalle funzionalità molto più limitate: Geany.
Non essendo un utente evoluto di Notepad++, Geany si è rivelato un sostituto quasi perfetto, con un piacevole bonus: la possibilità di tenere aperto un terminale all'interno del programma stesso, molto pratico per testare il codice al volo.
Uso MarkDown, tanto semplice quanto efficace. Semplici file di testo con una sintassi di base davvero facile da memorizzare, ma in grado di offrire ampie possibilità di formattazione delle pagine. Se non conoscete, date un'occhiata al link in calce, pochi minuti e sarete operativi.
Bene, una volta capito come dar forma alle nostre pagine, che farne? Semplice: darle in pasto a un generatore di siti statici.
Hugo
Eccone uno, tra i più usati, pure l'unico che abbia provato: Hugo soddisfa le mie esigenze attuali. Sul funzionamento trovate miriadi di tutorial in rete, quindi non starò a spiegarne indegnamente il funzionamento: mi limiterò a una infarinatura sul concetto alla base di questi sistemi.
Hugo permette di generare, da linea di comando, lo scheletro di un sito a cui dare un'apparenza grazie ai numerosi temi disponibili in rete. Questi temi contengono le definizioni visive di tutte le componenti del sito finito e possono essere modificati a piacimento,sapendo metterci le mani; diversamente, basta modificare un file di configurazione nella cartella principale del sito e aggiungere dei contenuti, come dicevamo prima in formato .md, MarkDown, nelle cartelle designate.
Fatti ciò, sempre da riga di comando avviamo Hugo in modalità server, in modo da poter visualizzare nel browser il sito come sarà una volta pubblicato in rete.
Aggiunti i contenuti, terminate le modifiche, possiamo generare il codice finale del sito: html, eventuali css e js, insomma tutto quello che vede il browser e che noi vediamo come sito pubblicato.
Pubblicato, bene... ma dove pubblicare, appunto, questo codice? Tenercelo in locale non ci servirà a nulla, abbiamo bisogno di una infrastruttura che lo ospiti e lo renda disponibile all'esterno, con un indirizzo raggiungibile dai potenziali visitatori. Certo, potremmo anche ospitarlo su una nostra macchina, ma andremmo fuori tema.
Netlify
Come per Hugo, Netlify è la prima e unica piattaforma che abbia provato: funziona, è abbastanza intuitiva e il piano free soddisfa perfettamente le mie esigenze. Specialmente per quanto riguarda la banda disponibile, è impossibile che riesca a saturarla: i miei siti sono quasi interamente testuali e totalizzeranno due visualizzazioni all'anno. Mie, o di qualcuno che abbia sbagliato indirizzo.
Su Netlify potete usare il codice generato da Hugo e accaparrarvi un dominio di terzo livello, del tipo miodominio.netlify.app; nel caso disponiate di un dominio personale, potete associarlo liberamente. Netlify si occuperà dei certificati su Let's Encrypt, per l'attivazione della modalità https.
Potrete caricare il codice semplicemente trascinandolo nel browser,in una specifica sezione del pannello di controllo di Netlify; : in questo caso, l'articolo potrebbe chiudersi qui.
Diversamente, si può ricorrere a un software di controllo di versione distribuito... che paroloni!
Opzionale: Github, Gitlab e simili
Git è lo standard. Ancora una volta, è uno strumento che uso in maniera decisamente primitiva, sfruttandone una frazione infinitesimale delle possibilità. È pur vero che non ho davvero bisogno di altro. Git è un servizio mirato principalmente agli sviluppatori, che condividono il loro codice affinché altri utenti possano visualizzarlo e metterci mano.
Github] è il più popolato servizio di hosting, purtroppo rilevato da Microsoft nel 2018; non volendo dipendere dai giganti del web, è possibile anche appoggiarsi ad altri gestori. Netlify supporta nativamente, oltre a Github, anche Azure DevOps (sempre di Microsoft), GitLab e BitBucket.
Seguendo questa via, caricherete il codice nei vostri repository su uno di questi servizi e Netlify provvederà ad aggiornare il sito in maniera più o meno automatizzata, nel caso abbiate appunto apportato delle modifiche.
Riassumendo
In chiusura, ecco quindi i passaggi per la creazione di un sito web statico:
- Imparare le fondamenta del MarkDown
- Installare Hugo
- Scegliere e installare un tema
- Personalizzare il tema in maniera più o meno approfondita, caricare qualche contenuto in formato .md
- Generare il codice con Hugo
- Caricarlo su Netlify
- (Opzionale) Utilizzare un dominio personalizzato
Se proprio siete curiosi, potete caricare il codice su Git e associarlo al sito su Netlify.
Ecco: ho scritto moltissimo, ma è molto più facile di quanto possa sembrare, a patto di avere una conoscenza almeno medio-bassa dei PC.