E perchè questo è legato con lo sviluppo di un sito statico con Hugo?

Da più parti, durante le mie peregrinazioni sul web, avevo sentito parlare di generatori di siti statici per blog e siti. Approfondendo ho scoperto Hugo: un promettente e semplice generatore di siti statici. Nello stesso periodo mi sono appassionato alla riga di comando ed a come svolgere tutta una serie di operazioni di gestione senza utilizzare le utility grafiche (soprattutto nei sistemi Linux e MacOS). Cercavo quindi una scusa per provare Hugo e per approfondire l’uso di strumenti da riga di comando, primo fra tutti Git. E’ la scusa è stata cloudsurfer.it, un dominio che avevo acquistato per un vecchio progetto di e-commerce mai decollato e che è diventato la base sperimentale per questo blog dove raccolgo un po’ di appunti su quello che studio.

Questo è quindi il mio homelab di programmazione web: ogni tanto scrivo articoli, utilizzo Hugo in locale per servire il sito e fare i controlli, quando tutto mi sembra corretto con Git invio al repo privato su Github e Netlify fa il deploy automantico del sito.

Non sono uno scrittore prolifico quindi condivido il processo che ho utilizzo per creare questo sito in modo che questo possa essere sfruttato da creatori di contenuti migliori di me. Questo non è un tutorial: ne puoi trovare tanti on-line e su youtube fatti sicuramente meglio di quello che potrei fare io. Il mio contributo è il flusso operativo che spesso manca nei tutorial.

Hugo: un framwork per costruire siti

Hugo è un framework per costruire siti statici. I siti creati hanno in generale ottime performance dal punto di vista della velocità. I siti generati da Hugo sono statici per il fruitore ma permettono un aggiornamento semplice e continuo da parte dello sviluppatore attraverso pagine .md (markdown) come questa che contiene l’articolo, attraverso file di configurazione .yaml o .toml ed attraverso all’utilizzo ed alla personalizzazione di temi che utilizzano tutto un sistema di shortcodes per la generazione della pagina.

Quindi il sito è veloce come un sito puramente statico ma il programmatore sfrutta Hugo per generarlo invece che programmare direttamente in html, css e javascript.

Ti assicuro che è molto più difficile da spiegare che da fare … il mio consiglio è partire da un progetto semplice, un bel tema preconfezionato e osservare come il framework lavora.

1. Installare Hugo

Il primo passo è installare Hugo per il sistema operativo utilizzato. La procedura è semplice e si riduce al lancio di un comando che varia a seconda del sistema operativo:

MacOS

$ brew install hugo

Windows

$ choco install hugo -confirm

Linux

$ snap install hugo

Consiglio comunque di dare un occhiata alla guida ufficiale di installazione prima di procedere in modo da eseguire la procedura aggiornata: guida installazione Hugo.

2. Crea un nuovo sito Hugo

Con il comando:

$ hugo new site nuovo_sito

Si crea una cartella nuovo_sito con all’interno il nuovo progetto.

3. Aggiungere un tema

Ora che il progetto è creato si deve entrare nella cartella nuovo_sito, inizializzare git ed aggiungere un tema. Ecco ad esempio l’installazione del tema Ananke:

cd nuovo_sito
git init
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke

Sul sito puoi trovare tanti temi creati per diverse tipologie di siti. In quasi tutti i temi trovi le informazioni per l’installare, una descrizione del tema ed un esempio.

In generale quando installi un tema, all’interno della cartella themes/nome_thema trovi una cartella con il sito esempio. Ciascun tema ha un file di configurazione che contiene una serie di parametri che permettono di configurare il sito.

4. Aggiungi un contenuto

Puoi aggiungere un primo contenuto con:

hugo new posts/my-first-post.md

Il nuovo post comincia con alcune righe come sotto dove sono impostati i parametri di base del post. Puoi prendere spunto per questo dal sito di esempio presente nella cartella themes/nome_thema.

---
title: "My First Post"
date: 2021-05-09T08:47:11+01:00
draft: true
---

5. Lancia il server

Per lanciare il server di Hugo usa il comando:

hugo serve -D

Il -D permette di vedere anche i post in draft. Il sito è servito generlamente su http://localhost:1313/; questo è comunque indicato nell’output del comando sopra.

GIT

A questo punto si può caricare il sito su git creando un repository per il sito. La procedura prevede la creazione su github di un repository, quindi l’aggiunta dei file del progetto a questo repo.

Questo articolo non riguarda l’utilizzo di git quindi questo aspetto lo vedremo in un altro contenuto perchè è uguale per tutti i progetti.

NETLIFY

Per questo progetto ho utilizzato per la prima volta netlify nella sua versione gratuita. Questo servizio ti permette di fare il deploy del sito in modo automatico tutte le volte che il repository viene aggiornato. netlify supporta Hugo come generatore di siti statici e quindi quando si aggiorna il repo è il servizio stesso che lancia tutti i comandi di Hugo per costruire il tuo sito. Netlify in automatico pubblica il sito su nuovo_sito.netlify.com. Ma con qualche semplice impostazione nei record DNS del tuo sito puoi far rispondere il tuo dominio principale nome_sito.it.

Conclusione: flusso di lavoro

In conclusione - una volta creato il sito, configurato GIT, configurato NETLIFY, eseguito il primo deploy del sito e verificato che tutto funzioni correttamente - il flusso di lavoro è il seguente:

• Entrare nella cartella con il nuovo sito e fare il pull

  git pull
  

• Creare un nuovo post

  hugo new posts/my-new-post.md
  

• Scrivere il post con l’editor preferito - io utilizzo visual studio code

• Finito il post fare l’add e poi il push sul repository

  git add .
  git push
  

• Dopo qualche minuto Netlify aggiornerà il sito con il nuovo post pubblicato

Questo mi permette di gestire il sito da praticamente tutti i dispositivi che utilizzo compreso l’iPad dove utilizzo l’app textastic.

Comincio con una premessa: mi piace cambiare e provare sempre strumenti nuovi sia per il mio lavoro principale che per la programmazione: una passione che in qualche caso si incrocia con il mio lavoro.

Solitamente il mio setup prevede: un macbook (in questo momento utilizzo un air con processore M1, prima avevo un Pro da 16 pollici), un PC Desktop con Windows (il mio principale PC lavorativo), un iPad (in questo momento ho un Pro da 11 pollici prima generazione), un notebook con Linux (solitamente utilizzo Ubuntu con l’ultima release disponibile anche se ora sono molto incuriosto da Elementary Os e da Pop!_OS). Quest’ultimo pc è quello che sostituisco più di frequente perchè normalmente sono pc usati che rivendo quando trovo qualcosa che mi piace di più e perchè qualche volta lo sostituisco con macchine virtuali installate su un vecchio server aziendale dismesso dove ho installato PROXMOX come hypervisor. Fino a poco tempo avevo anche una macchina virtuale Windows 10 su un server aziendale con hypervisor VMWARE da utilizzare da remoto. Ora ho configurato un semplice sistema domotico che mi permette tra le altre cose di accendere da remoto il mio Pc Desktop in ufficio a cui accedere con la VPN aziendale da qualsiasi altro dispositivo.

La cosa che cerco di realizzare è sempre l’intercambiabilità tra sistemi in modo che posso fare (quasi) qualsiasi cosa con ognuno dei dispositivi che utilizzo.

I software per la navigazione

Come dicevo il mio scopo è quello di poter utilizzare tutti i dispositivi in modo intercambiabile. Uno strumento indispensabile è il browser. Quale usare? All’inizio preferivo utilizzare lo stesso browser ovunque così da delegare a questo la gestione di preferiti e password (insieme ad un file su una cartella condivisa). Questo sistema però crea un problema: spesso ogni sistema ha il browser ideale. Su Windows mi trovavo bene con chrome mentre ora preferisco edge. Su Linux sicuramente firefox è il più performante mentre su MAC safari è il più veloce (soprattutto nel mio attuale mac con M1). Senza considerare poi che alcuni servizi funzionano meglio su alcuni browser (alcuni servizi aziendali funzionano solamente su chrome o su internet explorer). Quindi ora ho scelto di installare su ciascun sistema i browser disponibili in modo da poter verificare la risposta dei siti e portali che programmo sui diversi sistemi. Quindi, a seconda della disponibilità nella singola piattaforma, installo: chrome, edge, firefox e safari.

Per i preferiti utilizzo start.me che permette di creare una pagina iniziale con i bookmarks suddivisi anche tra diverse tab. Ho utilizzato la versione gratuita per diverso tempo per passare alla versione completa in occasione di una promozione.

Per le password utilizzo lastpass. Ne ho provati diversi e questo era quello che dava la versione gratuita più completa. In questo caso sono dovuto passare alla versione a pagamento con le recenti limitazioni al numero di dispositivi introdotte per il servizio gratuito. Una volta provato il sistema di gesione della password è molto difficile rinunciare alla sua comodità. In più aumenta la sicurezza visto che la scelta di password complesse non è più un problema.

I software per la programmazione

Il primo software da considerare è il terminale. Su Linux e Mac il terminale è sempre presente. Su Mac utilizzo anche iTerm 2 che permette una forte personalizzazione con oh-my-ZSH. In questo articolo trovi un ottimo tutorial per la personalizzazione: iTerm2 e oh-my-zsh. Su Windows preferisco una terminale linux like e utilizzo git bash. Su windows abilito anche WSL2.

Per la gestione e condivisione dei progetti di programmazione tra tutti i dispositivi utilizzo quasi esclusivamente GIT.

Come editor di sviluppo installo sempre VSCODE e Sublime Text (e Notepad++ dove disponibile). Quello che al momento utilizzo principalmente è VSCODE con alcune estensioni come docker, Laravel Extension Pack, MySQL, Material Icon Theme, … e qualche altra estensione per toml, .env, javascript, php, css, emmet, …

Altro software indispensabile è docker (e Vagrant anche se ultimamente non utilizzo più Homestead per lo sviluppo con Laravel).

Un discorso a parte va fatto per l’ambiente di sviluppo locale che permette di eseguire applicazioni Php e Laravel. Anche in questo caso ho provato molti sistemi LAMP, WAMP, MAMP, … o ambienti più complessi utilizzando container docker; anche adesso ho generalmente più sistemi installati. Però con Laravel utilizzo quasi esclusivamente SAIL presentato con laravel 8 che si basa su containers docker e rende l’ambiente molto semplice da gestire. Su Windows utilizzo invece principalmente Laragon: super semplice e potente.

I dati

Per i progetti di programmazione, come già detto, utilizzo GIT.

Per tutti gli altri dati utilizzo servizi cloud come Dropbox, Google drive e Onedrive. In questo momento, avendo un account aziendale di office365 ,il mio software principale è onedrive sia con il client per i dispositivi in cui è disponibile sia con accesso via web (per Linux).

I software indispensabili

Gli altri software che installo sempre sono: * Office: word, excel, powerpoint, outlook - office365 mi permette di installare tutte le applicazioni desktop su più piattaforme (su Linux utilizzo le webapp). * Gimp - per l’elaborazione delle immagini. Il mio utilizzo è basico. * Notion - da quando ho scoperto questa applicazione per la gestione della produttività ho spostato tutto quì: agenda, appunti, progetti, note, … ancora è gratuita con un ottimo di livello di funzioni disponibili * Teams - utilizzata per tutta la messaggistica aziendale * Zoom - per le videoconferenze insieme a meet * OpenOffice e LibreOffice - installo sempre anche un sistema di “office” free. Su Mac utilizzo anche Pages, Numbers, Keynotes. * NordVPN - per la sicurezza in mobilità una VPN è, secondo me, fondamentale. Al momento ho l’abbonamento a questo servizio. In più installo il client per il collegamento alla VPN aziendale * Lastpass - per la gestione delle password (come app e/o come estensione dei browser) * Microsoft Desktop remoto - su Linux, a seconda della distro, utilizzo un sistema RDP alternativo * Sistema gestionale aziendale * EXTRA: Adobe Cloud - non è una indispensabile ma da un paio di anni ho un abbonamento ad adobe cloud che mi permette di utilizzare le app desktop (sui sistemi supportati) come Photoshop, Illustrator, Acrobat DC, InDesign, … . L’applicazione che utilizzo maggiormente è Acrobat DC soprattutto per lavoro, per la modifica di documentazione aziendale.

Conclusione

Naturalmente i diversi dispositivi che utilizzo hanno installati diversi altri software che utilizzo per scopi particolari o che semplicemente ho installato per provare. Cerco di mantenere sempre i sistemi il più puliti possibili disinstallando i programmi che non utilizzo. Qualche volta però mi scappa la mano e se la situazione non è più gestibile, faccio un backup e riparto da zero.

Le configurazioni sopra descritte sono quelle di partenza quando configuro un nuovo terminale. Da li poi ciascuno prende una sua strada a seconda anche dell’utilizzo specifico: solo lavoro, solo personale, lavoro e personale, svago, …