Pronto, partenza, avvio: creazione di un sito statico con pagine GitHub

Con tutti gli attuali strumenti e framework di sviluppo web hot, la creazione di un sito Web sta diventando sempre più complicata. Ma a volte non hai bisogno di molta interattività sul tuo sito. Se ti concentri sull'ottenere le informazioni per il visualizzatore e non hai bisogno di funzionalità complesse, un sito statico potrebbe essere la scelta giusta.

In questo tutorial imparerai cos'è un sito statico, inclusi i suoi vantaggi, i suoi limiti e come creare e distribuire un semplice sito Web personale creato con HTML e Bootstrap gratuitamente utilizzando GitHub Pages.

Cosa sono le pagine GitHub?

GitHub è una piattaforma basata sul Web per l'hosting di repository Git e la collaborazione a progetti software. Offre strumenti per la condivisione e il monitoraggio delle modifiche al codice, la gestione e la revisione del codice e la possibilità di aprire e rivedere le richieste pull.

Non confondere Git e GitHub! GitHub è un servizio di hosting che consente la collaborazione tra sviluppatori, mentre Git è il software di controllo della versione locale che utilizzi per salvare istantanee dello stato del tuo progetto software.

GitHub Pages è una delle migliori funzionalità di GitHub. È un servizio che consente di ospitare un sito Web statico direttamente da un repository GitHub. Ciò significa che puoi utilizzare il tuo repository per archiviare il codice e i file del tuo sito Web e GitHub li pubblicherà automaticamente come sito Web a cui puoi accedere online.

In sintesi, GitHub Pages è un modo semplice e veloce per far funzionare il tuo sito Web ed è particolarmente utile per mostrare il tuo portfolio, progetti open source o altri contenuti statici.

Siti web statici e dinamici

Come abbiamo visto, GitHub Pages fornisce un modo per distribuire siti Web statici. Ma qual è la differenza tra un sito web statico e uno dinamico?

Iniziamo discutendo il contenuto di detti siti.

Il contenuto statico si riferisce agli elementi del sito Web che rimangono gli stessi per tutti gli utenti, indipendentemente da chi siano o dalle azioni che intraprendono sul sito. Ciò può includere cose come il testo, le immagini e il layout del sito Web, nonché il codice sottostante e i file che compongono il sito. Un sito statico viene consegnato all'utente esattamente come è archiviato.

Al contrario, il contenuto dinamico è un contenuto che cambia in base alle azioni dell'utente, come l'accesso, l'interazione con un paywall o il commento a un post, o altri fattori, come l'ora o la posizione corrente.

Ad esempio, un sito Web che visualizza un'immagine fissa di un prodotto mostrerà sempre la stessa immagine a tutti gli utenti (statica). D'altra parte, un sito Web che visualizza l'ora corrente mostrerà un orario diverso a ciascun utente in base alla sua posizione (dinamico).

In generale, possiamo dire che un sito web è statico se contiene solo HTML, CSS e JavaScript sul frontend, senza tecnologie server come PHP o Python che interagiscono con un database.

Sebbene non sia possibile creare siti Web dinamici utilizzando GitHub Pages, puoi creare facilmente il tuo utilizzando un CMS come WordPress o generatori di siti statici come Gatsby o Hugo.

Caratteristiche principali delle pagine GitHub

Vediamo i punti di forza di GitHub Pages come servizio di hosting:

1. Facile configurazione e pubblicazione: GitHub Pages rende facile iniziare con pochi semplici passaggi. Puoi abilitare GitHub Pages per il tuo repository e specificare l'origine per i file del tuo sito Web e GitHub pubblicherà automaticamente il tuo sito Web e lo renderà disponibile a un URL basato sul nome utente e sul nome del repository.
2. Domini personalizzati: con GitHub Pages, puoi utilizzare un nome di dominio personalizzato per il tuo sito Web anziché l'URL predefinito fornito da GitHub. Ciò ti consente di utilizzare il tuo marchio e rendere più facile per gli utenti trovare e accedere al tuo sito web.
3. Supporto HTTPS: GitHub Pages offre supporto per HTTPS, che consente connessioni sicure al tuo sito web. Questo è fondamentale per costruire la fiducia del tuo sito.
4. Supporto Jekyll: GitHub Pages supporta Jekyll, un generatore di siti statici che consente di creare siti Web sofisticati utilizzando modelli e altre funzionalità. Ciò semplifica la creazione di siti Web dall'aspetto professionale senza dover scrivere tutto il codice da zero.

Limitazioni

Come affermato in precedenza, puoi creare solo siti statici con GitHub Pages. Se vuoi costruire un progetto complesso con molte funzionalità avresti bisogno di altri servizi di hosting. Dovresti anche tenere presente che non puoi utilizzare GitHub Pages per scopi commerciali, come la gestione di un'attività online o l'e-commerce.

GitHub Pages non consente al tuo sito di superare 1 GB, il che significa che i file del tuo repository non possono superare quella quantità di memoria. Il più delle volte, 1 GB è più che sufficiente per un sito statico; assicurati solo di comprimere le tue immagini.

Ha anche un limite di larghezza di banda flessibile di 100 GB al mese. Questa quantità di larghezza di banda sarebbe sufficiente per distribuire il tuo sito Web a poche migliaia di persone al mese, quindi, a meno che tu non abbia un vasto pubblico, sarai a posto.

Creazione e distribuzione con pagine GitHub: guida dettagliata

La creazione di una pagina GitHub è un processo semplice e diretto per ospitare un sito statico. Tieni presente che se hai bisogno di un qualche tipo di connessione al database, dovresti avere un provider di database esterno.

Nella seguente guida imparerai come creare una pagina GitHub da zero. Ciò include la creazione di un repository remoto, la creazione di un sito Web personale reattivo con HTML e la distribuzione sul Web con GitHub.

Entriamo in esso!

1. Registrati su GitHub

Per dare il via alle cose, devi avere un account GitHub attivo. Se non ne hai uno, vai alla loro pagina di registrazione. Non dovrebbero essere necessari più di un paio di minuti per compilare il modulo.

Dopo aver effettuato l'accesso, dovresti essere in grado di creare un repository remoto.

2. Creare un repository remoto

Un repository è una directory in cui memorizzi tutto il codice relativo a un particolare progetto.

Dalla home page di GitHub, fai clic sul pulsante "Nuovo" o "Crea repository" situato nel pannello di sinistra del sito. Questo ti reindirizzerà a un modulo in cui dovrai inserire le informazioni del tuo repository.

Questi passaggi successivi sono cruciali:

1. Imposta il nome del tuo repository su "yourusername".github.io .
2. Controlla il pulsante pubblico. Devi impostare il repository su Pubblico per pubblicare il tuo sito.
3. Aggiungi un README.

Puoi avere un repository solo per un determinato account personale o organizzazione. Ecco perché il nome del repository è il tuo nome utente e il dominio github.io . Più avanti vedremo come impostare un sito da un repository.

A meno che tu non abbia GitHub Pro, puoi pubblicare una pagina GitHub solo se il repository è pubblico. Tienilo a mente se non desideri condividere pubblicamente il codice sorgente del tuo sito.

Dopo questo, dovresti avere qualcosa di simile al seguente:

Se disponi già del codice sorgente funzionante del tuo sito, puoi saltare il flusso di lavoro Git comune e trascinare invece i file direttamente nel repository.

Per fare ciò, fai clic sul menu Add file nel tuo repository e seleziona l'opzione Carica file . Quindi seleziona i file del tuo sito Web, con il file HTML principale denominato index.html . Ricorda di inserire anche tutti i tuoi file CSS e JavaScript nel repository.

Infine, premi il pulsante Conferma modifiche .

Nella sezione seguente, costruiremo un semplice sito Web personale con HTML e Bootstrap. Quindi lo caricheremo su GitHub e lo configureremo come pagina pubblica di GitHub con un dominio personalizzato.

3. Costruisci un sito personale

Inizieremo clonando il repository GitHub che abbiamo appena creato. Per fare ciò, assicurati di avere il client Git già installato sul tuo computer. (In caso contrario, dai un'occhiata al nostro tutorial su Git e GitHub.)

Vai alla scheda code del tuo repository e copia l'URL SSH nell'opzione SHH .

Quindi, avvia un terminale o una riga di comando. Sulla maggior parte delle distribuzioni Linux e macOS, puoi utilizzare la scorciatoia Ctrl + Alt + T o cercare Terminal nel menu dell'app del tuo sistema. Su Windows, puoi utilizzare Git BASH installato per impostazione predefinita con Git, CMD, PowerShell o un client GUI.

Sul tuo terminale, digita git clone e l'URL che hai copiato. Questo scaricherà e creerà una copia del repository remoto sul tuo computer locale in modo da poter creare il tuo sito web.

Quindi inserisci la nuova cartella denominata yourusername.github.io con cd e ls . Dovresti vedere la cartella .git , che contiene la configurazione e i metadati del tuo progetto, così come il file README.md se ne hai creato uno.

Apri il tuo editor di testo preferito (come Sublime Text) e iniziamo a creare il tuo sito web.

Alla radice del repository, crea un file denominato index.html (questo nome è richiesto da GitHub Pages) e digita la tipica struttura del codice HTML:

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Kinsta User</title> </head> <body> </body> </html>

Come abbiamo detto in precedenza, utilizzeremo Bootstrap 5.0, un framework CSS open source che ci aiuta a creare siti Web reattivi più facilmente. Come vedrai, non dovremo utilizzare CSS personalizzati per questo particolare sito.

Per inserire Bootstrap nella nostra pagina, dovremo includere il CSS compilato e JavaScript tramite un CDN. Incolla il seguente codice all'interno dell'HTML <head> per poter utilizzare Bootstrap CSS:

 <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

Allo stesso modo, includeremo anche Devicon CDN per poter utilizzare le icone SVG di linguaggi e tecnologie di programmazione popolari senza troppi problemi:

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/[email protected]/devicon.min.css">

Ora, per includere il codice JavaScript, inserisci il seguente codice appena sopra la fine del tag </body> :

 <!-- JavaScript: Above --> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

Daremo il via alle cose creando un'intestazione per il nostro sito web. Sarà un'intestazione scura, con collegamenti alla nostra pagina indice e ad altre due pagine — "Progetti" e "Registro di lettura" — che potrai creare in seguito:

 <nav class="navbar navbar-dark navbar-expand-lg bg-dark "> <div class="container-fluid"> <div class="mx-4"> <a class="navbar-brand" href="#">Kinsta User</a> </div> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse"> <ul class="navbar-nav me-auto mb-2 mb-lg-0"> <li class="nav-item"> <a class="nav-link" href="#">Projects</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Reading Log</a> </li> </ul> </div> </div> </nav>

Usiamo il wrapper Bootstrap navbar e navbar-expand-lg per creare un contenitore reattivo che si comprime quando la larghezza del display è inferiore a 992px. Ciò accade a causa dell'opzione di griglia lg . Se vuoi saperne di più sulle opzioni della griglia, dai un'occhiata alla pagina di layout di Bootstrap.

Ora, creiamo due colonne responsive all'interno di un contenitore: una per un'immagine gratuita da Unsplash e un'altra per una descrizione di noi stessi:

 <div class="container my-4 "> <div class="row justify-content-center"> <div class="col-lg mb-lg-4"> <img src="image.jpg" class="img-fluid" alt=""> </div> <div class="col-lg mx-2 align-self-center"> <div class="my-3"> <h1 class="text-center">I'm a Kinsta User</h1> <p>As a passionate software developer, I am deeply enthusiastic about creating and developing software applications. I am constantly learning and experimenting with new technologies and approaches, and I have a strong desire to create innovative and effective solutions to complex problems. I am driven by my curiosity and love for problem-solving, and I am committed to producing high-quality, well-designed software that meets the needs of users. </p> </div> </div> </div> </div>

Come puoi vedere, stiamo recuperando un'immagine da un file locale, quindi deve essere nel repository quando inviamo le nostre modifiche al repository GitHub.

Infine, all'interno del nostro contenitore Bootstrap, utilizzeremo le icone SVG di Devicon, insieme a un po' di CSS interno per far risaltare le nostre competenze:

 <!-- Inside the container created above --> <div class="my-4"> <div class="text-center mb-4"> <h1>My Skills</h1> </div> <div class="row "> <style> I { font-size: 4em; } </style> <!-- Skills --> <div class="col"> <div class="text-center"> <h4>WordPress</h4> <i class="devicon-wordpress-plain"></i> </div> </div> <div class="col"> <div class="text-center"> <h4>Django</h4> <i class="devicon-django-plain"></i> </div> </div> <div class="col"> <div class="text-center"> <h4>Python</h4> <i class="devicon-python-plain"></i> </div> </div> <div class="col"> <div class="text-center"> <h4>GitHub</h4> <i class="devicon-github-original" ></i> </div> </div> </div> </div>

Poiché utilizziamo il tag HTML <i> , possiamo trattarlo come un font. Quindi impostiamo la dimensione dei nostri loghi a 4 em dichiarandola nel tag style .

Ecco il risultato finale di questo semplice sito web personale:

Sapevi che oltre il 50% del traffico del sito web proviene da dispositivi mobili? Poiché abbiamo utilizzato Bootstrap, abbiamo risparmiato molta codifica CSS e ottenuto anche un sito Web reattivo, come puoi apprezzare di seguito.

Puoi personalizzare questo sito quanto vuoi. Ecco il sorgente completo su GitHub, a tua disposizione.

Puoi persino collegare un CMS headless come Ghost utilizzando una delle nostre soluzioni di hosting di applicazioni complete. Potete connettervi direttamente al vostro repository GitHub tramite il vostro cruscotto MyKinsta e avere il vostro nuovo sito attivo e funzionante in pochi minuti.

È ora di inviare i tuoi file. Per fare ciò, esegui i seguenti comandi sul tuo terminale, al livello più alto del tuo progetto.

 git add . git commit -m "Added website source code and image" git push

Ora possiamo utilizzare questo sito Web per configurare la nostra pagina GitHub.

4. Pubblicazione di una pagina GitHub utente

Non appena invii index.html al repository remoto che prende il nome dal tuo nome utente, GitHub avvierà automaticamente un processo di flusso di lavoro per configurare il tuo sito online. Potrebbero essere necessari un paio di minuti, ma il tuo sito statico sarà attivo e funzionante automaticamente.

L'URL del tuo sito sarà simile al seguente: https://kinstauser.github.io/

Se dopo 10 minuti il ​​tuo sito non è online, puoi provare ad apportare una modifica fittizia al tuo codice (ad esempio, aggiungendo uno spazio) e premere nuovamente per riattivare il processo di creazione delle pagine GitHub.

5. Pubblicazione di una pagina GitHub del repository

Fino ad ora, abbiamo creato un sito utente, ma cosa succede se vogliamo avere più siti GitHub pubblicati? Quindi dobbiamo andare con un sito di progetto.

Ad esempio, utilizzeremo il sito di tecnologia HTML che abbiamo creato nell'esercitazione sullo sviluppo di Git per il Web.

Il modo più semplice è andare alla scheda Impostazioni del nostro repository, quindi all'opzione Pagine all'interno della sezione "Codice e automazione".

Selezionare l'origine Distribuisci da un ramo e fare clic sul ramo da cui si desidera distribuire i file. Si consiglia vivamente di pubblicare dal ramo principale , ma creare funzionalità e correggere bug utilizzando rami ausiliari e quindi unirli. In questo modo non introdurrete così facilmente errori nel sito pubblicato.

Dopo aver selezionato il ramo, seleziona la cartella da cui desideri servire i file, di solito la radice ( / ) e fai clic su Salva.

Ancora una volta, attendi qualche minuto. Il tuo sito dovrebbe essere disponibile su "yourusername".github.io/ .

Per annullare la pubblicazione di un sito di repository, puoi andare su Impostazioni , quindi su Pagine e fare clic sull'opzione dei tre puntini. Vedrai una casella con il messaggio Annulla pubblicazione sito .

Grande! Hai il sito del tuo progetto open source attivo e funzionante, ma il nome di dominio stesso è lungo e certamente non facile da ricordare. Vediamo come possiamo migliorare questo.

6. Configurazione di un dominio personalizzato

Il modo più semplice per impostare un dominio personalizzato per una pagina GitHub e assicurarsi che funzioni è andare al tuo provider DNS e creare quattro record A per gli indirizzi IP delle pagine GitHub:

 185.199.108.153 185.199.109.153 185.199.110.153 185.199.111.153

Devi anche impostare un record CNAME con yourusername.github.io come destinazione. Di solito, le modifiche al DNS sono lente, quindi sii paziente, potrebbe richiedere fino a un'intera giornata.

Dopo averlo fatto, vai alla sezione Dominio personalizzato nelle impostazioni del tuo repository, digita il tuo dominio, fai clic sul pulsante Salva e attendi che GitHub controlli il tuo dominio personalizzato.

Inoltre, se il tuo DNS lo supporta, seleziona la casella Imponi HTTPS per servire il tuo sito solo su HTTPS.

Congratulazioni! Se hai seguito fino a questo punto del tutorial, hai un sito Web statico ospitato gratuitamente in GitHub Pages.

Best practice per le pagine GitHub

Prima di separarci, ecco alcune best practice che dovresti prendere in considerazione quando pubblichi un sito GitHub:

1. Non effettuare mai commit diretti al ramo da cui stai distribuendo. Crea modifiche in altri rami, quindi crea una richiesta pull.
2. Seleziona un buon dominio per il tuo sito se te lo puoi permettere. È una delle decisioni più importanti per il tuo marchio personale o di progetto.
3. Non utilizzare GitHub Pages per scopi commerciali, come creare un sito di e-commerce.
4. Valuta le tue esigenze. È fantastico poter pubblicare un sito statico gratuitamente, ma se ti aspetti molto traffico o desideri funzionalità complesse, pagare per un ottimo servizio di hosting è la strada da percorrere.

Riepilogo

Lo sviluppo web sta diventando sempre più complicato ogni giorno. I siti statici esistono dall'avvento di Internet e sono un ottimo modo per iniziare a creare progetti.

In questo tutorial, hai imparato cosa sono i siti statici e come configurarli online usando GitHub Pages. Hai creato un semplice sito personale utilizzando Bootstrap e lo hai pubblicato come sito utente GitHub. Hai anche imparato come rendere attivo e funzionante il sito di un progetto e come annullarne la pubblicazione se necessario.

Nel complesso, GitHub Pages è un modo conveniente e potente per ospitare gratuitamente il tuo sito Web statico. Sia che tu stia cercando di mostrare il tuo portfolio, condividere i tuoi progetti open source o iniziare a creare una presenza online, GitHub Pages è una scelta eccellente. E una volta ottenuto abbastanza traffico o siete pronti a creare un sito full-stack, potete passare senza problemi ad altri servizi di hosting di applicazioni come quello di Kinsta senza perdere un colpo.