Che cos'è GitHub Pages?
In questa unità viene illustrato il processo di creazione e gestione di un sito Web di GitHub Pages.
GitHub Pages sono siti statici ospitati direttamente dal repository GitHub, ma sono più di una raccolta di file statici. Con l'uso di tecnologie di generazione dei siti come Jekyll e Liquid, gli sviluppatori definiscono modelli dinamici elaborati in siti Web statici completi. Ogni volta che viene eseguito il commit di una modifica nel ramo di origine associato al sito, il sito viene rigenerato con gli aggiornamenti più recenti e pubblicato automaticamente nell'URL di destinazione.
Altre informazioni sulla pubblicazione di origini per i siti GitHub Pages.
Abilitazione di GitHub Pages
Il primo passaggio per usare GitHub Pages consiste nell'abilitare questo servizio dalla scheda Impostazioni del repository. È possibile scegliere di usare il ramo main oppure specificare la cartella docs al suo interno. Se si vuole disabilitare GitHub Pages, è possibile farlo da questa posizione.
Scelta di un tema con Jekyll
Jekyll è il generatore di siti statici usato da GitHub per creare il sito Web dal contenuto del repository. Oltre a offrire una grande praticità nell'uso dei contenuti, è anche conforme a una convenzione di progettazione standard. Questa standardizzazione dello stile consente l'uso di temi scambiabili, che è possibile selezionare dalla configurazione di GitHub Pages.
GitHub offre vari temi. È anche disponibile una gamma di temi commerciali e open source della community Jekyll.
Altre informazioni sui temi Jekyll.
Uso del front matter YAML
Il termine front matter si riferisce ai metadati YAML anteposti al contenuto di un file. Per Jekyll questi metadati includono le istruzioni del generatore per indicare lo stile del layout di una pagina Markdown (post, page e così via). Potrebbero includere anche i metadati della pagina, come il titolo del documento o le variabili di contenuto della pagina, ad esempio l'autore di un post di blog.
Nell'esempio seguente viene utilizzato il layout post. Questo esempio presuppone che sia disponibile un file _layouts/post.html che definisce il codice HTML del contenitore. È possibile ottenere altre opzioni di layout aggiungendo i rispettivi file HTML nella cartella _layouts.
---
layout: post
title: This is set as the document title.
---
This is visible body content, which might use Markdown, HTML, and Liquid templating.
Altre informazioni sul front matter.
Personalizzazione del sito
Quando il sito è in esecuzione, è possibile personalizzarne i dettagli tramite _config.yml. Questo file include praticamente tutte le opzioni di configurazione a livello di sito, inclusi i metadati del sito, i menu di spostamento, i colori del tema, le opzioni del compilatore e altro ancora.
Altre informazioni sulla configurazione in _config.yml.
Creazione e modifica di contenuto
La creazione e la modifica di pagine nel sito seguono l'esperienza standard di GitHub. I file usati per il sito Web di GitHub Pages offrono tutti gli stessi vantaggi degli altri file nel repository GitHub. È possibile modificarli con qualsiasi strumento, creare e unire rami e collegare problemi o richieste pull.
Oltre a Markdown e HTML, Jekyll supporta la sintassi del linguaggio del modello Liquid. Liquid consente agli utenti di inserire in modo dinamico variabili e costrutti di flusso di logica di base nei file di contenuto. Quando viene eseguita la compilazione, il prodotto finale è in formato HTML standard.
L'esempio seguente illustra una combinazione di ciclo for e inserimento di variabili.
<ul>
{% for post in site.posts %}
<li>
<h2><a href="{{ post.url }}">{{ post.title }}</a></h2>
{{ post.excerpt }}
</li>
{% endfor %}
</ul>
Altre informazioni sul linguaggio del modello Liquid.
Uso dei post di blog
Nonostante non sia presente un database su cui lavorare, Jekyll supporta comunque il concetto di blog con una convenzione specifica: _posts/2020-06-25-blog-post-name.md. Come si può immaginare, tutti i post di blog vengono archiviati nella cartella _posts e usano la convenzione di data e nome come illustrato. Durante la compilazione, Jekyll elabora i file in questa cartella per produrre un elenco di post di blog HTML.
Nell'esempio seguente viene illustrata la struttura di un semplice post di blog. Include i metadati di subtitle, tags e comments. Il tema scelto potrebbe non supportare questi metadati.
---
layout: post
title: Blog post title rendered by theme
subtitle: Blog post subtitle rendered by theme
tags: welcoming
comments: true
---
This is the first line of rendered content in the post.
Altre informazioni sull'aggiunta di contenuto al sito di GitHub Pages con Jekyll.