Da WordPress a Hugo: cronache di una conversione

Pensieri in codice, idee dal mondo del software a cura di Valerio Galano. Salve a tutti ragazzi e bentornati qui su Pensieri in codice. È un po’ che non ci sentiamo e questo è il primo episodio ufficiale del 2020. Ne voglio quindi approfittare per ringraziare tutti voi che ascoltate il podcast e per dare il benvenuto a tutti i nuovi iscritti. Ormai siete tantissimi e questo non può che riempirmi d’orgoglio. Spero che per voi questo 2020 sia iniziato nel migliore dei modi. Per me le ultime settimane sono trascorse all’insegna del cambiamento, con tante novità e tanti propositi per il futuro sia nei confronti di questo progetto che della sfera professionale e privata. Ad esempio ho programmato di dedicarmi allo studio più approfondito di framework basati su JavaScript come Node.js, Angular e React. Ho anche iniziato un processo di semplificazione dei miei flussi di lavoro e della gestione delle mie risorse. Ho ripreso finalmente a scrivere sul mio blog e ho intenzione di pubblicare almeno un articolo tecnico al mese. Soprattutto ho intenzione di portare un po’ di tutte queste nuove esperienze qui nel podcast in modo da poterne discutere insieme e condividere il percorso di miglioramento. Nell’episodio di oggi quindi voglio proprio provare a parlare di uno di questi cambiamenti e di ciò che mi ha portato a scoprire e imparare. Tutto è iniziato quando ho deciso di semplificare il mio blog. Ve l’ho detto che stavo lavorando alla semplificazione dei miei processi. Comunque come tutti quelli che gestiscono un’attività anche io ho un sito professionale nel quale è possibile trovare un po’ di informazioni su ciò che so fare e i miei contatti in caso si voglia ottenere una consulenza. Lavorando poi come consulente alla programmazione dal 2011 ho anche aperto un blog tecnico nel quale pubblico più o meno regolarmente articoli che contengono tutorial, guide, soluzioni implementative oltre a tre o quattro articoli divulgativi che per la verità non hanno avuto grande successo ma hanno poi portato alla nascita di questo podcast. Ad ogni modo come accennavo prima negli ultimi mesi iniziavo a sentire eccessivo il peso di alcune operazioni ripetitive come ad esempio appunto la manutenzione di questo piccolo blog. Se infatti da una parte erano circa due anni che non pubblicavo praticamente più nulla, dall’altra il costo in termini di risorse per mantenere aggiornato e attivo il sito rimanevano costanti e a mio parere troppo alte dal momento che esso era implementato per mezzo del CMS chiamato WordPress. Quindi aggiornamento del core e dei plugin del tema, spazio occupato e database impegnato sul servizio di hosting, lentezza di caricamento e conseguente punteggio disastroso su google page speed. Questi erano i principali problemi di cui soffriva il sito valeriogalano.it fino a un paio di mesi fa e che mi hanno fatto decidere che era giunto il momento di trovare una soluzione alternativa. Nella mia testa una vaga idea di tale soluzione aleggiava già da mesi ma non c’era mai stata occasione di fermarsi a riflettere su come poterla implementare effettivamente. L’idea era più o meno che semplici funzionalità come una pagina di presentazione e un blog con aggiunta occasionale di una o due immagini di un video da youtube o di un tweet potessero essere realizzate utilizzando tecnologie essenzialmente statiche e attenzione per tecnologie statiche qui intendo quelle che permettono essenzialmente di realizzare un sito fondamentalmente privo di database e di un linguaggio di programmazione e di scripting lato server. Mi riferisco quindi a un qualcosa che utilizzi i soli linguaggi di html, css e javascript. Un sito statico realizzato in questo modo mi avrebbe portato essenzialmente due grandi vantaggi. Prima di tutto sarebbe stato molto più leggero e veloce facendomi risparmiare sul servizio di hosting e migliorando i tempi di risposta che soprattutto negli ultimi tempi sono diventati veramente fondamentali agli occhi dei motori di ricerca come google. In secondo luogo poi avrebbe azzerato il costo di manutenzione. Niente più wordpress da aggiornare, niente più versioni del tema da controllare, niente più licenze dei plug-in da rinnovare e soprattutto niente più bug di sicurezza perché un sito che non ha né database né interprete lato server è molto meno esposto alla possibilità di hacking. Mi sono quindi messo alla ricerca di una soluzione sufficientemente evoluta per implementare un sito statico. Avrei potuto ovviamente scrivere tutto il codice da zero ma ciò avrebbe richiesto moltissimo tempo senza contare che io con il design grafico e il css sono abbastanza impedito e che l’obiettivo era realizzare un sito che sì fosse semplice ma non certo un cazzotto in un occhio dal punto di vista estetico. E poi anche perché un sito nel 2020 deve comunque implementare un set minimo di funzionalità tecniche per essere considerato accettabile e mi riferisco al fatto che ad esempio deve essere responsive anzi oggi come oggi deve essere addirittura mobile first quindi più curato ancora per la visualizzazione da smartphone che da pc o che deve essere compatibile con tutti i maggiori browser o ancora che deve utilizzare delle url semplificate e tanti altri dettagli che hanno un notevole costo implementativo. Ho iniziato quindi a documentarmi e ho trovato editor per progettare e realizzare l’ending page, plugin per convertire siti wordpress in codice statico, temi in html e css da acquistare e poi personalizzare. Poi però un giorno parlando con il mio amico Giuseppe Pugliese è venuta fuori una soluzione che io non avevo mai sentito e che subito mi è parsa molto interessante. Giuseppe è un designer web che un po’ come ho fatto anche io in passato si occupa di progettazione e sviluppo di siti in wordpress, argomento di cui tratta ampiamente anche nel suo podcast Glitch. Vi lascio in descrizione il link, mi raccomando andate a recuperarlo perché nonostante la giovane età Giuseppe dimostra di essere molto competente in materia. Quel giorno però dopo aver ascoltato le mie perplessità mi ha buttato lì un link che in poco tempo avrebbe risolto tutti i problemi del mio sito web. Yugo si autodefinisce il framework più veloce al mondo per la costruzione di siti web. Si tratta di un software scritto in linguaggio Go che permette di creare siti di complessità ridotta sfruttando la sintassi markdown per organizzare i contenuti all’interno di file e cartelle e inserendoli poi all’interno di un tema grafico molto spesso basato su bootstrap. In pratica si sceglie uno fra gli oltre 300 temi attualmente disponibili, si inseriscono un po’ di dati in un file di configurazione, si crea una struttura di cartelle e file per rappresentare ad esempio gli articoli di un blog e le varie pagine e il gioco è fatto. Yugo è in grado di produrre il codice html css finale del sito. Nel mio caso specifico sono bastate un paio d’ore per capire come far funzionare il tutto e produrre un sito personalizzato senza avere alcuna conoscenza pregressa del framework. Non serve neanche conoscere Go a meno che non si voglia implementare un proprio tema da zero o adattare un template che già si possiede. L’installazione dell’ambiente di sviluppo è semplicissima sia che si utilizzi windows linux o mac os. La creazione del progetto richiede l’esecuzione di un semplice comando e l’aggiunta di un tema può essere fatta utilizzando git o banalmente scaricando il codice del tema e copiandolo nella cartella teams del progetto. L’eseguibile di yugo permette quindi di avviare un piccolo server locale che rende il sito navigabile in fase di sviluppo e mostra le modifiche ai contenuti in tempo reale. Una volta che si è soddisfatti del risultato con un altro comando si può avviare la compilazione e generare così la versione statica del sito che potrà quindi essere caricata su un servizio hosting o su un server. Tornando quindi al caso del mio blog una volta preparato il progetto installato e configurato il tema è stato necessario riportare tutti i vecchi contenuti. Per farlo ho utilizzato un plugin per wordpress che ha esportato l’intero sito in versione yugo. L’unico problema è che questo plugin doveva avere qualche tipo di bug perché prima ha sbagliato alcune conversioni e poi non solo mi ha riempito e bloccato il servizio di hosting ma ha anche prodotto una serie infinita degli stessi contenuti in forma ricorsiva. Mi sono quindi ritrovato con un hosting bloccato e una cartella che conteneva articoli, pagine, immagini e una strana cartella che a sua volta conteneva di nuovo articoli, pagine, immagini e un’altra cartella che conteneva articoli, pagine, immagini e così via finché l’operazione non ha saturato lo spaziodisco sull’hosting. Mi è toccato quindi sistemare alcuni testi in modo manuale, rimuovere tutti i file inutili e sistemare i vari contenuti in una forma più semplice ma tutto sommato me la sono cavata in meno di 4 ore di lavoro. Una volta terminata la parte dei contenuti ho integrato la privacy policy utilizzando il servizio di Yubenda e qui sono iniziati i problemi veri. Yugo è perfetto per realizzare siti semplici, è facilissimo e velocissimo da utilizzare ma tutto questo finché non si tenta di realizzare qualcosa per cui non è stato progettato. A quel punto bisogna mettere mano al codice e la situazione si complica un tantino. Nella fattispecie mi sto riferendo al fatto che Yugo, a differenza di Wordpress, non ha il meccanismo dei plugin e quindi non permette di integrare facilmente una funzionalità di cui il mio sito non può fare a meno e cioè il blocco dei cookie di Yubenda. In pratica Yubenda permette di bloccare i servizi esterni come YouTube, Twitter eccetera se l’utente non accetta l’utilizzo dei cookie di terze parti. Questo meccanismo non è direttamente utilizzabile in Yugo almeno per il tema che ho scelto io poi non so se altri temi lo supportano in modo nativo e quindi mi è toccato sviluppare una serie di personalizzazioni che mi hanno portato via un altro po’ di tempo. Se vi interessa il risultato di questo lavoro è visibile all’indirizzo valeriogalano.it dove al termine di una manciata di ore di lavoro ho potuto ottenere una versione convertita in Yugo del mio blog originale in Wordpress. Tuttavia nonostante abbia deciso di realizzare il mio sito con tecnologie statiche avevo e ho tuttora anche l’intenzione di continuare a pubblicare articoli e al punto in cui ero per farciò avrei dovuto semplicemente aggiungere un nuovo file al progetto Yugo, scrivervi all’interno il testo e i dettagli dell’articolo, ricompilare il sito statico e ricaricare il tutto sull’hosting via FTP. Io però sono un programmatore e quindi non sopporto l’idea di dover fare manualmente tutto ciò che è ripetitivo, noioso e può essere chiaramente fatto in modo automatico e quindi ho pensato di sfruttare un altro interessante servizio, cioè le actions di GitHub, per automatizzare tutta la parte di compilazione e copia via FTP in modo da dovermi preoccupare ogni volta che voglio aggiungere o modificare un contenuto solo della parte creativa e potendo quindi lasciare alle macchine il resto dei compiti. A questo proposito vi ricordo che di DevOps abbiamo parlato giusto qualche settimana fa e se non avete idea di cosa stia dicendo beh vi consiglio di recuperare l’episodio numero 22 di Pensieri in Codice. Le GitHub Actions, dicevo, sono meccanismi di automazione configurabili che GitHub mette a disposizione dei propri utenti, ma magari di questo parleremo in un prossimo episodio. La morale della storia è che allo stato attuale se voglio aggiornare il sito mi basta modificare uno o più file e fare push sul repository git e GitHub si preoccuperà di compilare la versione statica e portarla direttamente online. Se qualcuno dovesse essere interessato nei prossimi mesi ho intenzione di pubblicare proprio su valeriogalano.it vari articoli riguardanti i dettagli tecnici sia delle personalizzazioni per Ubenda che delle configurazioni delle GitHub Actions. Ad ogni modo il risultato di questa conversione da WordPress a Yugo è un sito che pesa meno di 5 megabyte quando prima ne pesava oltre 150, che totalizza un punteggio di oltre 95 su Google PageSpeed quando prima arrivava a malapena a 40 e che non necessita di alcuna manutenzione salvo nel caso in cui io voglia cambiare o aggiungere qualcosa. Per quel che mi riguarda il giudizio finale su Yugo è estremamente positivo tanto che ho persino deciso che convertirò anche l’attuale sito di pensieri in codice.it in una pagina statica. Ma quindi vi sto dicendo di buttare via tutti i vostri siti WordPress e sostituirli con siti realizzati con Yugo? Assolutamente no. Al di là della mia esperienza personalmente positiva bisogna anche tenere presente alcuni fattori. Io ho potuto operare questo passaggio principalmente per due motivi. Il primo è che le funzioni di cui ha bisogno il mio sito non sono particolarmente complesse. Se avessi dovuto implementare ad esempio un’area utenti privata o un e-commerce allora la situazione sarebbe stata completamente diversa. Il secondo motivo che mi ha permesso di effettuare questa conversione da WordPress a Yugo è che comunque io sono in possesso di alcune conoscenze che l’utente medio magari non ha. Voglio dire non mi sognerei mai di consigliare ad un cliente magari non particolarmente esperto di informatica di realizzare il proprio sito con Yugo almeno non senza fornirgli una certa assistenza. Per poter ottenere un risultato soddisfacente senza impazzire infatti serve sapere un minimo come funziona un sito web, l’html, il css, sapere usare un terminale e un client ftp, magari git e soprattutto non spaventarsi davanti a un po’ di codice o ad un editor. In definitiva i vantaggi di questo approccio a mio parere sono molti ma è comunque necessario avere o un po’ di competenza tecnica o farsi seguire da un esperto. E qui voi non potete vedermi fare l’occhiolino blink blink ma in descrizione trovate tutti i miei contatti anche nel caso in cui voleste usufruire di un’ eventuale consulenza. Bene con questo si conclude l’episodio di oggi io spero che questa piccola cronaca vi sia risultata interessante e come al solito vi ricordo di mettere like, commentare, condividere, unirvi al gruppo telegram e fare tutto quello che un buon podcaster dice di fare vi ringrazio per aver ascoltato fin qui e vi do appuntamento al prossimo episodio Poi un giorno parlando con il mio amico Giuseppe Pugliese è venuta fuori una soluzione che io non avevo mai sentito ma quindi vi sto dicendo di buttare via tutti i vostri siti wordpress e sostituirli con… e quindi mi è toccato sviluppare una serie di personalizzazioni che mi hanno portato…