Git per lo sviluppo Web: conosci il flusso di lavoro tipico di un progetto

Lo sviluppo web è intrinsecamente correlato alla collaborazione. La maggior parte delle volte lavorerai con altri sviluppatori e, anche se non lo fai, Git può aiutarti in molti altri modi.

Git è il software che controlla la versione delle applicazioni che realizziamo. È utilizzato da sviluppatori solisti, grandi aziende e persino Linux, il più grande progetto open source al mondo.

Come sviluppatore web, è estremamente importante sapere come utilizzare correttamente Git per lo sviluppo web. Non stiamo parlando solo di "git add", "git commit" e "git push". Dovresti conoscere l'intero flusso di lavoro della creazione di un progetto web con Git.

Non sei ancora convinto? Iniziamo!

Perché usare Git?

Questi sono solo alcuni dei motivi per iniziare a usare Git:

• Organizzazione: invece di gestire il tuo progetto in cartelle come v1, v2, v3, ecc., hai un progetto con un database speciale che memorizza tutte le versioni dei file
• Collaborazione: Git consente a te e ad altre persone di lavorare allo stesso progetto contemporaneamente senza creare conflitti.
• Open-source: Git è open-source, ma è anche lo strumento che utilizziamo per collaborare e creare un ottimo software open-source. Chiunque può effettuare richieste pull a progetti open source su piattaforme come GitHub o Bitbucket.
• Flessibilità della piattaforma: al giorno d'oggi, hai molti diversi servizi di hosting Git tra cui scegliere, come Gitlab, GitHub, Bitbucket e SourceForge. Puoi persino utilizzare una soluzione self-hosted per tutti i tuoi progetti.
• Backup facili: annulla facilmente gli errori e non perdere mai la base di codice del tuo progetto.

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

Questo potrebbe confonderti se sei completamente nuovo su Git. Per dirla in parole semplici, Git e GitHub sono strumenti correlati ma diversi.

Git è il sistema di controllo della versione (VCS) che utilizziamo per mantenere il controllo delle modifiche dei nostri file, mentre GitHub è un servizio che utilizziamo per archiviare i nostri file di progetto e la loro cronologia Git online (che si trova nella cartella .git/ del tuo progetto) .

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

GitHub potenzia Git aggiungendo altre funzionalità che migliorano la collaborazione, come la clonazione, il fork e l'unione. Insieme, questi due strumenti si combinano per offrirti un ecosistema relativamente amichevole per sviluppare, gestire e mostrare il tuo progetto ad altre persone.

Git di base per il flusso di lavoro di sviluppo Web

Nelle sezioni successive, imparerai di più sul flusso di lavoro Git per lo sviluppo web attraverso esercitazioni pratiche.

Requisiti di installazione

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

Scaricalo dalla pagina dei download ufficiale o installalo con un gestore di pacchetti se utilizzi Linux o macOS:

Per verificare che tutto sia andato bene con l'installazione, avvia un terminale su Linux o macOS cercando "Terminale" nel menu delle applicazioni o aprendo Git bash su Windows (che viene installato con Git per impostazione predefinita).

Quindi digita:

 git --version

Se ricevi una versione Git come risposta, sei a posto.

Avremo anche bisogno di un account GitHub, quindi assicurati di registrarti o accedere a GitHub:

Dopo aver installato Git e aver effettuato l'accesso al tuo account GitHub, puoi passare alla sezione successiva.

Flusso di lavoro Git di base per progetti collaborativi

Come accennato in precedenza, la maggior parte delle volte non svilupperai progetti da solista. La collaborazione è un'abilità chiave e Git e GitHub ci aiutano a renderlo un processo semplice ma efficace.

Il flusso di lavoro tipico di un progetto Git è simile al seguente:

1. Ottieni una copia locale del progetto clonando un repository o repository. Se stai collaborando, dovresti prima eseguire il fork del repository.
2. Crea una filiale con un nome rappresentativo della funzione su cui lavorerai.
3. Modifica il progetto.
4. Conferma le modifiche sulla tua macchina locale.
5. Invia le modifiche al repository remoto.
6. Crea una richiesta pull al repository originale.
7. Unisci e risolvi i conflitti nel ramo principale del repository originale.

Esercitazione

Ora è il momento di sporcarci le mani!

In questa guida creerai un semplice sito Web HTML. Per scopi pratici, esegui il fork del progetto di base dal repository del sito HTML al tuo account GitHub. Questo può essere fatto per tutti i repository pubblici disponibili.

Per eseguire il fork del sito HTML, vai su questo repository GitHub e fai clic sul pulsante Fork situato in alto a destra nella pagina:

Ora hai un fork del repository originale disponibile solo sul tuo account GitHub. È lo stesso identico repository, finché non inizi a eseguire il commit delle modifiche.

Come puoi vedere, il fork di un repository pubblico richiede solo un paio di secondi. Questo è ottimo per i progetti open source, ma tieni presente che se la tua organizzazione ha un repository privato, dovrai essere incluso come collaboratore prima di provare a biforcarlo.

È ora di portare il fork sulla tua macchina locale. Per fare ciò, devi clonarlo con il comando git clone , che recupera il repository Git dal server remoto:

 git clone remote_url

Devi sostituire remote_url con l'URL del tuo fork. Per ottenere l'URL esatto di un repository GitHub, vai alla sua pagina e fai clic su Code . Quindi scegli SSH e copia il link che ti dà:

Il comando da eseguire per clonare il repository fork è:

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

Quando cloni un repository, ottieni 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 repository Git, che si trova all'interno di una cartella denominata .git .

Puoi vedere l'elenco dei file all'interno della nuova directory aprendo la nuova cartella in un file manager grafico, oppure 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. Utilizza Bootstrap per scopi pratici e alcune immagini da Unsplash, dove puoi scaricare immagini gratuite per il tuo sito.

Se apri il file index.html nel tuo browser, vedrai una semplice pagina con alcune immagini:

È tempo di giocare con questo progetto. Sembra molto vuoto e forse un'intestazione con il nome del sito potrebbe migliorare l'esperienza dell'utente.

Per farlo, entra nella directory del sito HTML e crea un ramo chiamato header . In questo nuovo ramo, possiamo modificare tutti i file e implementare tutto il codice che vogliamo perché non influirà sul ramo principale (originale).

Esegui il seguente comando:

Iscriviti alla newsletter

Vuoi sapere come abbiamo aumentato il nostro traffico oltre il 1000%?

Unisciti a oltre 20.000 altri che ricevono la nostra newsletter settimanale con suggerimenti per esperti di WordPress!

Iscriviti ora

 git checkout -b header

Questo creerà un ramo chiamato "header" e ti passerà ad esso subito dopo. È equivalente a:

 git branch header git checkout header

Per confermare che tutto è andato bene, esegui:

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

Vedrai che sei stato spostato dal ramo "principale" al ramo "intestazione", ma l'albero di lavoro è ancora pulito poiché non abbiamo modificato alcun file.

Nel tuo editor di codice preferito, apri il file index.html nel tuo progetto ramificato. Questo file include alcuni collegamenti a Bootstrap 5, quindi possiamo sfruttare i componenti pronti per l'uso del framework.

Aggiungi il codice seguente al file index.html all'interno del tag <body> e sopra il contenitore dell'immagine:

 <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ù bello! Sentiti libero di fare altri rami e modifiche che desideri.

Una volta terminata la modifica del progetto, è il momento di eseguire il commit di tutte le modifiche nel repository locale. All'interno della directory del progetto, digita quanto segue nel tuo terminale:

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

Quando si avvia un progetto per la prima volta, è comune avere messaggi di commit descrittivi, ma con il tempo e il focus spostato, la qualità dei messaggi tende a diminuire. Assicurati di tenere il passo con le buone pratiche di denominazione.

Ora che hai effettuato un commit nel tuo repository locale (che è ancora disponibile solo sul tuo computer), è ora di inviarlo al repository remoto.

Se provi a eseguire il push del commit normalmente, non funzionerà perché stai attualmente lavorando sul ramo di header . È necessario impostare il ramo a monte per l' header :

 git push --set-upstream origin header

A partire dal 13 agosto 2021, GitHub richiede l'utilizzo dell'autenticazione SSH, quindi assicurati di aver impostato correttamente le chiavi.

Dopo questo, dovresti essere in grado di vedere un nuovo ramo chiamato header nel tuo repository fork (ad esempio https://github.com/yourusername/HTML-site/branches ):

Per creare una richiesta pull al repository originale, fai clic su Confronta , in basso nella sezione Rami attivi .

Questo ti guiderà a una richiesta pull, in cui dovrai scegliere con quale ramo (l'originale o il tuo fork) vuoi unirti. Per impostazione predefinita, mostra l'opzione per unire con il repository di base:

Dopo aver fatto clic sull'opzione della richiesta pull, dovrai scrivere una breve descrizione delle modifiche apportate, proprio come con i tuoi precedenti commit. Ancora una volta, cerca di essere conciso ma descrittivo:

Fai clic sul pulsante Crea richiesta pull e attendi che il proprietario del repository di base accetti o ti fornisca un feedback sulle modifiche.

Congratulazioni: hai appena completato tutti i passaggi di un flusso di lavoro Git comune per lo sviluppo web!

Questo è stato un esempio davvero semplice, ma la logica si estende a progetti di tutte le dimensioni. Assicurati di implementare questo flusso di lavoro da vicino anche in progetti di collaborazione più grandi.

Come usare Git su Kinsta

Se sei un utente Kinsta, hai già due modi per usare Git e GitHub dal tuo portale MyKinsta.

Cominciamo con la prima opzione. Puoi facilmente accedere a SSH ed estrarre un repository da qualsiasi servizio di hosting Git come GitHub, Gitlab o Bitbucket.

Per fare ciò, vai alla scheda Siti , seleziona un sito, vai alla sezione dei dettagli SSH e copia il comando del terminale SSH.

Accedi tramite SSH al tuo sito incollando il comando sopra nel tuo terminale e accedendo alla cartella pubblica del tuo sito (che si trova in /www/nomesito/ ). Ecco dove si trovano tutti i tuoi file WordPress, quindi puoi estrarre un repository Git con un tema o un plug-in personalizzato su cui hai lavorato.

Ecco come abbattere un repository 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 funzionalità di distribuzione di GitHub su Kinsta, puoi distribuire un sito WordPress completo da un repository GitHub.

Il tuo repository GitHub dovrebbe includere una copia dei file core di WordPress e, naturalmente, il contenuto del tuo sito all'interno della cartella wp-content .

Diamo una rapida occhiata a questa opzione.

Vai a uno dei siti della tua azienda e crea un ambiente di staging. Questo non richiederebbe più di un paio di minuti.

Una volta che sei nel tuo sito di staging, vai alla scheda Distribuzione e fai clic sul pulsante Inizia configurazione . Vedrai una modale GitHub che consentirà a Kinsta di connettersi al tuo account GitHub.

Ora seleziona il repository da cui estrarrai il tuo sito.

Infine, distribuisci il tuo sito e visitalo tramite l'URL del tuo sito di staging.

Questa funzione è ancora in versione beta , ma presto ogni utente di Kinsta potrà accedervi.

Usare Git e Kinsta può essere una potente combinazione se sai usarli bene. Mentre il nostro tutorial qui presenta solo un semplice esempio, puoi imparare molto di più dal nostro articolo della knowledge base di Git.

Sommario

Al giorno d'oggi, Git è uno strumento indispensabile per lo sviluppo web, poiché la maggior parte delle volte collaborerai con gli altri per creare il miglior progetto possibile.

In questo articolo, abbiamo discusso alcuni importanti motivi per utilizzare Git nei tuoi progetti e ti abbiamo mostrato il flusso di lavoro di base della collaborazione in un repository Git.

Git è uno strumento così potente che puoi estenderne l'utilizzo anche all'hosting WordPress, quindi può solo avvantaggiarti impararlo e implementarlo come parte del tuo arsenale di abilità di sviluppo web.

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