Come e' fatto il sito

Fri, Jan 1, 2021 3-minute read

Come lo feci… di Victor Von ktx.

I pacchetti base sono installabili tramite pacman:

  • hugo (version 0.79.0-1)
  • git (version 2.29.2-1)
  • Un editor di testo a vostro piacere (Emacs per me).

Informazioni di base.

Hugo e’ un progetto open pacchettizzato per le maggiori distribuzioni. Si Tratta di un motore di pubblicazione di pagine statiche. I contenuti vengono scritti in MARKDOWN, mentre il layout in html in abbinamento al framework. Hugo rende semplice la realizzazzione dei contnuti, di fatto, conoscendo solo il markdown quindi veramente molto semplice.

Il servizio di Netlify offre la possibilita’ di generare il sito attraverso un repository GIT. Netlify vi permette l’integrazione con un repository github (o alternativi), andando a scaricare il “codice” committato e facendo la build automatica del sito web… molto interessante. Altro aspetto interessante e’ la velocita’ di sviluppo e test delle pagine prima del commit. Il pacchetto di hugo si installa rapidamente e poi vi serviranno pochi comandi per essere gia’ operativi.

Primo passo

Creare il sito web sulla vostra macchina locale.

hugo new ~/home/user/sitoweb # Esempio hugo –help # Le varie possibilita’

Vi verra’ creata la struttura base sulla quale lavorare, qualcosa di simile:

❯ ll
drwxr-xr-x    - ktx 19 Dec 16:36 archetypes
drwxr-xr-x    - ktx 19 Dec 19:46 content
drwxr-xr-x    - ktx 19 Dec 16:36 public
drwxr-xr-x    - ktx 19 Dec 16:36 resources
drwxr-xr-x    - ktx 19 Dec 20:13 static
drwxr-xr-x    - ktx 19 Dec 16:36 themes
.rw-r--r-- 1.4k ktx 19 Dec 19:13 config.toml
.rw-r--r--  26k ktx 19 Dec 16:36 LICENSE

Fatto cio’ sara’ sufficiente far partire il server hugo per vedere gia’ il risultato, ovviamente non vedrete altro che una pagina bianca.

higo server -D # -D e’ opzionale… vedere help

Il Server sara’ attivo sulla porta 1313 ovvero localhost:1313 a disposizione per la visione on-the-fly delle nostre realizzazioni.

Secondo passo

A questo punto, consiglio il download di un tema, poi magari ve ne creerete uno ad hoc quando sarete piu’ esperti. Qui trovate un po di temi:

Seguite le istruzioni per il caricamento nel vostro sito, comunque semplice, si tratta di inserite il tema a artire dalla directory principale nella directory themes, nel mio caso:

ktxoblabcom/themes/m10c… # m10c e’ il tema aggiunto

Successivamente configurate il file config.toml nella root directory del vostro sito e impostate il tema di riferimento:

themesDir = "./themes"
theme = "m10c"

Al salvataggio di ogni filei, hugo server se lasciato running, automaGicamente ricostruira’ il vostro sito in modalita’ runtime. Consiglio di analizzare i template per comprendere come hugo implementa i siti web.

Ultimo passo

La pubblicazione. Tramite un account su github.com potete creare un repository e li commitare/pushare il sito. Colegando Netlify a Github, la procedura parte da Netlify ed e’ molto semplice nonche’ guidata, ad ogni commit il server hugo prelevera’ il codice buildando la versione del sito da ultimo commit. Qui di seguito uno screenshot del log.

Figure 1: il log esposto dal server hugo

Figure 1: il log esposto dal server hugo

Conclusioni

Creare un sito statico e’ qualcosa che non avevo considerato fino a che non ho scoperto hugo. D’altra parte una sito dinamico con database sarebbe veramente sprecato per le mie necessita’ e siccome l’HTML mi annoia a morte questa soluzione si adatta perfettamente al mio caso. Valutate signori e signore… valutate.

Biblio