Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Introduzione a GitHub Pages

Come creare un repository, abilitare GitHub Pages e personalizzare il nostro sito Web con temi e contenuti
Come creare un repository, abilitare GitHub Pages e personalizzare il nostro sito Web con temi e contenuti
Link copiato negli appunti

Negli ultimi anni la necessità di pubblicare contenuti online è cresciuta esponenzialmente, spingendo molti sviluppatori a cercare soluzioni semplici, efficienti e gratuite per ospitare i propri siti web. Tra queste, GitHub Pages si distingue come una delle opzioni più accessibili e versatili. Ma cosa succede se combiniamo la potenza di GitHub Pages con un generatore di siti statici moderno come Zola? In questa lezione getteremo le basi su come utilizzare GitHub Pages in modo da permetterci, nella lezione successiva, di integrare Zola per creare siti web completi, eleganti e personalizzati.

Cos'è GitHub Pages?

GitHub Pages è un servizio offerto da GitHub che permette di ospitare gratuitamente siti web statici direttamente dai repository. Questo significa che possiamo creare, pubblicare e mantenere siti web senza doverci preoccupare di configurare un server o di pagare per l'hosting. La configurazione è semplice e ideale per progetti di ogni scala, dalla documentazione di un software a blog personali.

Un aspetto interessante di GitHub Pages è che supporta l'integrazione con strumenti di sviluppo come Jekyll e, come vedremo, anche con Zola. Ciò consente di trasformare file Markdown in siti web completi, con una struttura e uno stile definiti da template e layout personalizzati.

Vantaggi di GitHub Pages:

  • Facile: non è necessario avere conoscenze avanzate di server o hosting.

  • Gratuito: non ci sono costi per l’utilizzo del servizio.

  • Integrazione con Git: le modifiche al sito possono essere gestite tramite il controllo di versione.

  • Compatibilità con tool avanzati: framework come Jekyll e Zola consentono di automatizzare e migliorare la generazione di un sito.

Esempi di utilizzo:

  • Documentazione di progetti: pubblicare manuali o guide per il software.

  • Portafogli personali: creare un sito professionale per mostrare il proprio lavoro.

  • Blog: scrivere articoli e post in modo semplice e organizzato.

  • Demo di progetti open source: presentare funzionalità e dettagli di un software.

Collaborare su un sito GitHub Pages

Un grande vantaggio nell'utilizzare GitHub Pages è la possibilità di collaborare facilmente con altri sviluppatori o membri del team. Ogni modifica apportata al repository può essere gestita attraverso richieste di pull (pull requests), che consentono di revisionare i contributi prima che vengano integrati nel sito.

Questo approccio garantisce un controllo di qualità efficace e promuove un lavoro di squadra ben organizzato. Inoltre, è possibile definire regole specifiche, come l'approvazione obbligatoria di un revisore prima di unire i cambiamenti. Per progetti di gruppo, l'uso di branch dedicati per nuove funzionalità o correzioni di bug è una pratica consigliata, poiché consente di mantenere la versione pubblica del sito stabile e funzionante mentre si lavora su miglioramenti.

Creare un repository per il sito

Per iniziare a usare GitHub Pages, il primo passo è quello di creare un repository su GitHub che fungerà da contenitore per tutti i file del nostro sito web. Ecco come fare:

  1. Accediamo a GitHub: se non abbiamo un account, registriamoci su github.com e accediamo al nostro profilo.

  2. Creiamo un nuovo repository:

    • Clicchiamo sul pulsante “New repository” nella dashboard.

    • Inseriamo un nome per il repository, ad esempio my-website.

    • Possiamo scegliere se renderlo pubblico o privato. Per un sito pubblico, consigliamo di optare per un repository pubblico.

    • Spuntiamo l'opzione "Add a README file" per includere un file iniziale nel repository.

  3. Completiamo la creazione e clicchiamo su “Create repository”.

Una volta creato, il repository è pronto per ospitare i file del nostro sito web.

Abilitare GitHub Pages

Dopo aver creato il repository possiamo abilitare GitHub Pages seguendo questi passaggi:

  1. Accediamo alle impostazioni del repository. Dal repository, clicchiamo su “Settings” nella barra in alto.

  2. Troviamo la sezione “Pages”. Nel menu laterale sinistro, selezioniamo "Pages".

  3. Configuriamo la pubblicazione:

    • Sotto “Source”, selezioniamo il branch principale (ad esempio, main) e la directory (generalmente root).

    • Clicchiamo su “Save”.

  4. Dopo qualche secondo, verrà visualizzato un URL che rappresenta il nostro sito web, ad esempio: https://username.github.io/my-website/.

Il nostro sito è ora pubblicato!

Aggiungere contenuti al sito

Con GitHub Pages abilitato, possiamo iniziare ad aggiungere contenuti al nostro sito. Ecco come:

  1. Creiamo un file HTML:

    • Nella root del repository, creiamo un file chiamato index.html. Questo sarà il file principale del nostro sito.

    • Usiamo un editor di testo per aggiungere del semplice codice HTML, ad esempio:

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Benvenuti</title>
      </head>
      <body>
          <h1>Ciao, mondo!</h1>
          <p>Benvenuti nel nostro sito ospitato su GitHub Pages.</p>
      </body>
      </html>
  2. Effettuiamo il commit delle modifiche:

    • Aggiungiamo il file al repository tramite l'interfaccia web di GitHub oppure utilizziamo Git in locale:

      git add index.html
      git commit -m "Aggiunto file index.html"
      git push
  3. Controlliamo il risultato. Dopo qualche minuto, possiamo visitare l’URL del nostro sito e vedere la nostra nuova homepage.

Personalizzare il sito con un tema

GitHub Pages offre la possibilità di utilizzare temi predefiniti per rendere il sito più accattivante. Per applicare un tema:

  1. Apriamo le impostazioni di Pages.

  2. Selezioniamo un tema:

    • Nella sezione “Themes”, clicchiamo su “Choose a theme”.

    • Scegliamo tra i temi disponibili e clicchiamo su “Select theme”.

  3. Applichiamo il tema. Questo creerà automaticamente un file _config.yml nel repository.

  4. Possiamo personalizzare ulteriormente il file _config.yml per modificare aspetti del tema (ad esempio, colori, font, e altro).

Il sito ora avrà un aspetto professionale e accattivante.

Gestire domini personalizzati

GitHub Pages consente di associare un dominio personalizzato al sito. Ecco come fare:

  1. Registriamo un dominio presso un registrar.

  2. Configuriamo i DNS:

    • Aggiungiamo un record CNAME che punti a username.github.io.

    • Per i domini apex, utilizziamo record A con gli IP di GitHub Pages.

  3. Aggiungiamo un file CNAME nel repository:

    • Creiamo un file chiamato CNAME nella root del repository e inseriamo il nome del dominio, ad esempio: www.miosito.com.

Dopo aver propagato le modifiche DNS, il nostro sito sarà accessibile dal dominio personalizzato.

Conclusioni

In questa lezione abbiamo presentato GitHub Pages e, in parte, anticipato il fatto che insieme a Zola rappresenta una combinazione ideale per chi desidera pubblicare siti statici di alta qualità in modo rapido ed efficiente. Mentre GitHub Pages semplifica la distribuzione dei siti, Zola consente di sfruttare template avanzati e un'esperienza di scrittura intuitiva per creare contenuti straordinari.

Abbiamo visto come creare un repository, abilitare GitHub Pages e personalizzare il nostro sito con temi e contenuti personalizzati. Nella prossima lezione vedremo nella pratica come creare un sito con Zola su GitHub Pages.

Ti consigliamo anche