Potresti aver già sentito parlare della nuova tendenza dei “CMS Headless”. A meno che tu non sia uno sviluppatore, può essere difficile districare esattamente il significato di questo termine e decidere se sia una soluzione fattibile o meno per il tuo sito web.

Con una installazione del CMS WordPress Headless, puoi separare il back-end e il front-end del tuo sito web. Puoi utilizzare questo approccio per generare copie statiche del tuo sito, il che rende i tempi di caricamento molto più rapidi.

In questo post, introdurremo il concetto di CMS headless e di come funziona Quindi ti mostreremo come implementare una configurazione di base che utilizza copie statiche del tuo sito web tramite Amazon Web Services (AWS).

Apriamo le danze!

Che cos’è un CMS headless?

Prima di immergerci in WordPress headless, esploriamo cosa è un CMS headless in generale. Innanzitutto, è importante chiarire il termine “CMS” stesso. Un Content Management System (CMS) è una soluzione completa per la creazione e la gestione di contenuti online (come WordPress). Può essere contfrontato con piattaforme più semplici come i website builder , che sono più facili da usare ma anche meno flessibili.

Che dire invece della parte “headless” del termine? Tutti i siti web sono costituiti da un front-end , ovvero la parte grafica che del sito che vedono glii utenti, e da un back-end. Quest’ultimo controlla il modo in cui i dati del sito web vengono gestiti e archiviati, ed è il punto in cui effettuerai personalizzazioni, aggiungerai contenuti, modificherai gli elementi tramite il codice e così via.

In ogni caso, l’ architettura headless taglia il front-end, o “head” (testa) della piattaforma. Separando il front-end dal back-end, è possibile gestirli entrambi separatamente. Ciò consente di spostare agevolmente i contenuti da una piattaforma all’altra. Ad esempio, un CMS headless potrebbe inviare contemporaneamente nuovi contenuti al sito web della tua azienda, a Google Calendar e a Facebook.

Ti starai chiedendo come tutto ciò si collega al tuo sito web WordPress. Sebbene WordPress inizialmente non fosse destinato a essere un CMS headless, il suo sviluppo negli ultimi anni si è spostato in quella direzione. Ciò ti consente di mantenere il tuo attuale sito WordPress e di trarre vantaggio dagli ultimi progressi tecnologici.

Nel 2016, gli sviluppatori di WordPress hanno creato le REST API , dando agli utenti la possibilità di rendere i loro CMS WordPress headless. Quasi tutti i temi per WordPress possono essere resi headless usando questa tecnica. Con WordPress headless, l’ editor ‘What You See Is What You Get’ (‘WYSIWYG’) è disabilitato e le funzioni chiave sono invece gestite tramite le REST API.

Per impostazione predefinita, WordPress non è headless, poichè utilizza un’architettura tradizionale che combina front-end e back-end. Questo non è necessariamente un problema. Puoi utilizzare l’editor a blocchi incorporato per apportare modifiche personalizzate. Tuttavia, ci sono diversi motivi per prendere in considerazione l’utilizzo di WordPress headless.

Introduzione a WordPress headless

Di solito, quando apporti modifiche al tuo sito sul back-end (o sulla dashboard di amministrazione), visualizzi i risultati corrispondenti sul front-end (ovvero le pagine live a cui i visitatori hanno accesso). In questo modello tradizionale, WordPress serve sia il back-end che il front-end del tuo sito web.

Quando parliamo di WordPress headless, ci riferiamo a un’installazione in cui non stai usando WordPress per generare il front-end del tuo sito. WordPress agisce solo come back-end. Per il front-end, è possibile utilizzare qualsiasi altra piattaforma che si collega al CMS tramite le sue API oppure impostare un sito web statico.

Per questo articolo, lavoreremo con un’installazione statica di WordPress per il front-end. I due principali vantaggi di questa metodologia sono:

  • I siti web statici sono altamente sicuri poiché non vi sono parti mobili da cui gli hacker possano trarre vantaggio.
  • Le pagine non dinamiche si caricano molto più rapidamente poiché non devono estrarre informazioni dai database o caricare script. Naturalmente, un altro modo per raggiungere questo obiettivo è con la memorizzazione nella cache delle pagine di WordPress .

In teoria, un’installazione statica di WordPress potrebbe anche farti risparmiare denaro sull’hosting poiché potresti cavartela usando un server meno potente.

Tuttavia, non è un approccio che funziona con tutti i tipi di progetti. Ad esempio, con questa soluzione, è più complicato includere elementi dinamici come i moduli di contatto o la ricerca nel sito ( sebbene sia possibile, con la giusta configurazione ).

Detto questo, un front-end statico può adattarsi perfettamente a siti web semplici. Se stai creando un blog personale o un sito vetrina, questa configurazione può essere una buona opzione.

Breve nota : alcune persone non considerano un sito WordPress statico una vera configurazione WordPress headless perché non utilizza le REST API e il design è ancora in qualche modo collegato al back-end (tramite il tema). Tuttavia, è l’esempio più semplice di questo tipo di installazione, motivo per cui abbiamo scelto di concentrarci su questo approccio per il tutorial.

Come configurare un sito web WordPress headless usando AWS (in tre passaggi)

In teoria, puoi ospitare una copia statica del tuo sito web con qualsiasi provider tu voglia. Tuttavia, per questo esempio, utilizzeremo AWS perché funziona con il plugin che presenteremo. Ecco come iniziare.

Passaggio 1: imposta un account AWS

Iniziare con AWS richiede un pò più di lavoro di un host web tradizionale. Tuttavia, l’utilizzo di questa piattaforma può essere incredibilmente economico per i siti web statici. In effetti, potrebbe costarti fino a $ 0,50 al mese .

Per una configurazione WordPress headless, ti consigliamo di utilizzare il livello Amazon S3 , che offre 12 mesi di hosting gratuito:

La Homepage di Amazon S3

La registrazione di un account è abbastanza semplice: fai clic sul pulsante Inizia con Amazon S3 e compila i campi richiesti nel modulo di registrazione.

Tieni presente che se hai già effettuato l’accesso con un account Amazon, il pulsante visualizzerà invece Registrazione completa . Il processo è lo stesso, non ti verrà chiesto di inserire nuovamente il tuo indirizzo email e le credenziali di accesso.

Passaggio 2: genera una copia statica del tuo sito web

Perché questa configurazione funzioni, devi comunque installare WordPress da qualche parte in modo da poterlo utilizzare come back-end del tuo sito, nonché per generare contenuto statico per il front-end. Per evitare di pagare per due diversi provider di hosting, una soluzione è quella di creare un’installazione WordPress locale.

Esistono diversi modi per installare un sito web WordPress in locale , tra cui:

In questo caso, Local by Flywheel offre un approccio più user-friendly. Scarica e installa il software, quindi imposta un nuovo sito web locale.

Quindi, configura e personalizza il tuo sito come preferisci. Aggiorna le tue impostazioni , scegli un tema e scrivi pagine e post. Quando sei soddisfatto, sarai pronto per creare una copia statica da utilizzare per il front-end del tuo sito.

Per fare ciò, vai avanti e configura il plugin WP2Static:

Ci sono anche altri plugin che puoi usare per raggiungere lo stesso obiettivo. Tuttavia, WP2Static funziona perfettamente con più piattaforme predefinite , tra cui AWSNetlify , GitHub Pages e altro.

Una volta che il plugin è pronto, è possibile accedere alle sue impostazioni dalla scheda WP2Static nella dashboard. Si apre direttamente alla scheda Distribuisci sito web statico , che è esattamente dove si desidera essere:

Distribuire un sito web WordPress headless statico.

Qui, aggiungi l’URL che i visitatori utilizzeranno per accedere al tuo sito web nel campo URL di destinazione (questo sarà determinato dalla configurazione di Amazon S3 ). Quindi, seleziona Amazon S3 dal menu a discesa nella parte superiore dello schermo:

Configurazione della distribuzione automatica S3.

Prima di distribuire il tuo sito, devi configurare alcune impostazioni e connettere AWS al tuo sito web, cosa che farai nel passaggio successivo.

Passaggio 3. Distribuisci automaticamente le pagine statiche su AWS

Dopo aver selezionato l’ opzione Amazon S3 , verranno visualizzati diversi nuovi campi:

I campi di configurazione dell'installazione di Amazon S3 con WP2Static

Prima di poter iniziare la distribuzione, è necessario inserire sia l’ID della chiave di accesso sia la chiave di accesso segreta. Tieni presente che l’ID chiave di accesso utilizzato deve disporre dei livelli di autorizzazione corretti affinché la distribuzione funzioni. Ecco una guida rapida su come ottenere entrambe le chiavi dal tuo account AWS.

Dopo aver incollato le chiavi nei rispettivi campi, seleziona la regione in cui è stato creato il bucket AWS e immetti il ​​suo nome come appare nella console AWS:

Configurazione della regione del bucket AWS per il sito WordPress headless

Infine, scorri fino alla fine della pagina e fai clic sul pulsante Avvia esportazione sito statico . Il processo potrebbe richiedere del tempo a seconda della dimensione del tuo sito web. Una volta fatto, dovresti essere in grado di accedere alla versione live statica del tuo sito.

Conclusione

Un approccio WordPress headless non funziona per tutti i siti web. Tuttavia, se non fai molto affidamento su elementi dinamici, un front-end statico potrebbe migliorare la sicurezza e le prestazioni del tuo sito . Inoltre, probabilmente risparmierai denaro sull’hosting.

Se desideri impostare un sito web statico con una configurazione WordPress headless, è possibile farlo utilizzando il plugin WP2Static . Funziona con AWS e diverse altre piattaforme predefinite e puoi generare e distribuire una copia statica del tuo sito in pochi minuti.

Se preferisci attenersi a una configurazione WordPress più tradizionale mentre usi ancora AWS, puoi consultare la nostra guida per l’installazione di WordPress vanilla su AWS .