{"id":66075,"date":"2023-02-27T14:02:30","date_gmt":"2023-02-27T13:02:30","guid":{"rendered":"https:\/\/kinsta.com\/it\/?p=66075&preview=true&preview_id=66075"},"modified":"2023-06-09T16:54:02","modified_gmt":"2023-06-09T15:54:02","slug":"github-pages","status":"publish","type":"post","link":"https:\/\/kinsta.com\/it\/blog\/github-pages\/","title":{"rendered":"Pronti, Partenza, Lancio: Creare un Sito Statico con GitHub Pages"},"content":{"rendered":"

Con tutti gli strumenti e i framework di sviluppo web che esistono, creare un sito web sta diventando sempre pi\u00f9 complicato. A volte, per\u00f2, non c\u2019\u00e8 bisogno di molta interattivit\u00e0 sul sito. Se l’obiettivo \u00e8 far arrivare le informazioni a chi le cerca e non c’\u00e8 bisogno di avere funzionalit\u00e0 complesse, un sito statico potrebbe essere la soluzione migliore.<\/p>\n\n

In questo tutorial scoprirete cos’\u00e8 un sito statico, quali vantaggi offre, quali sono i limiti e come creare e distribuire gratuitamente un semplice sito personale creato con HTML e Bootstrap utilizzando GitHub Pages.
\n

<\/div><\/kinsta-auto-toc><\/p>\n

Cosa Sono le GitHub Pages?<\/h2>\n

GitHub<\/a> \u00e8 una piattaforma web che ospita i repository Git e permette di collaborare a progetti software. Offre strumenti per la condivisione e il tracciamento delle modifiche al codice, la gestione e la revisione del codice e la possibilit\u00e0 di aprire e rivedere le richieste di pull.<\/p>\n

Non confondete Git e GitHub<\/a>! GitHub \u00e8 un servizio di hosting che permette la collaborazione tra developer, mentre Git \u00e8 il software di controllo di versione locale che usate per salvare le istantanee dello stato del vostro progetto software.<\/p>\n

GitHub Pages<\/a> \u00e8 una delle migliori funzioni di GitHub. \u00c8 un servizio che vi permette di ospitare un sito web statico<\/a> direttamente da un repository GitHub. Ci\u00f2 significa che potete usare il vostro repository per archiviare il codice e i file del vostro sito web e GitHub li pubblicher\u00e0 automaticamente come sito web accessibile online.<\/p>\n

In sintesi, GitHub Pages \u00e8 un modo semplice e veloce per rendere operativo il vostro sito ed \u00e8 particolarmente utile per mostrare il vostro portfolio<\/a>, i vostri progetti open-source o altri contenuti statici.<\/p>\n

Siti Web Statici e Dinamici<\/h3>\n

Come abbiamo visto, GitHub Pages offre un modo per distribuire siti web statici<\/a>. Ma qual \u00e8 la differenza tra un sito web statico e un sito web dinamico?<\/p>\n

Iniziamo a parlare dei contenuti di questi siti.<\/p>\n

Per contenuti statici si intendono elementi del sito web che rimangono invariati per tutti gli utenti, indipendentemente da chi siano o da quali azioni compiano sul sito. Si tratta di elementi come il testo, le immagini e il layout del sito, oltre al codice e ai file sottostanti che lo compongono. Un sito statico viene consegnato all’utente esattamente come \u00e8 stato memorizzato.<\/p>\n

Al contrario, i contenuti dinamici sono quelli che cambiano in base alle azioni dell’utente – come l’accesso, l’interazione con un paywall o i commenti a un articolo – o ad altri fattori, come l’ora o la posizione attuale.<\/p>\n

Per esempio, un sito web che mostra un’immagine fissa di un prodotto mostrer\u00e0 sempre la stessa immagine a ogni utente (statico). D’altro canto, un sito web che mostra l’ora corrente mostrer\u00e0 a ogni utente un’ora diversa in base alla sua posizione (dinamica).<\/p>\n

In generale, possiamo dire che un sito web \u00e8 statico se contiene solo HTML, CSS e JavaScript<\/a> sul frontend<\/a>, senza tecnologie server come PHP o Python<\/a> che interagiscono con un database.<\/p>\n

\"La
Twitter \u00e8 un sito dinamico.<\/figcaption><\/figure>\n

Sebbene non sia possibile creare siti web dinamici utilizzando GitHub Pages, potete creare facilmente il vostro utilizzando un CMS<\/a> come WordPress<\/a> o generatori di siti statici come Gatsby<\/a> o Hugo<\/a>.<\/p>\n

Caratteristiche Principali di GitHub Pages<\/h3>\n

Vediamo i punti di forza di GitHub Pages come servizio di hosting:<\/p>\n

    \n
  1. Facilit\u00e0 di configurazione e pubblicazione:<\/strong> GitHub Pages vi permette di iniziare facilmente con pochi semplici passi. Potete attivare GitHub Pages per il vostro repository e specificare la fonte dei file del vostro sito web; GitHub pubblicher\u00e0 automaticamente il vostro sito web e lo render\u00e0 disponibile a un URL basato sul vostro nome utente e sul nome del repository.<\/li>\n
  2. Domini personalizzati:<\/strong> Con GitHub Pages, potete usare un nome di dominio personalizzato per il vostro sito web invece dell’URL predefinito fornito da GitHub. Questo vi permette di utilizzare il vostro marchio e di rendere pi\u00f9 facile per gli utenti trovare e accedere al vostro sito web.<\/li>\n
  3. Supporto HTTPS:<\/strong> GitHub Pages supporta l’HTTPS, che consente di effettuare connessioni sicure al vostro sito web. Questo \u00e8 fondamentale per aumentare la fiducia nei confronti del vostro sito.<\/li>\n
  4. Supporto per Jekyll:<\/strong> GitHub Pages supporta Jekyll, un generatore di siti statici che vi permette di creare siti web sofisticati utilizzando template e altre funzioni. In questo modo \u00e8 facile creare siti web dall’aspetto professionale senza dover scrivere tutto il codice da zero.<\/li>\n<\/ol>\n

    Limitazioni<\/h3>\n

    Come gi\u00e0 detto, potete creare siti statici usando solo GitHub Pages. Se volete creare un progetto complesso con molte funzionalit\u00e0, dovete ricorrere ad altri servizi di hosting<\/a>. Dovete anche tenere presente che non potete usare GitHub Pages per scopi commerciali, come la gestione di un’attivit\u00e0 online o di un ecommerce<\/a>.<\/p>\n

    GitHub Pages non permette al vostro sito di essere pi\u00f9 grande di 1 GB, il che significa che i file del vostro repository non possono superare quella quantit\u00e0 di memoria. Nella maggior parte dei casi, 1 GB \u00e8 pi\u00f9 che sufficiente per un sito statico; assicuratevi sempre di comprimere le immagini<\/a>.<\/p>\n

    Inoltre ha un limite di larghezza di banda di 100 GB al mese. Questa quantit\u00e0 di larghezza di banda \u00e8 sufficiente per distribuire il vostro sito web a qualche migliaio di persone al mese, quindi, a meno che non abbiate un pubblico enorme, sarete a posto.<\/p>\n

    Creare e Distribuire con GitHub Pages: Guida Passo Passo<\/h2>\n

    La creazione di una pagina GitHub \u00e8 un processo semplice e diretto per ospitare un sito statico. Tenete presente che se avete bisogno di un qualche tipo di connessione al database, dovete avere un provider di database<\/a> esterno.<\/p>\n

    Nella seguente guida scoprirete come creare una pagina GitHub da zero. Questo include la creazione di un repository remoto, la creazione di un sito web personale responsive con l’HTML<\/a> e la distribuzione sul web con GitHub.<\/p>\n

    Entriamo nel vivo dell’argomento!<\/p>\n

    1. Iscriversi a GitHub<\/h3>\n

    Per iniziare, dovete avere un account GitHub attivo. Se non ce l\u2019avete, andate alla pagina di registrazione<\/a>. La compilazione del modulo non dovrebbe richiedere pi\u00f9 di un paio di minuti.<\/p>\n

    \"Pagina
    Pagina di registrazione di GitHub.<\/figcaption><\/figure>\n

    Dopo aver effettuato l’accesso, dovreste essere in grado di creare un repository remoto.<\/p>\n

    2. Creare un Repository Remoto<\/h3>\n

    Un repository \u00e8 una directory in cui viene salvato tutto il codice relativo a un determinato progetto.<\/p>\n

    Dalla home page di GitHub, fate clic sul pulsante “New” o “Create repository” situato nel pannello sinistro del sito. In questo modo verrete reindirizzati a un modulo in cui dovrete inserire le informazioni relative al vostro repository.<\/p>\n

    \"La
    Creare un repository GitHub.<\/figcaption><\/figure>\n

    I prossimi passi sono fondamentali:<\/p>\n

      \n
    1. Impostate il nome del vostro repository su \"yourusername\".github.io<\/code>.<\/li>\n
    2. Selezionate il pulsante “Public”. Dovete impostare il repository su Public<\/strong> per pubblicare il vostro sito.<\/li>\n
    3. Aggiungete un README.<\/li>\n<\/ol>\n

      Potete avere un repository solo per un determinato account personale o organizzazione. Ecco perch\u00e9 il nome del repository \u00e8 il vostro nome utente e il dominio github.io<\/code>. Pi\u00f9 avanti vedremo come creare un sito da un repository.<\/p>\n

      A meno che non abbiate GitHub Pro, potete pubblicare una pagina GitHub solo se il repository \u00e8 pubblico. Tenetelo presente se non volete condividere pubblicamente il codice sorgente del vostro sito.<\/p>\n

      A questo punto, dovreste ottenere qualcosa di simile a quanto segue:<\/p>\n

      \"Creare
      Forma del repository GitHub.<\/figcaption><\/figure>\n

      Se il codice sorgente del vostro sito \u00e8 gi\u00e0 funzionante, potete saltare il comune workflow di Git<\/a> e inserire i file direttamente nella repo.<\/p>\n

      Per farlo, fate clic sul menu Add file<\/code> nel vostro repository e selezionate l’opzione Upload files<\/strong>. Quindi selezionate i file del vostro sito web, con il file HTML principale chiamato index.html<\/code>. Ricordatevi di inserire nel repository anche tutti i file CSS e JavaScript.<\/p>\n

      Infine, premete il pulsante Commit changes<\/strong>.<\/p>\n

      \"Caricamento
      Caricare i file su GitHub.<\/figcaption><\/figure>\n

      Nella sezione seguente realizzeremo un semplice sito web personale con HTML e Bootstrap. Poi lo caricheremo su GitHub e lo imposteremo come pagina pubblica di GitHub con un dominio personalizzato.<\/p>\n

      3. Creare un Sito Personale<\/h3>\n

      Inizieremo clonando il repo GitHub appena creato. Per farlo, assicuratevi di avere il client Git<\/a> gi\u00e0 installato sul computer. (Se non ce l\u2019avete, date un’occhiata al nostro tutorial su Git e GitHub<\/a>)<\/p>\n