Una guida ai generatori di siti statici che utilizzano Hexo e WordPress

I generatori di siti statici sono sistemi che compilano modelli in pagine HTML statiche. Se sembra efficiente, sì, lo è. Non c'è elaborazione o rendering del server, quindi i siti Web statici tendono ad essere molto veloci e leggeri, facendo risparmiare a te e ai tuoi utenti tempo e larghezza di banda preziosi. Questa maggiore efficienza si riflette in minori costi e, potenzialmente, in maggiori ricavi.

Dall'ottimizzazione di WordPress al passaggio allo stato statico

Parlando di efficienti generatori di entrate, viene in mente WordPress. Alimenta il 28 percento di Internet ed è una piattaforma potente con molte fantastiche funzionalità, inclusa un'ampia gestione di utenti e contenuti supportata da una serie di plug-in, temi, API, ecc.

Anche i grandi attori del nostro settore utilizzano WordPress. Siti web come Smashing Magazine e CSS-Tricks utilizzano WordPress, anche se in entrambi i casi si tratta di istanze significativamente personalizzate. Tuttavia, lavorare con WordPress può essere un compito noioso, soprattutto durante la personalizzazione e l'ottimizzazione delle prestazioni.

Ho aperto un piccolo blog nel 2015. Il mio primo istinto è stato quello di usare WordPress. Mi ha dato un balzo in avanti, dato che stavo già lavorando con WordPress. Ho creato un nuovo droplet su DigitalOcean come server, ho stabilito Vesta come Hosting Control Panel e ho installato WordPress come piattaforma blog. Alla fine, ho progettato e sviluppato un nuovissimo tema WordPress. L'unica cosa che mancava era il contenuto.

Sapevo di voler condividere alcuni suggerimenti su Atom, poiché in quel momento stavo usando questo fantastico editor. Ho pubblicato alcuni articoli a riguardo e li ho condivisi con la community.

All'inizio non prestavo molta attenzione alle prestazioni perché ero troppo concentrato sul contenuto. Dopo un po', ho notato alcuni problemi di prestazioni. Il punteggio su Google PageSpeed ​​Insights era pessimo, quindi ho lavorato duramente per correggere e ottimizzare il mio sito web, ottenendo un punteggio quasi perfetto di 99/100:

• Sono passato da Nginx+Apache a Nginx+PHP-FPM.

• Ho usato CloudFlare per velocità e protezione.

• Ho usato Cloudinary per ospitare le immagini.

• Ho modificato il mio tema e ho utilizzato CSS critici.

L'unico avviso era per un problema di memorizzazione nella cache di Google Analytics che non sapevo come risolvere in quel momento.

Ma cosa succede se 99/100 o 100/100 non ti danno ancora le prestazioni desiderate? È qui che entrano in gioco i generatori di pagine statiche.

Entra in Generatori di pagine statiche e Hexo

Allora, cos'è un generatore di siti statici?

Come suggerisce il nome, un generatore di siti Web statici è un sistema che genera file HTML statici. Servire file HTML statici è molto più veloce della creazione di pagine al volo. Non c'è il rendering o la compilazione del server, il che spesso causa un ritardo nel caricamento della pagina.

Quando si parla di prestazioni, bisogna pensare alla memorizzazione nella cache. Sebbene esistano diverse tecniche per la memorizzazione nella cache di WordPress, questo di solito non è un compito semplice, a differenza della memorizzazione nella cache di file statici. Il servizio di file memorizzati nella cache è più efficiente rispetto al servizio di file effettivi dal server e può far risparmiare tempo durante il caricamento di siti Web.

Nel giugno di quest'anno, Vitaly Friedman di Smashing Magazine ha presentato JAMstack in un workshop nella mia città. Non ne avevo mai sentito parlare e ne ero molto incuriosito. Al termine del seminario, ho studiato per un po' questo nuovo concetto e ho capito quanto sia fantastico. Mi sono reso conto che il mio sito web non ha bisogno di un WordPress.

Il primo passo è stato decidere quale generatore di pagine statiche utilizzare. Non sapevo quanti fossero. Ho deciso di provare il framework del blog Hexo. È distribuibile su Netlify, ha un plug-in per migrare da WordPress e utilizza Node.js, con cui ho familiarità, a differenza di Jekyll e Hugo, che sono basati rispettivamente su Ruby e Go. E, come ho scoperto in seguito, è velocissimo.

Migrazione da WordPress a Hexo

L'installazione di Hexo è semplice come potrebbe essere. Installa hexo-cli a livello globale usando npm, esegui il comando hexo init , installa le dipendenze npm e voilà:

 npm i -g hexo-cli hexo init <blog-name> cd <blog-name> npm install

Per effettuare la migrazione, installa il plugin hexo-migrator-wordpress. Questo plugin si aspetta file XML come sorgente. I file XML possono essere esportati tramite lo strumento di esportazione di WordPress, che si trova nel pannello di amministrazione in Strumenti -> Esporta -> Wordpress . Infine, digita il comando hexo migrate per completare l'importazione.

 hexo migrate wordpress <source>

L'unica cosa che resta da fare è controllare il risultato. Eseguire il comando hexo server per avviare il server e aprire il browser all'indirizzo specificato.

 hexo server

Ribasso e suoi limiti

Hexo supporta Markdown immediatamente. Markdown è un linguaggio di markup che molti usano per formattare file README, commenti e post. Ma potrebbe essere usato anche per scrivere il tuo articolo. La sua sintassi è intuitiva e facile da imparare.

Un altro vantaggio per Markdown è che genera HTML pulito e valido. Ciò consente agli sviluppatori di creare regole CSS pulite e gestibili per lo stile di articoli e pagine di blog.

La vita di uno sviluppatore non è mai facile. Spesso ci imbattiamo in problemi che potrebbero indurci a dedicare tempo a cose inaspettate. Se impariamo qualcosa lungo la strada, allora non abbiamo perso questo tempo, e questa è una buona cosa. Lo stesso è successo a me. Ho pensato che tutto fosse andato bene perché non c'era alcun errore di compilazione, ma poi ho notato che alcune cose non funzionavano come previsto.

Ad esempio, le demo di Codepen non sono state caricate. Ho cercato un plug-in Hexo e ne ho trovato uno. Sfortunatamente, questo plugin non era ufficiale e generava errori HTML inaccettabili. Volevo contribuire e risolvere i problemi, ma l'ultima richiesta pull è rimasta irrisolta per più di un anno e mezzo. Ho deciso che sarebbe stato più semplice eseguire il fork del repository, risolvere i problemi e pubblicare il plug-in sulla pagina Hexo in modo che chiunque potesse usarlo. Il plug-in è stato accettato, ho aggiornato il contenuto e le demo di Codepen hanno funzionato a meraviglia.

Problemi simili si sono verificati con gli incorporamenti CanIUse. Ora che sapevo come creare un plug-in Hexo, non c'erano scuse per non farlo. È stato anche pubblicato il mio plug-in hexo-caniuse, così come il mio plug-in hexo-cloudinary per immagini reattive caricate da Cloudinary CDN.

Riprogettazione e ottimizzazione

Il design del sito web è piuttosto fondamentale. Hexo offre una manciata di temi gratuitamente sul sito Web ufficiale, ma volevo un tema unico per il mio sito Hexo. Dopo aver letto la documentazione e imparato a personalizzare Hexo, ho iniziato a sviluppare un tema originale da zero.

Per creare nuovi modelli, ho deciso di utilizzare EJS per la creazione di modelli. Non avendo mai lavorato con EJS, l'ho vista come un'opportunità per imparare la nuova sintassi dei modelli. Se non ti piace EJS, Hexo ti fornisce supporto per Swig, Haml o Pug tramite plugin.

Durante il processo di riprogettazione, ho prestato molta attenzione alle prestazioni. Seguendo le migliori pratiche, possiamo velocizzare ulteriormente il nostro sito Web statico. Posizionare i file JavaScript nella parte inferiore del documento e utilizzare la tecnica CSS critica crea la migliore esperienza per il tuo pubblico.

L'ottimizzazione SEO è fondamentale per la visibilità del blog sui motori di ricerca come Google. Hexo ha un helper integrato per l'inserimento di dati Open Graph. Hexo utilizza i file YAML per memorizzare la configurazione del sito e del tema. Ho usato il file di configurazione del tema per configurare il nome del sito, la descrizione e vari ID social.

L'aggiunta di Gulp o Webpack al processo di compilazione è sempre utile e consigliata. Ho usato Gulp per minimizzare e comprimere file CSS e JavaScript e tutto era pronto. Potrei distribuirlo.

Netlizzare

Netlify è una piattaforma che fornisce hosting per siti Web e app con prestazioni incredibilmente veloci. Si propone come una piattaforma unificata che automatizza il codice per creare siti Web performanti e di facile manutenzione.

Basta premere il tuo codice e lascia che ci occupiamo noi del resto.

Come ti aspetteresti, la configurazione del sito Web è semplice:

1. Configura il dominio.

2. Modifica i record DNS.

3. Configura build e distribuzione.

4. Attiva SSL.

Quando tutto è stato impostato, ho eseguito una manciata di test di base per vedere i punteggi, inclusi Pingdom Website Speed ​​Test, Web Page Test e Testmysite.io. I risultati sono stati eccellenti, poiché il sito ha ottenuto i punteggi più alti su ogni strumento.

CloudFlare

Nonostante gli ottimi punteggi, volevo provare CloudFlare, solo per vedere quanto avrebbe velocizzato ulteriormente il sito web. All'inizio CloudFlare può essere travolgente, ma imparare a usarlo è fondamentale. Dopo aver configurato CloudFlare, ho eseguito nuovamente i test e i risultati sono stati ancora migliori.

Il test finale è stato Google PageSpeed ​​Insights. Il punteggio è stato quasi del 100% sia per la versione mobile che per quella desktop. Il problema era la memorizzazione nella cache del browser di Google Analytics. Sono riuscito a risolvere il problema utilizzando l'app CloudFlare per Google Analytics.

Quanto costa?

L'utilizzo di Hexo su Netlify con CloudFlare non costa nulla.

Hexo è una piattaforma open source, quindi è gratuita indipendentemente da come decidi di utilizzarla. Ha una vasta comunità ed è il terzo generatore di pagine statiche open source più popolare secondo StaticGen.

Netlify ha un piano aperto che ci offre ottime opzioni per il nostro hosting. Anche le immagini sono ospitate sul piano aperto di Cloudinary. Il piano gratuito di CloudFlare ci consente di configurare un numero elevato di regole che possono velocizzare il tuo sito web già veloce. Ci consente inoltre di risolvere il problema di memorizzazione nella cache del browser di Google Analytics. Non ho nemmeno pagato il dominio, poiché ho utilizzato un dominio personale gratuito fornito dal governo.

Questa configurazione del progetto ha ridotto il mio budget al minimo. Se hai bisogno di funzionalità più avanzate per il tuo progetto, un generatore di pagine statiche potrebbe comunque farti risparmiare qualche soldo.

Servire file memorizzati nella cache significa ridurre l'utilizzo della CPU e della larghezza di banda, il che a sua volta significa che puoi utilizzare piani di hosting più economici con hardware meno potente. Non solo, il tuo sito Web sarà molto più veloce, il che significa che i tuoi utenti si divertiranno a navigare su dispositivi mobili e desktop. Inoltre, poiché la velocità di caricamento della pagina può influire sulle classifiche di ricerca di Google, il tuo sito Web si classificherà più in alto, guadagnando ancora più visitatori.

Tutto ciò significa che potresti spendere parte del tuo budget altrove, ad esempio per promuovere il tuo sito web o creare contenuti aggiuntivi, che ti aiuteranno a guadagnare un po' di più.

Il caso dei generatori di siti statici

La migrazione da WordPress a un generatore di pagine statiche non è un compito semplice e sicuramente non è qualcosa che tutti gli utenti di WordPress dovrebbero fare. Tuttavia, Hexo ha reso questa transizione relativamente indolore, grazie ai suoi plugin, all'eccellente documentazione e a una semplice API.

Prima di decidere se si desidera migrare o meno il prodotto a una soluzione statica, è necessario essere consapevoli delle limitazioni che derivano dai generatori di pagine statiche, come le restrizioni sui contenuti, la curva di apprendimento Markdown e il controllo della versione.

Dovresti anche essere consapevole del fatto che Hexo è un framework per blog. È perfetto per sviluppatori e tecnici che sanno come utilizzare un editor di testo e un terminale. Se ti piace usare un'interfaccia web per gestire i tuoi contenuti, c'è un plugin che fornisce anche quella funzionalità. Si chiama hexo-admin ed è abbastanza popolare.

Se stai già utilizzando WordPress, dovresti fermarti e pensare a quali funzionalità di WordPress stai utilizzando in questo momento e quali sono indispensabili. Hai una struttura dei contenuti complicata? Stai usando la gestione degli utenti? Stai utilizzando molti plugin sulla tua istanza di WordPress e sono tutti necessari? Sei soddisfatto delle prestazioni del tuo sito?

Se la risposta alla maggior parte o a tutte queste domande è no, allora sei pronto a potenziare il tuo sito Web con un generatore di pagine statiche. A seconda del caso d'uso e delle tue esigenze, le pagine statiche possono aiutare a massimizzare l'efficienza riducendo al minimo i costi. Se, d'altra parte, richiedi flessibilità a WordPress, probabilmente non stai nemmeno considerando una mossa del genere.