Generatori di siti statici

I siti statici non contengono contenuti dinamici e sono composti da file statici, come HTML, CSS e JavaScript, che non richiedono un’elaborazione lato server o un database.

Poiché i file sono precostituiti, non sono necessarie ulteriori elaborazioni quando un utente visita il sito e sono necessarie meno risorse per far funzionare il sito. Senza script o database da sfruttare, anche la sicurezza del sito è maggiore.

Vantaggi dei generatori di siti statici

Se avete familiarità con HTML, CSS e JavaScript, potete creare un sito statico utilizzando un editor di testo o di codice. Tuttavia, è necessario possedere le conoscenze tecniche necessarie per scrivere i contenuti, può essere complicato e richiedere molto tempo e, man mano che il sito cresce, può diventare più difficile da gestire e mantenere.

I generatori di siti statici (SSG) offrono un’opzione più efficiente per costruire il proprio sito statico. Spesso includono vari strumenti che facilitano la creazione, lo stile, la pubblicazione e la modifica dei contenuti. Alcuni dei principali vantaggi dell’utilizzo di un generatore di siti statici sono:

• Template: un sistema di template permette di definire la struttura e il layout del sito web utilizzando modelli e componenti riutilizzabili, che possono essere utilizzati in più pagine. In questo modo non dovrete duplicare o aggiornare manualmente elementi comuni su più pagine. Inoltre, questo sistema separa i contenuti dal livello di design e presentazione, permettendovi di concentrarvi sulla scrittura e sull’aggiornamento dei contenuti.
• Automazione: se il sito include contenuti provenienti da fonti diverse, come file Markdown o file di dati, un generatore di siti statici può automatizzare il processo di conversione dei contenuti in file HTML. Anche operazioni come la minificazione, l’ottimizzazione e il raggruppamento delle risorse possono essere automatizzate. Tutto questo fa risparmiare tempo e riduce le possibilità di errore, consentendovi di creare e ottimizzare il sito senza dover eseguire manualmente ogni attività.
• Controllo delle versioni: i generatori di siti statici si integrano con sistemi di controllo delle versioni come Git, così da poter tenere traccia delle modifiche, collaborare con gli altri e tornare facilmente alle versioni precedenti, se necessario.
• Build incrementali: con i build incrementali, quando si apportano delle modifiche e si genera un nuovo output, vengono rigenerati solo i file che sono stati modificati dall’ultimo build. Molti generatori di siti statici supportano i build incrementali, migliorando i tempi di creazione dei siti più grandi e dei piccoli aggiornamenti.

Utilizzare un generatore di siti statici

Ogni generatore di siti statici (SSG) ha le sue caratteristiche, le sue configurazioni e i suoi sistemi di template, ma la configurazione per generare un sito che sarà ospitato con l’Hosting di Siti Statici di Kinsta di solito prevede quanto segue:

1. Scegliere l’SSG: ci sono molti SSG disponibili. Scegliere quello più adatto alle proprie esigenze è il primo passo da compiere. Per costruire e ospitare il sito con l’Hosting di Siti Statici di Kinsta, sceglierne uno che utilizzi Node.js per il processo di build. Di seguito, abbiamo creato un elenco di SSG pronti all’uso su Kinsta.
2. Creare un ambiente di sviluppo locale: installare le dipendenze necessarie, tra cui l’SSG stesso, gli eventuali linguaggi di programmazione richiesti e un editor di codice.
3. Creare il nuovo sito: nel proprio SSG, creare il nuovo sito. Questo genera la struttura di directory di base e i file di configurazione necessari per il progetto.
4. Configurazione: impostare la configurazione del sito per personalizzare la struttura del sito e il modo in cui il generatore elabora i file sorgente. Questo file può contenere impostazioni come le directory di input e di output, i percorsi dei template, i metadati, le configurazioni dei plugin, ecc.
5. Template: creare modelli e layout che definiscono elementi e strutture comuni per le proprie pagine, come header, footer, menu di navigazione, ecc.
6. Aggiungere contenuti e risorse: creare o raccogliere i contenuti esistenti utilizzando Markdown o altri formati supportati. Ogni pagina corrisponde generalmente a un file all’interno della directory dei contenuti. Le risorse saranno probabilmente archiviate in una directory separata dai file di contenuto.
7. Modificare lo stile: modificare i file CSS o del preprocessore (ad esempio SASS o LESS) per applicare stili personalizzati al proprio sito. Alcuni SSG hanno anche dei temi che possono essere installati e personalizzati per lo styling.
8. Creazione e anteprima in locale: eseguire il comando di build fornito dall’SSG per effettuare il build del proprio sito web. L’SSG elabora i modelli, converte i file di contenuto in HTML e genera i file statici (HTML, CSS e JavaScript). Se applicabile, eseguirà anche operazioni come la minificazione, l’ottimizzazione e il raggruppamento delle risorse. Usare questo setup per assicurarsi che tutto appaia e funzioni come previsto.
9. Creare il repository Git: usare Git per creare il proprio repository, quindi eseguire il commit ed il push del nuovo sito nel nuovo repository Git.
   1. Se si distribuisce il sito su Kinsta senza eseguire il build su Kinsta, i file di cui si fa il commit nel repository devono essere l’output del build (i file HTML, CSS e JavaScript).
   2. Se il build del sito viene effettuato su Kinsta, i file da inserire nel repository devono essere i contenuti, le risorse come immagini o altri media e i file SSG (o i file di configurazione che inseriranno le dipendenze per il build).

10. Distribuire il nuovo sito statico: in MyKinsta, aggiungere un nuovo sito statico e collegarlo al repository Git per distribuire il sito dalle 260+ sedi del CDN di Kinsta.
11. Manutenzione e aggiornamento: mentre si lavora sul sito, assicurarsi di seguire le best practice per il controllo delle versioni, di effettuare regolarmente il commit delle modifiche e di rimanere aggiornati con le ultime versioni dell’SSG e delle sue dipendenze. Questo assicura un processo di sviluppo fluido e permette di sfruttare le nuove funzionalità e le correzioni di bug.

Compatibilità del generatore di siti statici

L’Hosting di Siti Statici di Kinsta è destinato a siti statici precostruiti o a siti realizzati con moderni framework JavaScript che utilizzano Node.js per costruire il sito su Kinsta. Le landing page, i siti di brochure e persino alcuni piccoli blog che non vengono aggiornati troppo spesso e che non richiedono contenuti dinamici (come i commenti) sono solitamente adatti.

Se il sito soddisfa una delle seguenti condizioni, sarà più adatto al nostro Hosting di Applicazioni:

• Utilizza un linguaggio diverso da Node.js per il build del sito (ad esempio PHP).
• Richiede il rendering del server per servire una parte o la totalità del sito.
• Richiede la connessione a un database.
• Serve contenuti dinamici.
• Richiede sessioni o autenticazioni gestite sul lato server.

Se non siete del tutto sicuri di quale sia l’hosting migliore per il vostro sito, vi consigliamo di distribuire il sito su entrambi per provare ogni opzione e determinare quale si adatta meglio alle vostre esigenze.

Esistono molti generatori di siti statici e il comando di creazione e la directory di pubblicazione possono variare da sito a sito. Kinsta rileva automaticamente diversi framework e popola i campi Comando di build e la Directory di pubblicazione quando si aggiunge un sito statico.

La tabella seguente mostra il comando di creazione e la directory di pubblicazione da utilizzare per numerosi popolari generatori di siti statici compatibili con l’Hosting di Siti Statici.

* Gridsome o VuePress 1.x

Ciò richiederà Node 16, o l’aggiunta di quanto segue nel package.json per il Comando di build:

SET NODE_ OPTIONS =--openssl- legacy -provider && vuepress build src

** Hugo

Aggiungete quanto segue al progetto:

npm install hugo-bin serve --save-dev

Aggiungete o sostituite quanto segue, a seconda del progetto:

{
  " scripts ": {
    "build": "hugo"
  }
}

È comune per i temi Hugo raccomandare l’installazione tramite un sottomodulo Git. Attualmente i sottomoduli non sono compatibili con l’Hosting di Siti Statici o di Applicazioni, quindi i file del tema devono essere disponibili nel repository del sito.