preloader

Hugo, generatore di siti statici

illustrations illustrations illustrations illustrations illustrations illustrations illustrations

Hugo, generatore di siti statici

Pubblicato da Giovanni Bertagna   31 May 2020   |   Categoria: Come fare   |   Tags: hugo  

Hugo, generatore di siti statici

Perché creare un sito statico

Mi ero ripromesso di realizzare una Landing Page, o meglio, una pagina di atterraggio in cui convogliare il traffico proveniente dai link che ho inserito nei miei profili sui social, nei post condivisi, nelle descrizioni dei video e non solo.

Una pagina dove raccontare di me, di quello che faccio e con i riferimenti ai miei siti web.

Così ho realizzato me.bertagna.it, una pagina di atterraggio dove ho inserito quello che faccio e dove seguirmi.

Realizzare una singola pagina mi sembrava riduttivo, così ho creato un vero e proprio mini-sito con tanto di Blog, o meglio un Diario personale.

Hugo, generatore di siti statici

Per realizzare me.bertagna.it, dopo varie ricerche, ho utilizzato il framework Hugo, un generatore di siti statici, invece di WordPress che già utilizzo in Giovanni Bertagna | Blog.

I motivi che mi hanno portato a scegliere il framework Hugo sono vari e questi sono i principali:

  • La curiosità di provare a utilizzare uno strumento diverso da WordPress;
  • La decisione di creare una struttura snella, facile da gestire e quanto più possibile sicura;
  • La necessità di non appesantire l’hosting che già esegue WordPress per Giovanni Bertagna | Blog;

Questi i motivi che mi hanno portato alla scelta di un sito statico e ad approfondire alcuni strumenti disponibili come Jekyll, Gatsby e Hugo, con la scelta di quest’ultimo.

Ho scelto di creare un sito statico perché mi garantisce:

  • una buona velocità di caricamento, dato che le pagine HTML sono già pronte e non devono essere generate ogni volta come in WordPress (anche se non è del tutto vero utilizzando plugin di cache);
  • non dover utilizzare un database, collo di bottiglia per WordPress, però con la conseguenza di non poter creare contenuti dinamici;
  • una struttura semplice, facile da modificare e da adattare alle mie esigenze;
  • l’utilizzo del linguaggio Markdown, ottimo per scrivere testi con estrema velocità grazie alle poche e precise regole.

Certo, un sito statico non ha solo aspetti positivi ma dobbiamo mettere in conto anche qualche compromesso. Ad esempio:

  • impossibilità di creare contenuti dinamici, cioè che si adattano in base alle scelte del visitatore o di altri fattori;
  • difficoltà per creare siti complessi (anche se non è del tutto vero basta vedere i progetti realizzati con Hugo);
  • L’altro fattore che potrebbe scoraggiare è che per creare un sito con Hugo è necessario sporcarsi le mani con il codice, perciò, è richiesta almeno una minima conoscenza dei linguaggi HTML, CSS e JavaScript.

Con Hugo il mio lato Nerd ha avuto la sua rivincita :-)

Se sei un minimo smanettone, e ti piace questo genere di sfide, non avrai certo problemi a creare e pubblicare online il tuo velocissimo sito realizzato con Hugo.

In più Hugo ti mette a disposizione un ambiente di sviluppo locale, pertanto con server localhost per testare il sito in tempo reale, direttamente nel tuo browser, senza dover installare e configurare un server sul tuo computer o affidarti a servizi online.

Landing Page, i contenuti e lo scopo

Perché creare una landing page per i social?

Come già detto, lo scopo di me.bertagna.it è di creare una pagina dove convogliare il traffico proveniente dai link che ho inserito nei profili dei social media a cui sono iscritto, nei post condivisi, nelle descrizioni di video o foto e in genere nei contenuti pubblicati nelle varie piattaforme dove è possibile lasciare un link che faccia riferimento a noi.

Per ovviare a questa esigenza fino ad ora, in alcuni social, ho utilizzato l’ottimo VisitMyLink, uno dei tanti servizi disponibili in rete, ma preferivo qualcosa di più personale e da modificare a mio piacimento.

Quali contenuti inserire nella landing page?

La pagina di atterraggio è suddivisa nelle seguenti sezioni:

  1. About - breve descrizione di chi sono con in evidenza i link dei miei siti web;
  2. Portfolio - elenco dei miei principali progetti principali con link al singolo progetto;
  3. Collaborazioni - slideshow con le agenzie (marketplace) in cui ho caricato contenuti;
  4. Form contatti- un metodo veloce per contattarmi tramite e-mail;

Landing Page in cui raccontare chi sono, cosa faccio e dove seguire quello che faccio.

Non solo landing page

Come detto non mi sono fermato alla creazione di una sola pagina di atterraggio, ma alla fine ho integrato anche:

  • Chi sono - pagina con una descrizione completa e riportante i link dove seguirmi sui social che più utilizzo;
  • Portfolio - pagina contenente tutti i miei progetti con relativo link per approfondire ogni singolo progetto;
  • Contatti - pagina con il form per contattarmi via e-mail, l’iscrizione alla newsletter e la possibilità di inviare un messaggio diretto su Telegram, che preferisco, o su Messenger;
  • Diario - un vero e proprio blog dove pubblico articoli personali che potranno spaziare da pensieri, esperienza d’uso di applicazioni e quant’altro mi va di pubblicare però che non riguarda la fotografia. Per quello ho già il Blog | Giovanni Bertagna e il Diario Fotografico;

Ero partito per realizzare una Landing Page e alla fine ho realizzato un sito completo 😉

Ho già in programma alcune integrazioni, ma intanto partiamo così :-)

Gli strumenti utilizzati

Se questo articolo ti ha incuriosito di seguito elenco gli strumenti utilizzati per realizzare me.bertagna.it:

  • Hugo - Il generatore di siti statici con cui ho realizzato il tutto;

  • Theme - Il tema per Hugo da cui sono partito e che ho in parte personalizzato;

  • Microsoft Visual Code - L’editor avanzato di Microsoft, ottimo per editare il codice, effettuare il debug del sito, scrivere in Markdown

  • GitHub - La piattaforma di sviluppo in cui ospitare il codice con lo storico delle modifiche;

  • SiteGround - L’hosting dove ho caricato il nuovo sito, ottimo per la velocità e soprattutto per l’assistenza;

  • Iubenda - Lo strumento che utilizzo per il rispetto del GDPR e della cookies policies;

  • Google Analytics - Strumento indispensabile per tenere traccia delle visite;

  • Trello - Con le bacheca, liste e schede di Trello puoi organizzare e stabilire la priorità dei tuoi progetti in modo divertente, flessibile e gratificante;

E infine diverse ore di lavoro, meglio dire di puro divertimento, durante le lunghe giornate di lockdown da #COVID19.


---