Ciao ciao Wordpress... Benvenuto Hugo!

Finalmente dopo tanto torno a postare con una semplice quanto importante novità. L’abbandono di Wordpress per il blog e la migrazione verso un qualcosa di piú veloce e immediato come Hugo. Da un lato la volontà di abbandonare un framework perennemente “sotto attacco” vista la sua diffusione, dall’altra la voglia di provarne uno di nuovo. In questi ultimi mesi ho infatti sentito parlare da piú di qualcuno di Hugo e della sua facilità di utilizzo. Molto usato specie da chi come me, fa uso di frequente del linguaggio Markdown per scrivere la propria documentazione.

Questo blog sará fondamentalmente un sito statico e mi son quindi detto, perché non sceglierlo? Nei giorni scorsi ho quindi cominciato a lavorare alla transizione. Non che avessi scritto molti articoli, però ho dovuto comunque “portarli” e fare i dovuti esperimenti con il tema scelto. Qualche piccolo aggiustamento col tema ed eccoci qua, “nuovamente” on-line.

Qui di seguito un veloce recap delle cose piú importanti emerse durante le sessioni di lavoro con Hugo in questa fase iniziale:

• Pagina principale: https://gohugo.io/
• Installazione di Hugo: https://gohugo.io/getting-started/installing/
  • Consiglio: come indicato nella guida se siete in una qualche distro Linux Ubuntu-based (PopOS! nel mio caso) andate direttamente sulla pagina delle release.
    Evitate di installarlo usando apt-get. Vi ritroverete con una versione obsoleta (i.e 0.80 vs 0.92.1). Personalmente me ne sono accorto durante le prove con lo shortcode Twitter riscontrando problemi.
  • Scegliete un tema che faccia al caso vostro ma soprattutto che supporti tutte le funzionalitá di cui avete bisogno e sia aggiornato oltre che ben documentato. Nel mio caso ho scelto il tema Bilberry.
• File di configurazione principale di Hugo é config.toml all’interno della root del vostro progetto.
  • Il file é ben commentato con indicazioni su cosa fa ogni opzione
  • Importante configurare il flag seguente nel caso la baseURL non sia la root del sito:

    canonifyURLs = true
    

• I temi molto spesso contengono una folder con esempi di pagine, articoli e altri snippet utili come punto di partenza nella creazione del proprio progetto.
  Nel caso del tema Bilberry é presente la cartella “exampleSite”.
• Comandi piú importanti sono:

  # fa partire un webserver interno che consente di testare live le modifiche che si stanno sviluppando
  hugo server
  # effettua la creazione del sito finale
  hugo
  

• Supporto all'internazionalizzazione semplificato:
  • le lingue supportate vanno appositamente configurate nella sezione del file di configurazione
  • i file vanno appositamente creati riportando la sotto-estensione con la lingua: mio-articolo-sul-blog.it.md
  • verificare sempre il supporto i18n fornito dal tema e come va sfruttato/configurato
• Modifiche a layouts e CSS:
  • potrebbe essere necessario editare i “partial templates” per modificare i comportamenti di header, footer o pagina in generale
  • verificare come possono essere modificati i fogli di stile associati al proprio tema. Potrebbe essere necessario ricompilare eventuali file .scss utilizzano npm (come con Bilberry)
• Aggiunta della Favicon per il proprio sito/blog:
  • individuare la folder layouts/partials/favicon.html
  • visitare il sito https://realfavicongenerator.net/ come suggerito e seguire le indicazioni, facendo magari l’upload di una propria immagine
  • copiare il contenuto del pacchetto generato all’interno della cartella static
  • effettuare il replace del file favicon.html con i tags link e meta generati

Per qualsiasi ulteriore dettaglio e approfondimento é sempre importante consultare la guida ufficiale sia di Hugo che del tema scelto.

Questo é tutto, appuntamento quindi al prossimo post!