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 per lo sviluppo web. 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.
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
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:
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
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:
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:
- Ottenete una copia locale del progetto clonando un repository, o repo. Se state collaborando, dovreste prima fare un fork del repo.
- Create un ramo con un nome rappresentativo della funzione su cui lavorerete.
- Modificate il progetto.
- Fate un commit delle modifiche sulla vostra macchina locale.
- Fate un push delle modifiche al repo remoto.
- Create una richiesta di pull al repo originale.
- 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:
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_urlDovete 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:
Il comando che dovreste eseguire per clonare il repo biforcato è:
git clone [email protected]:yourusername/HTML-site.gitQuando 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.cssQuesto 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:
È 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>
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 headerA partire dal 13 agosto 2021, GitHub richiede l’uso dell’autenticazione SSH, quindi assicuratevi di aver impostato correttamente le vostre chiavi.
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):
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:
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:
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
Git è fondamentale per poter distribuire sulla piattaforma di Hosting di Applicazioni di Kinsta. Gli utenti del servizio collegano i propri account a GitHub, Bitbucket, o GitLab, e gestiscono le distribuzioni attraverso i cruscotti MyKinsta:
Se siete clienti dell’Hosting WordPress Gestito di Kinsta, è possibile incorporare Git in un workflow di distribuzione, accedendo al server tramite SSH da un terminale ed estraendo da un repository su qualsiasi provider di hosting Git.
Abbiamo documentato l’uso di Git su Kinsta per i clienti WordPress. Dopo aver seguito queste istruzioni per preparare una connessione SSH a un server WordPress, potete prelevare un repo Git con un comando come questo:
ssh [email protected] -p PORT "cd /www/my_site/public && git pull https://github.com/user/repo.git"Usare Git con Kinsta può rivelarsi una combinazione straordinaria.
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 potente, essenziale per la piattaforma di Hosting di Applicazioni di Kinsta e spesso utile per i clienti del servizio di Hosting WordPress gestito di Kinsta.
Vale la pena di imparare a usare Git e implementarlo come parte del proprio arsenale di competenze per lo sviluppo web.
Avete altri suggerimenti per migliorare questo flusso di lavoro Git di base per lo sviluppo web? Fatecelo sapere nella sezione commenti!
Lascia un commento