Sito web del Team per la Trasformazione Digitale.
master branch |
---|
Le configurazioni base del sito si trovano in _config.yml
:
title
: Titolo del sito, per ogni lingua supportataemail
: E-Mail per contattidescription
: Descrizione del sito, per ogni lingua supportataurl
: URL di base del sitotwitter_username
: username Twitter del team per ogni lingua supportata (senza @
)
medium_address
: Link al profilo Medium del team per ogni lingua supportata
linkedin_address
: Link al profilo LinkedIn del team
medium_archive_url
: URL da cui scaricare post Medium (vedi sotto)
logo
: Immagine da usare come logo del sitoOgni pagina ha una variabile ref
il cui valore (stringa senza spazi) identifica univocamente la pagina nella struttura del sito, indipendentemente dalla lingua (i.e. due pagine con lo stesso contenuto ma in
lingue diverse hanno lo stesso valore di ref
). Questo meccanismo viene
usato per creare link indipendenti dalla lingua e per creare una relazione
tra le pagine con uguale contenuto ma in lingue diverse.
Inoltre ogni pagina può avere una variabile (opzionale) parent_ref
che,
se impostata, rende quella pagina "figlia" della pagina identificata dal valore di parent_ref
. Questo meccanismo è usato per creare una gerarchia tra le pagine, che a sua volta è sfruttata durante la generazione dei menù di navigazione.
I menù di navigazione vengono generati partendo dalla gerarchia delle pagine. In particolare i menù di navigazione principali includono solo le pagine che non hanno definito un attributo parent_ref
.
Per queste pagine viene inoltre usato l'attributo numerico menu_position
che permette di impostare l'ordine in cui le pagine principali vengono visualizzate nei menù. Le pagine vengono elencate secondo l'ordine crescente dell'attributo menu_position
.
Ogni membro del team ha una pagina di profilo personale.
Le pagine personali sono in formato Markdown e si trovano nella directory people
all'interno di ogni directory corrispondente alla lingua (es. it
e en
).
L'intestazione della pagina di profilo deve contenere i seguenti attributi:
title
: il nome completo della persona (es. Federico Feroldi
)lang
: il codice della lingua di questa pagina (es. it
)layout
: deve avere il valore people
role
: il ruolo della persona descritto nella lingua della paginais_new
: se true
, viene evidenziato il profilo come "nuovo"twitter_user
: lo username Twitter, senza @
(es. cloudify)medium_user
: lo username Mediumlinkedin_url
: l'url al profilo Linkedin, con l'accortezza di mantenere l'ultima parte dell'url con l'identificativo della pagina, che viene usato come testo nel link (es. http://linkedin.com/in/feroldi
vabene e il testo del link sarà feroldi
, http://linkedin.com/in/feroldi/it
non va bene perchè il testo del link diventerebbe it
).ref
: l'identificativo unico della pagina (es. federico-feroldi
)parent_ref
: deve avere il valore team
Il workflow di creazione delle pagine profilo segue le seguenti fasi:
L'autore della bio può seguire questa procedura, e creare un la Pull Requesta da un fork del repository per editare i file in modo più semplice e sicuro:
images/team/mario-rossi.jpg
con l'immagine di profilo editata secondo la procedura descritta sul documento;it/people/mario-rossi.md
con la bio in italiano;en/people/mario-rossi.md
con la bio in ingleseI post Medium inclusi nell'homepage vengono sincronizzato ad ogni generazione del sito (tramite gulp build
, jekyll build
o jekyll serve
).
I post di Medium vengono scaricati dall'URL impostato nella configurazione medium_archive_url
(nel file _config
).
La logica che sincronizza i post si trova nel plugin custom _plugins/MediumImporter.rb
.
L'autore del post può seguire questo processo di pubblicazione
I template del sito utilizzano alcune traduzioni in modo dinamico (che non sono contenute nel testo della pagina).
Queste traduzioni si trovano nel file _data/t.yml
.
Una pagina del sito potrebbe avere un breve contenuto ma essere popolata da informazioni che provengono da pagine presenti in apposite cartelle e con specifici layout (es. la pagina del Team è composta da una lista di pagine che rappresentano le schede personali). Per questo motivo la data di "ultimo aggiornamento" presente in calce alla pagina dovrebbe rappresentare quella di almeno una delle sotto pagine mostrate nel corpo.
Per fare questo è necessario istruire il front-matter della pagina con apposito parametro last_modified_by_layout
con l'indicazione del nome di layout.
Facendo riferimento all'esempio precedenre avremo quindi:
last_modified_by_layout: people
---
In alcuni casi specifici può rendersi necessario non far stampare la data di "ultimo aggiornamento" poichè può risultare fuorviante (es. homepage)
hide_last_mod_date: true
---
Se vuoi apportare modifiche ai contenuti del sito, devi avere un account Github. L'account Github è gratuito e facilissimo da creare!
Il prossimo passo consiste nel richiedere l'accesso come collaboratore al nostro sito. Puoi chiedere ad Alessandro R. o Federico di darti l'accesso, mandandogli il tuo username Github. Una volta che verrai aggiunto come collaboratore, riceverai una e-mail automatica di invito a collaborare sul repository del sito del team. Dopo aver accettato l'invito nella mail, sarai pronto a proporre modifiche al sito!
Github è molto facile da usare e dispone di un'interfaccia web che ti permette di apportare e proporre modifiche, come un vero hacker! Puoi prendere familiarità con l'interfaccia web guardando questo video di 10 minuti che spiega come apportare modifiche in modo semplice e visuale.
Complimenti! Ora sei pronto per contribuire al nostro sito web seguendo questi passi:
Creare la pagina sotto forma di file con estensione .md
in ogni directory delle lingue supportate (es. it
e en
).
La pagina deve avere l'intestazione con i metadati necessari alla pubblicazione, è utile prendere un'altra pagina statica come base.
Se è la prima volta che crei una pagina, chiedi a Francesco o Federico di aiutarti.
Le pagine profilo di ogni membro del team si trovano nella directory people
sotto ogni directory delle lingue supportate (es. it/people
e en/people
).
Nella creazione di una nuova pagina è utile prendere il contenuto di un profilo esistente come base di partenza.
Ricordati di usare Markdown per impostare gli stili del testo.
Per ogni idea o segnalazione di problemi, usare le issue di Github del progetto.
Jekyll prevede la possibilità di generare automaticamente il sito ogni volta che viene fatta una modifica.
Questo può essere fatto tramite il comando serve:
$ jekyll serve
Oltre a generare il sito, questo comando pubblica il sito in locale all'indirizzo web http://localhost:4000.
La generazione del sito per la pubblicazione richiede un po' più di tempo poiché comprende una serie di ottimizzazioni che rendono il sito più performante.
In questo caso la generazione viene fatta tramite gulp
:
$ gulp build
Il risultato della generazione di troverà nella directory _site
.
Per pubblicare il sito negli ambienti di staging e produzione è necessario creare un file json nella propria home directory con questo formato:
{
"staging": {
"server": "...",
"path": "...",
"port": ...
},
"production": {
"server": "...",
"path": "...",
"port": ...
},
}
Dove server
è nel formato user@host
, path
è il percorso completo alla directory di pubblicazione e port
è la porta SSH per accedere al server (la pubblicazione avviene tramite rsync via SSH).
Installare rbenv
, per esempio con homebrew:
$ brew install rbenv
Installare le gems:
$ gem install bundler
$ bundle install
Installare nodenv
:
$ brew install nodenv
Installare i moduli node:
$ npm install -g yarn
$ yarn install
Quando si sviluppa una funzione nuova o si sistemano dei problemi, è necessario seguire il seguente processo:
1-installazione_jekyll