Come Ho Creato Il Mio Blog Con HUGO
…e abbandonato felicemente Wordpress
Se mi segui da tempo avrai notato che da gennaio ho aggiornato il mio blog. In questo video ti spiego come ho usato Hugo per creare da zero il mio sito.
Intanto diamo un occhiata: ci troviamo sulla homepage di antedoro.it. Lo stile del nuovo sito usa colori pastello per intonarsi con le copertine dei video tutorial che realizzo qui su youtube.
Sul mio blog condivido le mie esperienze lavorative nel campo:
- dell’ingegneria
- la scuola
- e qualche volta alcune mie riflessioni.
Come vedi in homepage ho inserito una sezione featured post che contiene il post più importate in questo momento con a lato sulla sidebar il “chi sono” in breve e un post in evidenza su quanto mi é successo negli ultimi 2 anni.
Più in basso c’è una serie di tiles che portano alle sezioni piu importanti del blog che sono:
- tutti i miei post in ordine cronologico
- il mio portfolio dei lavori
- la sezione dei video tutorial
- e la sezione (mai completa) dei libri che ho letto
Piu in basso il classico elenco di tutti i post in ordine cronologico inverso.
Ora ti mostro come viene renderizzata la pagina di un post.
Per un post generico in cui bisogna concentrare il focus sul contenuto ho scelto di rendere le cose semplici e legibili quindi in alto il titolo poi una breve descrizione ed un’immagine di copertina. Ed ovviamente il contenuto.
Ma ci sono anche i post che hanno anche una sidebar come questo.
Per mostrare il video tutorial pubblicati su youtube ho pensato ad un template dove ho un’anteprima del video youtube, una breve descrizione. E visto che spesso realizzo video che fanno parte di piccole playlist monotematiche anche l’elenco dei video correlati alla playlist. In questo modo puoi vedere tutti i video su un determinato argomento.
Se andiamo a vedere la navbar in alto il primo menu porta al mio portfolio realizzato un template apposito che raccoglie la lista dei post in formato card. Ogni card porta ad un mio lavoro che ho inserito nel mio portfolio.
Più avanti nel menu c’è la pagina tutorial che contiene un elenco ordinato di tutti i miei tutorial in formato video o testo.
Avanti ancora la sezione libri con i link alla pagina amazon.
Poi un form contatti e un about me.
Come vedi il numero di template che ho dovuto realizzare è abbastanza alto (mostrare menu a cascata del tema) per un semplice blog personale e le funzioni disponibili per questo tema sono anche maggiori rispetto a quelle utilizate sul mio blog.
Infatti ho implemetato un menu a cascata con icone; della pagine con la cover grande, una landigpage ed altre funzioni minori.
Ho deciso di rendere open source questo tema che ho chiamato Arberia Theme for Hugo.
Ora ti starai chiedendo come ho realizzato questo sito?
Per realizzare questo sito ho usato Hugo, un generatore di siti statici scritto nel linguaggio GO. Hugo offre diversi vantaggi rispetto al classico Wordpress. Anzi ha una logica di funziamanto del tutto diversa.
A differenza di wordpress, Hugo non interroga un database ogni volta che visiti una pagina per poi comporre l’html+css e inviarlo ma prende i tuoi articoli da un file di testo formattato in markdown e genera l’html che di invia. Tutto questo una sola volta in fase di compilazione a differenza di wp che lo fa tutte le volte.
Ovviamente avrei intuito i vantaggi di una tecnologia simile:
- velocità di caricamento pagina
- Incorruttibilità di database
- sicurezza intrinseca del sito visto che non ci sono database, script serverside o altro
- ma soprattutto la feature che mi piace di più: puoi postarti il tuo blogo su una chiavetta USB sotto forma di file di testo
Cerchiamo allora di capire come funzione più nel dettaglio una tale meraviglia.
Ma prima vediamo di capire chi cosa è il markdown
Che cosa è il markdown
Sicuramante hai usato il markdown senza saperlo almeno un volta.
Ad esempio quando invii un messaggino con Whatsapp e vuoi rendere una parola in grassetto ti basta rinchiudere la parola tra doppio asterisco oppure se vuoi fare una lista ti basta inserire un trattino ad inizio lista ed ecco l’elenco puntato comparire sulla timeline di Whatsapp.
Quindi in definitiva un file formattato in markdown è un semplice file di testo con estensione .md che contiene dei caratteri speciali che vengono visualizzati come:
- grassetto, corsivo, sottolineato;
- elenco puntato o numerato;
- immagine;
- una tabella;
- link interno ad altre parti di testo
- link esterno verso altre pagine
- ecc..
Comprendi che tutti i tuoi articli possono essere scritti in markdown e puoi portarti dietro il tuo intero sito dentro una chiavetta USB.
Come funziona Hugo
Hugo quindi prende questi file scritti in markdown e li trasforma in pagine html in base ad un template preimpostato e lo fa una sola volta al momento di generare le pagine html.
Wordpress tutte le volte che deve servire una pagina html deve
- interrogare un database mysql tramite un linguaggio serverside (PHP)
- generare la pagina sul momento
- e inviarla
Con Hugo ti basta caricare sul server tutti i file html generati durante la compilazione è il gioco è fatto. Ogni volta che l’utente richiede al server una pagina questo la invia senza dover fare nulla.
E’ ovvio quindi che il caricamento delle pagine di semplice html è velocissimo. Anche meno di un secondo contro 3-7 o piu secondi di una pagina wordpress. E sai quanto ci tiene Google alla velocità di caricamento delle pagine.
Ovviamente il contro di questo sistema è che tutte le funzioni di interazione dinamica con l’app come l’iscrizione ad un form,
l’invio di un messaggio tramite un modulo contatti,
un contatore visite ecc devono essere affidate a servizi esterni.
Ma se ci pensi bene sono tutte funzioni che gia affidiamo a servizi esterni, pensa a:
- Google Analitics;
- Iscrizione alla newsletter (Mailchimp, ConvertKit, );
- Contatori visite
- Ecc.
Tutte rinuncie non determinanti rispetto ad avere un sito super-performante.
Inoltre e qui veniamo al lato geek che mi contraddistingue.
Con Hugo conoscendo soltanto html+CSS è possibile realizzare un intero sito,
apportare tutte le modifiche al codice tutte le volte che vuoi senza l’uso di pesanti plugin di wordpress o addirittura ingagiare uno sviluppatore.
Addirittura basta copiare le poche righe di html e css da un sito che ci piace e siamo in grado in pochi minuti di generare il nuovo codice html da caricare nel sito.
Il tema Arberia Theme for Hugo
Poi Hugo è fornito di una miriade di temi gia belli e pronti fra cui anche il mio (Arberia Theme for Hugo) che non è necessario creare un tema personale se vuoi partire gia ora. Ti basta veramente un quarto d’ora per avere un sito funzionante.
Scarica il mio tema Arberia Theme for Hugo
Basta settare l’ambiente di sviluppo e cominciare a scrivere i post in markdown e tramite il comando ‘hugo’ verra generato una cartella ‘public’ in cui sono stati creati i file html di tutto il sito. Basterà copiare questa cartella sul tuo server e il sito è subito servito.
Nel caso invece se vuoi apportare delle modifiche oppure creare un tema tutto tuo basta sapere che in hugo basta inserire dei segnaposti all’interno del template html del sito.
Ovviamente è possibile inserire un po di logica e ad esempio andare a pescare solo alcune informazioni dai markdown che rappresentano le pagine.
Hugo mette a disposizione tutti gli strumenti per elabore i propri CSS pescare dati da file json o tabelle cvs o file Yaml-toml ecc.
Conclusioni
In pratica avrete capito che questi sono tutti vantaggi che ho acquisito nel passaggio da wordpress a Hugo.
- Portabilità di un sito
- Software neutrality
- velocità supersonica
- facilità di programmazione
Ora ti mostro un po di dati sulle prestazioni del sito. Davvero fantastico!
Questo è tutto. Ti invito a prendere in considerazione Hugo perche è un framework davvero interessante.
Con Wordpress mi è sempre sembrato di sparare ad una mosca con un cannone.
Per un semplice sito è necessario istallare e gestire un database.
E per un semplice sito che deve gestire poche pagine mi sembra uno spreco anche se so di siti con migliaia di pagine gestite con Hugo.
Se il video ti è piaciuto ti invito ad iscriverti al canale ed a cliccare la campanellina.
Ciao e alla prossima.