WordPress è un eccellente sistema di gestione dei contenuti (CMS), con cui si può realizzare quasi tutto. Grazie alla sua natura dinamica, possiamo modificare qualsiasi contenuto con un semplice clic. Se da un lato tutto ciò è straordinario, dall’altro comporta anche alcuni pericoli e la sua manutenzione può essere complicata in condizioni di traffico intenso.

Convertire un sito WordPress in sito statico potrebbe risolvere questi problemi.

Cosa sono i siti web statici?

Per spiegare come funzionano i siti web statici, dobbiamo prima capire come funziona un sito web dinamico.

Ogni volta che visitiamo un sito web, il server deve analizzare i file PHP, interrogare il database per recuperare i dati e, infine, restituire l’HTML renderizzato al browser.

I siti web statici fanno tutto il lavoro pesante prima: salvano ogni pagina come HTML statico ancor prima di visitare il sito web. Quando visitiamo la pagina desiderata, il server la serve così com’è.

I pro di un sito statico

Velocità e prestazioni

I siti web statici sono veloci e performanti. Perché? Perché si tratta di HTML statico. Ciò significa che il server deve fare una sola cosa: servire il sito web. Non deve analizzare nulla o attendere i dati dal database.

Inoltre, i siti web statici sono più facili da ospitare su un CDN (anche se Edge Cache funziona in modo simile), che posiziona tutti i file il più vicino possibile all’utente.

In generale, i siti web statici hanno prestazioni straordinarie in caso di traffico intenso.

Sicurezza

Il core di WordPress è sicuro, davvero. Ma i plugin e i temi non sempre lo sono. Inoltre, chiunque può provare a indovinare il nostro login e la nostra password.

In generale, mi piace paragonare WordPress a una casa con molte porte e finestre. Sta a noi scegliere quelle più sicure, ma se una porta non è abbastanza sicura, un hacker può entrare nel nostro sito web.

La conversione di un sito web in sito statico elimina la maggior parte dei vettori di attacco. Poiché si tratta solo di HTML, un hacker non potrà utilizzare plugin vulnerabili o approfittare di una password debole.

Serenità

Una tipica configurazione di WordPress è composta da molte parti mobili – server PHP e database, temi o plugin – e ogni parte può rompersi. Con il sistema statico, eliminiamo la maggioranza di queste parti. Il nostro server diventa più semplice perché serve solo HTML e i nostri contenuti sono diffusi in tutto il mondo grazie al CDN, che li rende protetti da DDoS.

Di conseguenza, la probabilità che qualcosa si rompa è molto più bassa del solito.

I contro della conversione in sito statico

Workaround

Con WordPress siamo abituati a far funzionare subito cose come la ricerca nel sito, l’aggiunta di commenti o l’invio di moduli. Con la versione statica, non è più così semplice. Poiché abbiamo convertito tutto in HTML, abbiamo perso queste possibilità.

Dobbiamo utilizzare strumenti di terze parti per ripristinare queste funzionalità.

Processo di build

Siamo abituati a vedere i nuovi contenuti disponibili sul nostro sito web non appena premiamo il pulsante di pubblicazione. Con l’approccio statico, dobbiamo convertire il nostro sito web ogni volta che vogliamo aggiornarlo. Quindi possono passare alcuni minuti da quando premiamo il pulsante fino a che il sito diventa disponibile per tutti.

Passi preliminari

Prima di iniziare, dobbiamo occuparci di alcune cose.

1. Creare un repository Git

In questo esempio utilizziamo GitHub, ma potete utilizzare qualsiasi altra soluzione Git (come GitLab o BitBucket). A questo punto, create un account (se non ne avete già uno) e create un repository vuoto.

Dopodiché dovremo creare un file nel repository, altrimenti non potremo collegarlo a Kinsta.

Aggiungere un file al proprio repository. Un file readme.md nel branch principale di un repository GitHub
Aggiungere un file al proprio repository.

2. Collegare il repository con l’Hosting di Siti Statici

Andate su MyKinsta, selezionate Siti statici dalla barra laterale e selezionate Aggiungi sito.

Selezionate il repository che avete creato e non dimenticate di selezionare “Distribuzione automatica su commit.”

L'interfaccia utente di Kinsta mostra la creazione di un nuovo sito statico da un repository GitHub e dal suo branch principale..
Configurazione dell’Hosting di Siti Statici Kinsta.

Convertire il sito WordPress in statico

Possiamo utilizzare diversi metodi per convertire il nostro sito WordPress in statico. In questo articolo ne illustriamo due:

  1. Utilizzo di un plugin WP e Git
  2. Utilizzo di WP-CLI, CI/CD e Git

Utilizzare un plugin e Git

Requisiti:

Passaggi

  1. Aprite il sito nel browser e installate il plugin Simply Static.
  2. Andate su Simply Static > Settings > Deployment per impostare il metodo di distribuzione sulla directory locale e impostate la cartella locale – potete seguire il suggerimento che vi dà il placeholder, ad esempio /www/kinstaapi_533/public/public_static. Ricordate che il plugin non creerà questa cartella per voi: dovrete farlo manualmente.
  1. Premete il pulsante Generate Static Files.

Dopo qualche minuto, tutti i file statici saranno nella cartella specificata nel passaggio precedente.

Eseguire il push del codice in un repository Git

  1. Create un repository su GitHub.
  2. Aprite un Terminale o Powershell, andate alla cartella con i file statici ed eseguite:
git init
git remote add origin https://github.com/{username}/{repository_name}.git
git add .
git commit -m "static content"
git branch -M main
git push --force -u origin main

Questi comandi collegano il repository e inviano tutti i file statici a GitHub. L’invio delle modifiche attiva un deployment automatico perché abbiamo già collegato questo repository con l’Hosting di Siti Statici di Kinsta.

La prossima volta che cambierete qualcosa in WordPress, eseguite di nuovo la build dell’intero sito web ed eseguite:

git add .
git commit -m "static content"
git push --force -u origin main

La versione Pro di Simply Static offre un addon GitHub che automatizza il processo di creazione. Tuttavia, si tratta di un plugin a pagamento e, in alcuni casi, farlo manualmente potrebbe essere una soluzione sufficiente.

Usare WP-CLI, CI/CD e Git

Questo metodo utilizza lo stesso plugin WP del metodo precedente, ma nella versione Premium (a pagamento), e utilizza una pipeline CI/CD di Buddy CI per inviare il codice a un repository GitHub.

Questo approccio è più complicato da configurare ma richiede meno lavoro manuale durante ogni distribuzione. Inoltre, è più estensibile perché avrete il controllo su ogni fase. Potete aggiungere altre azioni alla pipeline se lo desiderate.

Requisiti:

  • Simply Static Pro (solo la versione Pro ha l’integrazione WP-CLI).
  • Il sito web deve essere accessibile pubblicamente (quindi non può trovarsi su un localhost) e il server deve avere accesso SSH e WP-CLI installato. L’Hosting WordPress di Kinsta è perfetto.
  • La base di codice del sito è ospitata in un repository GitHub.
  • Uno strumento CI/CD per orchestrare il tutto. In questo esempio abbiamo utilizzato Buddy per la sua semplicità. Ma potete utilizzare qualsiasi altro strumento, come GitHub Actions o GitLab CI/CD.

Passaggi:

  1. Aprite il sito WP sul browser e installate il plugin Simply Static Pro.
  2. Andate su Simply Static > Settings > Deployment per impostare il metodo di distribuzione sulla directory locale e impostate il percorso corretto – potete seguire il suggerimento che vi dà il placeholder, ad esempio /www/kinstaapi_533/public/public_static.
  3. Ricordate che il plugin non crea questa cartella per voi: dovrete farlo manualmente.
  4. Andate al vostro repository GitHub e create un token di accesso con scrittura per accedere ai vostri repository. Ne avremo presto bisogno.
  5. Accedete al vostro account su Buddy, aggiungete un nuovo progetto e collegatelo al vostro repository.

Creiamo una pipeline su Buddy che faccia quanto segue:

  1. Esegue il comando Simply Static WP-CLI via SSH sul server.
  2. Zippa tutto.
  3. Scarica il tutto nel filesystem di Buddy.
  4. Decomprime tutto.
  5. Invia tutto al vostro repository Git.
Buddy UI sulla scheda Actions che mostra il flusso di lavoro proposto
Una panoramica del workflow di Buddy proposto.
  1. Per prima cosa, dobbiamo aggiungere un’azione chiamata SSH command.
  2. Nella scheda Run CMDs, eseguite:
wp simply-static run
cd public_static
zip -FSr ../static.zip .

Questo script converte il nostro sito web in statico e lo zippa.

  1. Nella scheda Target, inserite tutte le vostre credenziali (le trovate su MyKinsta) e impostate la directory di lavoro su public.
L'interfaccia utente di Buddy mostra l'impostazione della scheda Target
Configurazione del Buddy Target.
  1. Successivamente, aggiungete un’azione Local Shell. All’interno di essa, eseguite:
rm -rf *

Questo comando assicura che non ci siano file non necessari.

  1. Per scaricare il file zip dal server, aggiungete una nuova azione (potete farlo premendo il + nell’elenco delle azioni) e selezionate Download SFTP dall’elenco. Oltre alle credenziali, dobbiamo inserire il percorso del file zip e selezionare l’opzione di sovrascrittura.

L'interfaccia utente di Buddy che mostra la configurazione dell'azione Download
L’azione Download di Buddy è stata configurata.
  1. Aggiungete un’altra azione Local Shell per decomprimere tutti i file e rimuovete il file zip (non ci servirà più). Eseguite:
unzip -o static.zip
rm static.zip
  1. Andate alla scheda Ubuntu e selezionate Packages & Tools install unzip. Per farlo, eseguite:
apt-get update && apt-get install -y unzip
  1. L’ultimo passo richiede l’utilizzo dell’azione Git Push. Dovete utilizzare il GitHub Access Token che avete configurato nel primo passaggio e la relativa password. Inoltre, non dimenticate di spuntare la voce Force Push e Push revision to the specific branch.
L'interfaccia utente di Buddy che mostra l'impostazione dell'azione Push
Configurazione dell’azione Push di Buddy.

Quando vorrete distribuire nuovamente il sito web, premete il pulsante Run di Buddy e la magia si compirà. Se volete automatizzare questo processo, potete utilizzare un plugin per WordPress.

Buddy UI sulla scheda Azioni che mostra il flusso di lavoro proposto
Una panoramica del flusso di lavoro proposto da Buddy.

Grazie alla documentazione di Buddy, potrete scoprire come automatizzare ulteriormente il vostro workflow.

Altri modi per convertire WP in statico

Generatori di siti statici

Molti generatori di siti statici permettono di collegare qualsiasi CMS con un’API (WordPress ha un’API REST integrata e GraphQL disponibile tramite un plugin). Potete utilizzare Astro, Eleventy o qualsiasi altro.

Sebbene questo approccio offra una maggiore flessibilità, richiede più lavoro rispetto alle soluzioni sopra descritte.

Riepilogo

Convertire un sito WordPress in un sito statico è una buona idea? Dipende. Ci sono molti fattori da considerare prima di farlo. Sicuramente è una buona idea pensarci. Come già detto, i siti web statici hanno molti vantaggi e non approfittarne può rivelarsi uno spreco.

Maciek Palmowski

Maciek è un web developer che lavora in Kinsta come Development Advocate Analyst. Dopo l'orario di lavoro, passa la maggior parte del tempo a programmare, a cercare notizie interessanti per le sue newsletter o a bere caffè.