Úvod do verzování v Gitu

ReactGirls
8 min readFeb 16, 2022

--

Verzování pomocí tvorbou vedlejších větví z jedné hlavní (ilustrace: https://www.flaticon.com)

Proč je úžasné mít znalost práce s Gitem a verzování kódu?

V době, kdy začínáte s kódováním nebo programováním, se vám často stane, že se v určitém okamžiku potřebujete vrátit k předchozím změnám nebo váš fungující kód zálohovat i jinde než jen v počítači.

Občas se může stát, že na vás po tvorbě nových úprav vyskočí chyby, které se například špatně identifikují nebo sahají hlouběji do kódu a v rámci jejich zjištění se může hodit porovnání verze funkčního kódu s nefunkčním.

Stejný princip se hodí i v případě, že na kódu pracujete ještě s někým dalším a před aplikováním úprav dalších lidí je chcete zkontrolovat a porovnat s původní verzí. Občas chcete svůj kód jednoduše sdílet s dalšími lidmi. I zde může Git a propojené aplikace pomoci.

Rozhodli jsme se proto vydat pár dílů na toto téma, kde si probereme nejznámější, často používané a užitečné příkazy v Gitu a práci s repozitářem. V úvodním dílu se zaměříme na vytváření účtu na Githubu, tvorby repozitáře, vaše první úpravy a základní nastavení účtu v Githubu pomocí SSH (Secure Socket Shell) klíčů sloužících pro ověření a autorizaci uživatele.

Pokud tuto část máte již za sebou, můžete vyčkat na pokračování této minisérie, ve které se budeme věnovat pokročilejším příkazům a workflow v Gitu.

Příkazová řádka

Na začátek je potřeba ve svém OS (operační systém — Windows, Mac, Linux) najít nativní (již zabudovanou) aplikaci konzole/terminál neboli příkazovou řádku. Tato aplikace slouží pro komunikaci s naším počítačem. Jako úplný základ se hodí příkazy na správu složek nebo instalaci různých doplňkových balíčků do vašeho projektu.

Práce v příkazové řádce není složitá, avšak je dobré si někam na papír nebo do poznámkového bloku napsat postupně příkazy, které se právě učíte a ještě si je nepamatujete. Nebudete je tak muset hledat znovu a znovu.

Příkazovou řádku má každý operační systém umístěnou trochu jinak.

· Windows Česky/Anglicky napsat na klávesnici „cmd“ -> Příkazový řádek/Command Prompt

· MacOS Česky/Anglicky -> Aplikace/Applications -> Nástroje/Utilities/ -> Terminál /Terminal

· Linux KDE -> Hlavní Menu/Main Menu -> napsat Konsole

· Linux GNOME -> Super -> napsat Terminál/Terminal

Pro více informací o příkazové řádce doporučuji oficiální dokumentaci daného OS. Pokud chcete pouze tahák pro nejpoužívanější příkazy, můžete si uložit jejich seznam k sobě do počítače a mít je tak vždy po ruce. Pro Windows například v oficiální dokumentaci. Pro Mac OS například v tomto článku. Pro Linux například v tomto přehledu 34 nejužitečnějších příkazů. Zdrojů je více a příkazů taktéž, pro začátek není potřeba se všechny učit. V průběhu času sami poznáte, které se vám hodí a jakmile je použijete častěji, lépe si je zapamatujete.

Instalace a spuštění

Jakmile si vyzkoušíte práci s příkazovou řádkou, je na čase nainstalovat GIT. K tomu stačí otevřít příkazovou řádku a podle druhu OS zkopírovat a vložit příkaz z oficiální stránky Gitu. A co je to vlastně ten Git? Jedná se o open source nástroj a jeho účel je lepší systém správy verzí.

Výsledek lze zkontrolovat příkazem:

git --version

V případě, že vypíše aktuální verzi, vše proběhlo v pořádku. Pokud ne, zkuste postup pečlivě zopakovat. Případně můžete zkusit vyhledat řešení přes vyhledávač. Často najdete další uživatele, kteří pravděpodobně narazili na podobnou situaci.

Github, Gitlab nebo Gitbucket?

Pro další práci s Gitem se bude hodit založení uživatelského účtu ve webové aplikaci pro správu budoucích projektů a aplikací. Tentokrát bude řeč především o Githubu, jedná se o OpenSource aplikaci, která se jednoduše používá a můžete si vybrat jak placenou, tak i neplacenou verzi. Také umožňuje propojit vaši aplikaci i s dalšími službami, jako je například Netlify, pokud na projektu používáte například Webpack. Samozřejmě volba je pouze na vás, můžete zkusit všechny varianty a vybrat si tu, která vám nejvíce vyhovuje.

Github logo (ilustrace: https://github.com/logos)

Založení uživatelského účtu a nastavení

Založení účtu na Githubu je velmi jednoduché a jistě se vám bude líbit i samotný formulář, který má povedený vývojářský design. Podobných detailů si na Githubu lze všimnout například i na stránce s chybou 404, kde je použitý paralax efekt při pohybu myší.

Po vyplnění formuláře ověříte svou identitu skrze zaslaný kód v e-mailu, který jste uvedli. Následně vyberete z nabídky účel použití aplikace, zda jste student/učitel a jaké technologie vás zajímají nebo se kterými budete pracovat. Pro začátek stačí vybrat variantu Client Apps a zvolit si Free verzi produktu.

Nyní se ocitnete na své úvodní stránce s nabídkou možnosti výuky Gitu a Githubu. Doporučuji vyzkoušet. Na hlavní stránce máte také možnost upravit si vaše bio, představit se světu pomocí pár slov o vás. Na konci stránky se můžete prokliknout na projekty ostatních uživatelů a inspirovat se, jak může vypadat repozitář s vaším projektem/aplikací.

Pokud budete kdykoliv potřebovat upravit nastavení svého účtu, zabezpečení nebo profilové informace, vpravo nahoře si rozkliknete vaši ikonku a vyberete si z nabídky. Doporučuji nastavit si alespoň 2-fázové ověření nebo ověření přes Authentifikátor v mobilu.

Nyní si na hlavní stránce vlevo najděte zelený button Create repository. Jste přesměrováni na stránku s formulářem pro zadání údajů k repozitáři. Vyberte jeho název, zadávejte bez diakritiky (háčky, čárky), protože název bude tvořit i část url adresy repozitáře. Pokud je víceslovný, můžete jej rozdělit pomlčkami pro lepší čitelnost.

Stránka s fomulářem pro tvorbu repozitáře

Dále vložíte popisek projektu nebo aplikace, pro kterou je repozitář zakládán. Popisek lze později změnit.

Poté můžete vybrat jednu z možností, zda chcete, aby váš repozitář viděli i ostatní, nebo ho zatím nechat viditelný pouze pro vás. Toto nastavení můžete později změnit v nastavení repozitáře. Pokud zvolíte možnost Public, váš repozitář uvidí ostatní uživatelé a také si budete moct vybuildit aplikaci a zobrazit ji přes tzv. Github Pages, které vám umožní zobrazit obsah jako webovou stránku a ukázat tak váš výtvor i přátelům.

V posledním kroku dostanete na výběr, zda chcete do repozitáře přidat soubor README, který slouží například jako návod pro instalaci a spuštění aplikace. Níže dostanete možnost přidat soubor .gitignore, ve kterém se může nacházet specifikace nebo seznam souborů, které nechcete, aby se zobrazovaly v repozitáři. A poslední možností je zvolit autorskou licenci. Momentálně ani jednu z možností nevybereme, protože je lze přidat ručně později až budete vědět, zda je využijete.

Nyní už vytvoříme repozitář kliknutím na zelené tlačítko Create repository.

První Git příkazy

Nyní se nacházíte na stránce, kde postupujte podle návodu. Pro začátek si otevřete Příkazovou řádku a naklonujte si repozitář do vašeho počítače, například do složky Dokumenty pomocí příkazu:

git clone git@github.com:<JmenoPrijmeni>/<nazev-repozitare>.git

Odkaz s adresou k vašemu repozitáři najdete v nabídce přes výběr SSH.

Teď si otevřete složku ve vámi používaném IDE jako je například Visual Studio Code. Do příkazové řádky zadejte:

git init

Vytvořte si první jednoduchý HTML soubor index.html, kde pro otestování stačí mít zatím pouze obyčejný základní kousek kódu:

<!doctype html>
<html>
<head>
<title>Titulek stránky</title>
</head>
<body>
<p>Testovací text, který se vám má na stránce zobrazit.</p>
</body>
</html>

Uložte změny a v levém panelu VS Code uvidíte, že se provedla v repozitáři nová úprava. Tuto úpravu si lze ověřit i v příkazové řádce.

Napište git statusa uvidíte červeně soubory, které jste přidali, změnili nebo smazali z repozitáře. Pokud je chcete přidat do repozitáře na Githubu všechny naráz, zadejte příkaz git add .a tím obsáhnete všechny soubory. Pokud chcete přidat jen některé konkrétní, můžete specifikovat jen část cesty do složky, ze které chcete vzít upravený obsah například git add src/sablony/* a říct tak, že chcete přidat vše ze složky šablony, hvězdička je označení pro vše. A jestli chcete přidat jen jeden konkrétní soubor, tak zadejte git add <src/sablony/index.html>. Název souboru stačí zkopírovat z výpisu při zadání git status. V tuto chvíli jste změny přidali do první stage, tam se bude nacházet, dokud ji nezrušíme nebo neposuneme dále do fáze tvorby commitu se zprávou o změně.

Momentálně se pokuste soubor posunout do další fáze, kdy bude vaše změna přiřazena k nově vytvořenému commitu, kterému vytvoříme popisek ve formě zprávy v uvozovkách. Zadejte tedy příkaz git commit -m "init project". Nyní má commit i popisek, který vám vždy připomene, jaké úpravy jste v něm udělali. Zprávy by měly být popisné.

Pokud byste nyní zadali znovu příkaz git status, už tam své změny neuvidíte, protože jsou posunuté do další fáze. A z té je již většinou předpoklad, že jste s úpravami spokojení, máte k nim dobrý popisek a chcete je uložit do repozitáře na Githubu, aby byly dobře zálohované. To uděláte příkazem git push.

Níže je celý postup:

git initgit add .git commit -m “first commit”git branch -M maingit remote add origin git@github.com:<JmenoPrijmeni>/<nazev-repozitare>.gitgit push -u origin main

SSH klíč

Pokud se objeví hláška, která říká, že přístup byl zamítnut z důvodu chybějícího nebo neplatného „public key“, bude potřeba si ještě nastavit SSH klíč a ten přidat do Githubu ke svému profilu. Tím vznikne ověřené spojení a autorizace identity.

Otevřete si příkazovou řádku a zadejte následující:

1. Nastavení nového klíče pro Github s emailovou adresou, kterou jste zadali na Github:

ssh-keygen -t ed25519 -C "your_email@example.com"

2. Po vyzvání zadání souboru stiskněte Enter pro uložení klíče do souboru dle výchozího nastavení:

> Enter a file in which to save the key (/Users/you/.ssh/id_algorithm): [Press enter]

3. Zadejte heslo, které si budete dobře pamatovat a stiskněte Enter:

> Enter passphrase (empty for no passphrase): [Type a passphrase]> Enter same passphrase again: [Type passphrase again]

4. Spusťte na pozadí ssh-agent, který spravuje vaše klíče:

eval "$(ssh-agent -s)"> Agent pid 59566

5. Zkontrolujte a případně přidejte soubor config, pokud neexistuje:

open ~/.ssh/config> The file /Users/you/.ssh/config does not exist.touch ~/.ssh/config

Váš config soubor by měl vypadat takto:

Host *  AddKeysToAgent yes  UseKeychain yes  IdentityFile ~/.ssh/id_ed25519

Pokud tak nevypadá, upravte ho a uložte.

6. Přidejte váš soukromý SSH klíč do SSH-agenta:

ssh-add -K ~/.ssh/id_ed25519

7. Přidejte váš veřejný klíč neboli Public key do Githubu:

cat ~/.ssh/id_rsa.pub

Zkopírujte si hodnotu a přidejte do githubu: přes ikonku v profilu -> Settings -> SSH a GPG keys -> přidat nový SSH klíč, přidat popisný název a uložit.

Následující příkazy jsou pouze informativní a můžete si je zkusit pro kontrolu:

cat ~/.ssh/config — zobrazení ssh identitycat ~/.gitconfig — tímto příkazem si zobrazíte config soubornano ~/.ssh/config nebo touch ~/.ssh/config — editace ssh identityssh -T git@github.com — ověření propojeníssh -vT git@github.com - mělo by se vám ukázat, že používáte port 22 a že přístup je v pořádku neboli access successfulls -al ~/.ssh — vylistování klíčůls -al ~/.ssh/id_rsa — výpis soukromých klíčů

Pokud jste provedli vše úspěšně, zkuste znovu dát příkaz git push.

Nyní byste v Githubu měli vidět vaše nové změny přiřazené k číslu commitu a zprávě, kterou jste si k němu vytvářeli.

V případě komplikací v průběhu tohoto nastavení většinou stačí zkopírovat chybovou hlášku v příkazové řádce a zadat do vyhledávače. Stejný problém už většinou řešili i další lidé a můžete tak najít hned několik řešení. Mnoho informací také najdete přímo na stránkách Githubu, kde se věnují těm nejčastějším potížím při prvním nastavení.

V příštím díle se objeví trochu pokročilejší příkazy v Gitu, tvorba pull requestu, squashování commitů a další. Také si vyzkoušíte nastavení v Github Pages, které vám umožní zobrazit vaši tvorbu na webu Githubu a ukázat ji tak i ostatním.

Těšíme se příště.

ReactGirls

Autorka článku: Martina Piekná

--

--

ReactGirls

Community of people who write about tech topics