Hugo e Github Pages - Concetti

📌 Questo è il primo articolo della serie Hugo e GH Pages 📌

Lo scopo di questo articolo è quello di dare una risposta alla domanda “Cosa significa implementare un Sito Web Statico su Github?”.

L’esigenza e la soluzione

Il pretesto dietro la creazione di questo piccolo sito è stato quello di voler utilizzare tecnologie cloud al di fuori di quelle che uso regolarmente in ambito lavorativo, e l’idea iniziale è stata proprio quella di creare ed ospitare un blog totalmente su AWS, di nuovo. Il tutto, ovviamente, incapsulato nel mantra “Va bene studiare, giocare, e rompere tutto, ma una volta messo in piedi deve richiedere meno manutenzione possibile.”

Il progetto prevedeva l’utilizzo dei seguenti servizi AWS:

• S3 per l’hosting dei file html attraverso bucket pubblico;
• Cloudfront per la distribuzione dei contenuti e certificato SSL;
• Route53 per gestione DNS e dominio;

Più basico di così si muore. No AWS Lightsail e affini.

Il valore aggiunto sarebbe stato quello di deployare tutto attraverso Terraform automatizzando quindi il provisioning, studiando successivamente poi un modo per automatizzare anche la parte di rilascio dei contenuti.
Purtroppo però, dopo aver abbozzato i primi script terraform ho ceduto alla noia ed ho ripreso carta e penna - o mouse e tastiera? -.

Da qui il cambio di rotta.

Progettare con Github

L’attuale implementazione è la seguente:

• Due Repository Github, uno (privato) per i sorgenti grezzi del sito ed il secondo (pubblico) che contiene le pagine HTML e la struttura del sito di HUGO;
• Github Actions per il CI/CD che genera il sito;
• Github Pages per l’hosting vero e proprio attingendo dal repo pubblico;
• Porkbun (registrar) per acquisto dominio personalizzato.

Per pubblicare contenuti è sufficiente creare un file markdown .md (e scriverci dentro qualcosa :D) ed effettuare la commit+push sul repository privato. Fine. Stop.
Non c’è bisogno di nessun’altra operazione manuale, la build del sito è automatizzata tramite le Actions.

La realizzazione del flusso è anche piuttosto semplice, il ché rende tutto più manutenibile che in altri scenari.

Tecnologie e servizi utilizzati

Github.com

Chi non conosce Github 👀? E’ il SaaS (Software as a Service) che ha sdoganato per le masse l’utilizzo del famoso version control Git, arricchendolo con miriadi di funzionalità aggiuntive e una bella gui web.

Lo utilizzeremo per:

• creare il repository privato che conterrà i sorgenti nudi e crudi del nostro sito web statico, ovvero le configurazioni HUGO e le bozze dei contenuti;
• creare il repository pubblico che conterrà il sito web costruito, pronto per essere esposto su internet.

Perché usarlo?
Esistono varie implementazioni e servizi che abbracciano Git (Gitlab, Gitbucket per nominarne un paio), tuttavia per questo progetto i fattori fondamentali sono l’hosting di pagine statiche e il CI/CD offerti da Github.
Per i nostri fini è tutto a costo 0: creazione di repo pubblici e privati, Github Actions, GH Pages.

Github Pages

L’hosting del sito (statico). Per usarlo è sufficiente creare un account su Github, creare un repository pubblico (con dei vincoli sul nome che vedremo avanti), e schiaffarci dentro le pagine html statiche prodotte da HUGO. Ci sono delle limitazioni, ma quelle importanti sono in termini di dimensioni del sito (max 1 GB) e banda mensile (100 GB), oserei dire più che sufficiente per un blog/portfolio - YMMV.

Perché usarlo?
E’ free e semplice da usare. E’ gestito da GitHub, non bisogna patcharlo, aggiornarlo, riavviarlo la notte se esplode (no, non esplode).

Github Actions

Il prodotto di CI/CD (continuous integration, continuous delivery) di Github.
In breve esso permette di creare automazioni per manipolare, distribuire, testare, etc sorgenti contenuti in qualsiasi repository ospitato su Github attraverso degli algoritmi strutturati detti workflow (ufficiali o mantenuti dalla community).

Lo utilizzeremo per:

• approvvigionare un ambiente effimero che possa:
  • installare HUGO e costruire il sito partendo dai sorgenti presenti nel repository privato a valle di ogni sua commit/push;
  • caricare il risultato del passo precedente sul repository pubblico che Github Pages esporrà per noi.

Perché usarlo?
Perché siamo pigri. Una volta messo in piedi tutto il processo l’unica cosa di cui dovremo preoccuparci è creare i contenuti del nostro sito sul repo privato: verranno pubblicati automaticamente sul repo pubblico ed esposti su GH pages dopo una manciata di secondi.

Hugo

Hugo.io è uno dei tanti Static Site Generator disponibili. E’ scritto in GO, si installa anche in locale e permette di creare un sito web funzionale partendo da qualche configurazione yaml (o json, o toml) e da contenuti scritti in Markdown. Non sono necessarie competenze di web development per utilizzarlo (per persone competenti potrebbe rivelarsi uno strumento ancora più potente), tuttavia bisogna armarsi di pazienza e leggere la documentazione.
Esistono una valanga di temi belli e pronti sviluppati da bravi Web Devs/Designers e disponibili free (o a pagamento) per personalizzare le pagine. Io utilizzo PaperMod, voi potreste usarne uno qualsiasi pescato qui.

Perché usarlo?
Hugo è estremamente veloce nel costruire il sito (manciata di millisecondi) e relativamente facile da configurare, inoltre esistono tantissimi temi da cui scegliere. Se proprio non vi aggrada allora vi consiglio Jekyll, utilizzato di default per le Github Pages.

Sito Web Statico

Un sito web statico permette di svincolarsi dalla classica architettura webserver + middleware + db, tanto utilizzata in passato, in favore di una approccio più snello che utilizzi semplici pagine HTML+CSS+JS su GH Pages (o AWS S3 + Cloudfront, e tecnologie affine).
Realisticamente per mettere in piedi un semplice blog/portoflio non è necessario un db, e sicuramente non vi serve installare e configurare un webserver con sopra un CMS. Scordatevi apache, wordpress, joomla e affini, patchare php, aggiornare i binari, migrare i database.
Sarà sufficiente creare viva-la-pizza.md e committarlo nel repo privato per poter condividere in pochi secondi, automaticamente e col mondo intero, il vostro amore per la 🍕.

Porkbun.com

Porkbun è un Registrar che offre anche servizi di hosting, DNS management, e webmail. Come lui ce ne sono tanti altri, personalmente l’ho scelto per la convenienza in termini di offerta/costo. Nell’acquisto del dominio è inclusa la privacy del proprietario, gestione DNS, certificati SSL generati automaticamente, e webmail gratuita per una manciata di mesi.

Perché usarlo?
Ogni sito servito da GH Pages viene esposto inderogabilmente con url https://username.github.io, e se non vi piace dovrete comprare un dominio ed attuare le configurazioni del caso ai DNS.
Detto questo, Porkbun offre la possibilità di configurare i DNS per l’utilizzo con GH Pages con due click (letteralmente).

Il secondo articolo in questa serie affronterà i passi operativi per configurare tutte le risorse ed avere finalmente un bel sito web statico da mostrare agli amici!