Lo sviluppo web è intrinsecamente legato alla collaborazione. La maggior parte del tempo lavorerete con altre persone che si occupano di sviluppo; e anche se non lo fate, Git può aiutarvi in molti altri modi.

Git è il software che controlla la versione delle applicazioni che costruiamo. È usato da sviluppatori e sviluppatrici che lavorano in autonomia, da grandi aziende e persino da Linux, il più grande progetto open source del mondo.

Se lavorate nello sviluppo web, è estremamente importante sapere come usare correttamente Git. Non stiamo parlando solo di “git add”, “git commit” e “git push”. Dovreste conoscere l’intero flusso di lavoro della creazione di un progetto web con Git.

Avete dei dubbi? Cominciamo!

Perché Usare Git?

Queste sono solo alcune delle ragioni per iniziare a usare Git:

  • Organizzazione: Invece di gestire il vostro progetto in cartelle come v1, v2, v3, ecc., avete un unico progetto con un database speciale che memorizza tutte le versioni dei file
  • Collaborazione: Git permette a voi e ad altre persone di lavorare sullo stesso progetto contemporaneamente e senza creare conflitti.
  • Open-source: Git è open-source, ma è anche lo strumento che usiamo per collaborare e creare il software open-source. Chiunque può fare richieste di pull ai progetti open-source su piattaforme come GitHub o Bitbucket.
  • Flessibilità della piattaforma: Al giorno d’oggi, avete molti diversi servizi di hosting Git tra cui scegliere, come Gitlab, GitHub, Bitbucket e SourceForge. Potete anche usare una soluzione self-hosted per tutti i vostri progetti.
  • Backup facili: Annullate gli errori con facilità e non perdete mai il codice base del vostro progetto.
È ora di imparare qualcosa in più di 'git add', 'git commit' e 'git push' 👩‍💻 Approfondisci tutto ciò che c’è da sapere su un tipico flusso di lavoro Git in questa guida 👇Click to Tweet

Abbiamo menzionato il termine GitHub una o due volte, quindi qual è la differenza tra Git e GitHub?

Questo potrebbe creare confusione se non avete esperienza con Git. Per dirlo in parole semplici, Git e GitHub sono strumenti correlati ma diversi.

Git è il sistema di controllo di versione (VCS) che usiamo per mantenere il controllo delle modifiche dei nostri file, mentre GitHub è un servizio che usiamo per memorizzare i file del nostro progetto e la loro storia Git online (si trova nella cartella .git/ del vostro progetto).

Git è installato localmente, sulla vostra macchina, e senza servizi di hosting come GitHub o GitLab, sarebbe molto difficile collaborare con altri sviluppatori.

GitHub sovralimenta Git aggiungendo altre caratteristiche che migliorano la collaborazione, come la clonazione, il forking e il merging. Insieme, questi due strumenti si combinano per offrivi un ecosistema relativamente amichevole per sviluppare, gestire e mostrare il vostro progetto ad altre persone.

Flusso di Lavoro di Base di Git per lo Sviluppo Web

Nelle prossime sezioni vedremo gli aspetti pratici del flusso di lavoro di Git per lo sviluppo web.

Requisiti per l’Installazione

Se non avete ancora installato Git, questo è il momento perfetto. È facile da installare e disponibile sulla maggior parte dei sistemi operativi.

Scaricatelo dalla pagina ufficiale dei download o installatelo con un gestore di pacchetti se state usando Linux o macOS:

La pagina dei download di Git mostra le opzioni per macOS, Windows, e Linux/Unix.
Pagina dei download di Git.

Per verificare che tutto sia andato bene con l’installazione, accedete al terminale su Linux o macOS cercando “Terminal” nel vostro menu delle applicazioni, o aprendo Git bash su Windows (che viene installato con Git per impostazione predefinita).

Poi digitate:

git --version
Schermata del terminal Linux in cui si legge Git version 2.33.
Versione Git.

Se ottenete una versione Git come risposta, siete a posto.

Avremo anche bisogno di un account GitHub, quindi assicuratevi di registrarvi o di accedere a GitHub:

Pagina di iscrizione a GitHub con il cima il motto "Create your account"
Pagina di iscrizione a GitHub.

Una volta che avete installato Git e siete dentro il vostro account GitHub, potete passare alla prossima sezione.

Flusso di Lavoro Git di Base per Progetti Collaborativi

Come detto prima, la maggior parte delle volte non svilupperete progetti da soli. Collaborare è un’abilità chiave e Git e GitHub ci aiutano a renderlo un processo semplice ma efficace.

Il tipico flusso di lavoro di un progetto Git assomiglia a questo:

  1. Ottenete una copia locale del progetto clonando un repository, o repo. Se state collaborando, dovreste prima fare un fork del repo.
  2. Create un ramo con un nome rappresentativo della funzione su cui lavorerete.
  3. Modificate il progetto.
  4. Fate un commit delle modifiche sulla vostra macchina locale.
  5. Fate un push delle modifiche al repo remoto.
  6. Create una richiesta di pull al repo originale.
  7. Fate un merge e risolvete i conflitti nella branch principale del repo originale.

Tutorial

Ora è il momento di sporcarsi le mani!

Con questa guida vi insegniamo a creare un semplice sito HTML. Per scopi pratici, farete un fork del progetto base dal repository del sito HTML al vostro account GitHub. Questo può essere fatto per tutti i repository pubblici disponibili.

Per effettuare il fork del sito HTML, andate a questo repository GitHub e fate clic sul pulsante Fork situato in alto a destra della pagina:

Pagina GitHub con il pulsante "Fork" in evidenza.
Fork su GitHub.

Ora avete un fork del repo originale che è disponibile solo sul vostro account GitHub. È lo stesso identico repo, almeno fino a quando non iniziate ad apportare modifiche.

Come potete vedere, biforcare un repo pubblico richiede solo un paio di secondi. Questo è ottimo per i progetti open-source, ma tenete presente che se la vostra organizzazione ha un repo privato, dovrete avere il ruolo di contributor prima di realizzare il fork.

È il momento di portare il vostro fork sulla vostra macchina locale. Per farlo, dovete clonarlo con il comando git clone, che recupera il repository Git dal server remoto:

git clone remote_url

Dovete sostituire remote_url con l’URL del vostro fork. Per ottenere l’URL esatto di un repo GitHub, andate alla sua pagina e fate clic su Code. Poi scegliete SSH e copiate il link che ricevete:

URL del repo SSH sotto il pulsante "Code" in GitHub.
URL SSH.

Il comando che dovreste eseguire per clonare il repo biforcato è:

git clone [email protected]:yourusername/HTML-site.git

Quando clonate un repo, ottenete una cartella con il suo nome. All’interno di quella cartella c’è il codice sorgente del progetto (in questo caso, il sito HTML) e il repo Git, che si trova all’interno di una cartella chiamata .git.

Potete vedere l’elenco dei file all’interno della nuova cartella aprendo la nuova cartella in un file manager grafico o elencandoli direttamente dal terminale con i comandi

ls o dir:

# Linux/macOS
ls HTML-site/
# Windows
dir HTML-site
.git images .gitignore index.html LICENSE README.md styles.css

Questo sito HTML è molto semplice. Usa Bootstrap per scopi pratici e alcune immagini da Unsplash, dove potete scaricare immagini gratuite per il vostro sito.

Se aprite il file index.html nel vostro browser, vedrete una semplice pagina con alcune immagini:

Pagina demo con immagini di dispositivi tech, inclusi alcuni computer e una vecchia macchina fotografica.
La semplice pagina web che stiamo creando.

È il momento di giocare con questo progetto. Sembra un po’ vuoto e forse un’intestazione con il nome del sito potrebbe migliorare l’esperienza utente.

Per farlo, entrate nella directory HTML-sito e create una branch chiamata header. In questa nuova branch, possiamo modificare tutti i file e implementare tutto il codice che vogliamo perché non influenzerà la branch principale (e originale).

Eseguite il seguente comando:

git checkout -b header

Questo creerà una branch chiamata “header” e subito dopo questo passerete a questo.
È equivalente a:

git branch header
git checkout header

Per confermare che tutto è andato bene, eseguite:

git status
# On branch header
# nothing to commit, working tree clean

Vedrete che vi siete spostati dalla branch “main” alla branch “header”, ma l’albero di lavoro è ancora pulito perché non abbiamo modificato alcun file.

Nel vostro editor di codice preferito, aprite il file index.html nel vostro progetto ramificato. Questo file include alcuni link a Bootstrap 5, così possiamo trarre vantaggio dai componenti pronti all’uso del framework.

Aggiungete il seguente codice al file index.html all’interno del tag <body> e sopra il contenitore delle immagini:

<header>
  <nav class="navbar navbar-light bg-light">
    <div class="container-fluid">
      <span class="navbar-brand mb-0 h1">HTML site</span>
    </div>
  </nav>
</header>
Pagina demo con immagini di dispositivi tech, inclusi alcuni computer e una vecchia macchina fotografica e l’intestazione con scritto ‘HTML site’ su sfondo nero.
La nostra pagina web con una nuova intestazione.

Molto più bella! Create pure altre branch e fate tutte le modifiche che desiderate.

Una volta che avete finito di modificare il progetto, è il momento di fare un commit di tutti i cambiamenti nel vostro repo locale. All’interno della directory del progetto, digitate quanto segue nel terminale:

git add --all
git commit -m "Added simple header in index.html file"

Quando si inizia un progetto, è comune iniziare con messaggi di commit descrittivi, ma man mano che passa il tempo e la concentrazione va altrove, la qualità dei messaggi tende a scendere. Cercate di mantenere una buona pratica di denominazione.

Ora avete fatto un commit nel vostro repo locale (che è ancora disponibile solo sul vostro computer), è il momento di inviarlo al repository remoto.

Se provate a fare un push del commit normalmente, non funzionerà perché state lavorando sulla branch header. Dovete impostare il ramo upstream per header:

git push --set-upstream origin header

A partire dal 13 agosto 2021, GitHub richiede l’uso dell’autenticazione SSH, quindi assicuratevi di aver impostato correttamente le vostre chiavi.

Non ne puoi più del supporto di un hosting WordPress di livello 1 che non ti dà le risposte? Prova il nostro team di supporto di prima classe! Dai un’occhiata ai nostri piani.

Dopo questo, dovreste essere in grado di vedere una nuova branch chiamata header nel vostro repository biforcato ( per esempio https://github.com/yourusername/HTML-site/branches):

La branch Header nella scheda Overview della pagina GitHub del nostro progetto.
Il ramo “header”.

Per creare una richiesta di pull al repo originale, fate clic su Compare, in basso nella sezione Active branches.

Questo vi porterà a una richiesta di pull, dove dovrete scegliere con quale branch (l’originale o il vostro fork) volete unirvi. Per impostazione predefinita, mostra l’opzione di merge con il repository di base:

Creazione di richieste di pull su GitHub con il titolo "Comparing changes."
Creare richieste di pull su GitHub.

Una volta che avete fatto clic sull’opzione richiesta di pull, dovrete scrivere una breve descrizione delle modifiche apportate, proprio come per i vostri commit precedenti. Ancora una volta, cercate di rimanere concisi ma descrittivi:

La pagina "Open a pull request" su GitHub che mostra un messaggio di pull che spiega i dettagli della pull request.
Scrivere un messaggio di richiesta di pull.

Fate clic sul pulsante Create pull request e aspettate che la persona proprietaria del repository di base accetti o vi dia un feedback sulle modifiche.

Congratulazioni, avete appena completato tutti i passaggi per un tipico flusso di lavoro Git per lo sviluppo web!

Questo era un esempio davvero basilare, ma la logica si estende a progetti di tutte le dimensioni. Assicuratevi di implementare questo flusso di lavoro anche in progetti collaborativi più grandi.

Come Usare Git su Kinsta

Se siete utenti Kinsta, avete già due modi per usare Git e GitHub dall’interno del votro portale MyKinsta.

Iniziamo con la prima opzione. Potete facilmente accedere con SSH e prelevare un repo da qualsiasi servizio di hosting Git come GitHub, Gitlab o Bitbucket.

Per farlo, andate nella vostra scheda Siti, selezionate un sito, andate nella sezione dei dettagli SSH e copiate il comando del terminale SSH.

Pagina delle informazioni del sito su MyKinsta che mostra i dettagli SSH e la sezione dei comandi.
Sezione dei dettagli SSH.

Accedete via SSH al vostro sito incollando il comando qui sopra nel vostro terminale ed entrando nella cartella pubblica del vostro sito (situata sotto /www/yoursitename/). Qui è dove si trovano tutti i vostri file di WordPress, così potete tirare giù un repo Git con un tema personalizzato o un plugin su cui state lavorando.

Ecco come potete scaricare un repo Git con un semplice comando:

ssh [email protected] -p PORT "cd /www/my_site/public && git pull https://github.com/user/repo.git"

Ora, introducendo la nuova funzione di deploy GitHub di Kinsta, potete distribuire un sito WordPress completo da un repository GitHub.

Il vostro repo GitHub dovrebbe includere una copia dei file principali di WordPress e, naturalmente, il contenuto del vostro sito all’interno della cartella wp-content.

Diamo un’occhiata veloce a questa opzione.

Andate su uno dei siti della vostra azienda e create un ambiente di staging. Questo non dovrebbe richiedere più di un paio di minuti.

Opzione dell'ambiente di staging della pagina del sito di Kinsta.
Ambiente di staging.

Una volta che siete nel vostro sito di staging, andate alla scheda Distribuzione e fate clic sul pulsante Avvia la configurazione. Vedrete un modale di GitHub che permetterà a Kinsta di connettersi con il vostro account GitHub.

Ora, selezionate il repo da cui preleverete il vostro sito.

Connetti Kinsta al modale GitHub con diverse opzioni tra cui un pulsante Termina
Collega Kinsta a GitHub.

Infine, portate in distribuzione il vostro sito e visitatelo tramite l’URL del vostro sito di staging.

Pulsante Distribuisci ora.
Pulsante Distribuisci ora.

Questa funzione è ancora in Beta, ma presto ogni utente Kinsta vi avrà accesso.

Usare Git e Kinsta può essere una combinazione potente se sapete farlo bene. Anche se il nostro tutorial qui presenta solo un semplice esempio, potete imparare molto di più dalla sezione su Git della nostra knowledge base.

Approfondisci le tue conoscenze di Git in questa guida sul flusso di lavoro di un tipico progetto web ✅Click to Tweet

Riepilogo

Al giorno d’oggi, Git è uno strumento indispensabile per lo sviluppo web, dato che la maggior parte del tempo collaborerete con altre persone per creare il miglior progetto possibile.

In questo articolo abbiamo discusso alcune importanti ragioni per usare Git nei vostri progetti e vi abbiamo mostrato il flusso di lavoro di base della collaborazione in un repo Git.

Git è uno strumento così potente che potete estendere il suo utilizzo anche all’hosting di WordPress, quindi non può che farvi bene impararlo e implementarlo come parte del vostro arsenale di competenze di sviluppo web.

Avete altri suggerimenti per migliorare questo flusso di lavoro Git di base per lo sviluppo web? Fatecelo sapere nella sezione commenti!


Risparmia tempo e costi e massimizza le prestazioni del sito con:

  • Aiuto immediato dagli esperti dell’hosting WordPress, 24/7.
  • Integrazione di Cloudflare Enterprise.
  • Copertura globale del pubblico con 32 data center in tutto il mondo.
  • Ottimizzazione del sito con il nostro Monitoraggio delle Prestazioni delle Applicazioni integrato.

Tutto questo e molto altro, in un piano senza contratti a lungo termine, con migrazioni assistite e una garanzia di 30 giorni di rimborso. Scopri i nostri piani o contattaci per trovare il piano che fa per te.