Wrz 21
logo github

Jak używać Git Hub’a. Instalacja i obsługa Gita krok po kroku.

Drodzy czytelnicy! Postanowiłam pomóc Wam, ale też, a może i przede wszystkim sobie, z czarną, przeraźliwą konsolą. Nauczymy się razem jak używać Git Huba. Co Wy na to? Instalacja i obsługa Gita krok po kroku – zainteresowani? 🙂

Ja jestem lekko przerażona, ale wierzę, że damy radę. Ja przynajmniej muszę, muszę, muszę! Bo inaczej się uduszę 😉 Ale żarty na bok, git do zrobienia jest. Bo zaraz po nim czeka na nas JavaScript! 🙂 To, co gotowi? Zaczynamy!

Na początek kilka ważnych rzeczy. Pisząc ten artykuł zakładam, że jesteś totalnie zielony w używaniu Gita. Po tym artykule będziesz wiedział, jak zainstalować gita, do czego służy Git, jak stworzyć repozytorium lokalne i jak dodać pliki do GitHuba (np. swoją pierwszą stronę internetową).

Z tego artykułu nie dowiesz się, jak używać Gita we współpracy z inną osobą (współdzielić pliki). Na tym etapie nie jest to nam potrzebne. Skupmy się na pierwszym kroku młodocianego programisty, który bardzo chciałby, ale nie wie jak, wrzucić swoją stronę na GitHub.com. Instalacja i obsługa Gita krok po kroku – teraz zostały nam już tylko trzy kopniaki na szczęście i naprawdę zaczynamy 🙂


Git – cóż to za ustrojstwo? Trochę teorii

Git jest systemem kontroli wersji (VCS – Version Control System). Posiada on 3 stany, w których mogą znajdować się nasze pliki:

  • zatwierdzony – dane zostały zachowane w lokalnej bazie danych;
  • zmodyfikowany – plik został zmieniony, ale dane nie zostały wprowadzone do bazy danych;
  • śledzony – zmodyfikowany plik został przeznaczony do zatwierdzenia w bieżącej postaci w następnej operacji commit.

W związku z tym Git posiada 3 sekcje:

  1. katalog Git (git directory/ repository) – to najważniejsze miejsce. To właśnie ten katalog jest kopiowany podczas wysyłania repozytorium z innego komputera.
  2. katalog roboczy (working directory) – to obraz jednej wersji projektu.
  3. przechowalnia (staging area) – to plik, który zawiera informacje o tym, czego będzie dotyczyć następna operacja commit.

Podczas pracy nasze pliki będą zmieniały lokalizację tych katalogów. Na początku pliki znajdują się w katalogu roboczym. Po wpisaniu komendy $git add . przechodzą do przechowalni. Po wpisaniu polecania $git commit trafiają do głównego katalogu – repozytorium.

Proces przechodzenia plików w Git - Instalacja i obsługa Gita krok po kroku

Źródło: Stackoverflow

Podstawowy sposób pracy z Git – teoria

  1. Dokonujemy modyfikacji plików w katalogu roboczym.
  2. Oznaczamy zmodyfikowane pliki jako śledzone, dodając ich stan do przechowywalni.
  3. Dokonujemy zatwierdzenia (commit). Pliki – migawka – zostają przeniesione z przechowywalni do katalogu Git.

Instalacja Gita?

Przede wszystkim pobieramy dziada stąd – https://git-scm.com/downloads.

Następnie postępujemy zgodnie z komunikatami pojawiającymi się na panelu. Klikamy next, next, aż do momentu, gdy dobrniemy do okna Select Components. W tym miejscu upewnijmy się, że mamy wybrane Git Bash Here. Dalej klikamy next, next, next aż dobrniemy do Finish 🙂

Proste, nie? Tak tylko wygląda. Teraz się zacznie.

 

Uruchomienie konsoli – obsługa gita

Po instalacji konsoli musimy ją skonfigurować. Wystarczy to zrobić raz. Jednak ustawienia można zmieniać. Wystarczy wykonać poniższe polecenia ponownie z odpowiednimi modyfikacjami.

Git posiada narzędzie zwane git config.  To za jego pomocą skonfigurujemy naszą nazwę użytkownika oraz mail podany przy rejestracji na https://github.com.

Zaczynamy. W odpalonej konsoli wpisujemy:

$ git config --global user.name "nasze id na git hubie."

W moim przypadku komenda wygląda:

$ git config --global user.name "NataliaSokolowska"

Następnie wpisujemy mail:

$ git config --global user.email .....@.... - wpisujemy mail

Kolejnym krokiem jest utworzenie folderu na naszym komputerze, w którym będzie znajdować się nasz projekt. W tym poradniku posłużmy się folderem C:/projekt . Po utworzeniu lokalnego folderu na naszym komputerze, przełączamy się do Gita i wpisujemy komendę:

$ cd C:/projekt
Tworzenie nowego repozytorium

Wpisujemy komendę:

$ git init

W nazwie naszego folderu pojawi się nazwa master, która oznacza, że znajdujemy się w głównym miejscu naszego projektu. Wejdźmy teraz do naszego folderu na komputerze (nie przez Gita, tylko tak normalnie w komputerze 🙂 ). Powstały w nim nowe foldery – główny folder .git, a w nim pozostałe podfoldery i pliki. Folder git jest głównym folderem, który przechowuje nasz projekt. Nie przenośmy go nigdzie!

 

Dodawanie plików do repozytorium

Na tym etapie jesteśmy już zalogowani do naszego Gita oraz mamy utworzone repozytorium. Czas więc, abyśmy dodali do niego pliki.

Sprawa wygląda całkiem przyjemnie. Nasze pliki, które chcemy, aby „weszły” do repozytorium (np. index.html oraz style.css) kopiujemy do folderu w komputerze – w naszym przypadku C:\projekt. Następnie w Gicie wpisujemy komendę:

$ git add .

i klikamy eneter. Od tego momentu nasze pliki są dodane do repozytorium i śledzone przez Git. Jeśli chcemy usunąć pliki wpisujemy komendę

$ git rm nazwa_pliku .

Polecenie git add używa się do wielu czynności m.in. rozpoczynanie śledzenia nowych plików oraz dodanie plików do repozytorium.

Możemy sprawdzić czy nasze pliki znajdują się w repozytorium oraz jaki mają status. Wpisujemy komendę

$git status

Komenda status pokazuje nam co zmieniło się od naszej ostatniej modyfikacji i zatwierdzenia zmian (commit). Status Changes to be commited oznacza zmiany do zatwierdzenia. Natomiast status Changes not staged for commit oznacza Zmienione ale nie zaktualizowane. Oznacza to, że plik jest zmodyfikowany, ale zmiany nie trafiły jeszcze do repozytorium.

 

Zatwierdzanie zmian COMMIT

Przy każdym commicie należy podać komentarz. Komentarz opisujący, co to za zmiana, czego dotyczy, etc. Wpisujemy:

$ git commit -m "nasz komentarz"

Po wpisaniu tej frazy pojawia nam się w konsoli informacja o poczynionych zmianach. Możemy następnie sprawdzić status, aby dowiedzieć się, czy wszystkie pliki są już gotowe.

On branch master nothing to commit,

working tree clean

I właśnie w ten oto sposób wrzuciłeś swoje pierwsze pliki do swojego repozytorium LOKALNEGO!

Git - repozytorium lokalne komendy - Instalacja i obsługa Gita krok po kroku

 

Jak widzicie powyżej, raz wpisałam źle komendę – zapomniałam o kropce. Od razu Git mi powiedział, że coś jest nie tak. A do tego podpowiedział mi poprawną komendę. Spryciarz z niego 🙂


Repozytorium zdalne

Logujemy się do serwisu GitHub. Zakładam, że masz już tam założone konto, więc przez proces zakładania nie będę Cię przeprowadzać. Toż to bułka z masłem.

Po zalogowaniu wybieramy opcję Start a project. Następnie w miejscu Repository Name – wpisujemy nazwę naszego projektu np. pierwszy projekt, ustawiamy dostępność na Public i klikamy na Create repository.

Możemy wypełnić też pole Description – czyli opis naszego projektu.

Po wykonaniu tych czynności zostaniemy przeniesieni do nowego okna – bardzo dla nas ważnego!

Panel GitHub

 

Wysyłanie plików z naszego komputera do repozytorium zdalnego

No to zaczynamy.

Otwieramy naszą ulubioną, czarną konsolę Git Bash 🙂 Następnie logujemy się naszym ID i adresem e-mail podanym przy rejestracji

$ git config --global user.name "NataliaSokolowska"

$ git config --global user.email nataliasokolowska@bedeprogramistka.pl

Po zalogowaniu wpisujemy komendę widoczną w naszym panelu na GitHubie

echo "# pierwszyprojekt" >> README.md

Komenda ta sprawi, że w folderze zostanie umieszczony plik Readme.md, który służy do umieszczania dowolnych informacji, np. o modyfikacjach.
Następnie wpisujemy po kolei wszystkie komendy, które podpowiada nam GitHub (stworzył nam taką ściągawkę).

git init
git add README.md
git commit -m "first commit"
git remote add origin https://github.com/NataliaSokolowska/pierwszyprojekt.git
git push -u origin master

Jeśli korzystacie z systemu Windows po wpisaniu komendy $git add README.md możecie otrzymać komunikat LF will be replaced by CRLF in README.md. Dzieje się tak ponieważ wszystkie pliki w Gicie są zapisane z rozszerzeniem LF. Natomiast Windows domyślnie zapisuje pliki z rozszerzeniem CRLF. Jeśli wystąpi u Was taki problem, jest na to bardzo łatwy sposób. Wpisujemy dodatową komendę:

$ git config --global core.autocrlf true

Więcej na ten temat pisać nie będę, bo na tym etapie nie jest to nam do niczego potrzebne 🙂 Ciekawych odsyłam do manuala Gita.

Komenda git remote add origin http://…. sprawia, że nasze repozytorium lokalne łączy się z repozytorium zdalnym (on-line). Z kolei komenda git push -u origin master oznacza przesłanie plików do repozytorium online.

W ten sposób udało nam się przesłać pliki na serwer GitHuba! 🙂

Git - repozytorium zdalne - wyglad w konsoli

A tak wyglądają wgrane pliki na GutHub.com

wgrane pliki na GutHub.com

 

Udostępnianie Twojego projektu

No dobra. Mamy już prawie wszystko. Zakładam, że jeśli wrzuciłeś swój projekt do GitHuba chcesz udostępnić swój projekt dalej. Być może chcesz poddać się code review, czyli ocenie kodu, a być może chcesz wysłać w ten sposób swój projekt przyszłemu pracodawcy? Nie ważne jakie masz intencje. Ważne, że musisz się teraz dowiedzieć jak to zrobić.

Wchodzimy na http://GitHub.com i otwieramy repozytorium, które chcemy udostępnić. Wybieramy settings.

github - pierwszy projekt udostepnianie 1

Następnie przewijamy stronę w dół, aż dojdziemy do zakładki GitHub Pages. Rozwijamy okno Source i wybieramy opcję master branch. Klikamy save.

git hub udostepnianie 2

 

I to już wszystko! 🙂 GitHub wyświetli nam adres, który możemy udostępnić dalej w świat.

git hub udostepnianie 3

 

Źródła:

Przy pisaniu tego artykułu korzystałam z Podręcznik Git po polsku

Bardzo dużo informacji (też taki zaawansowanych) znajdziesz też tutaj: phpmajster

Na forum dziewczyny polecają: Try GitHubLearn Git BranchingAtlassianUdacity – How to Use Git and GitHubGit tower. Także całkiem sporo źródeł do nauki 🙂

Pamiętajcie, że to co zrobiliśmy teraz to malutki początek Gita. Narzędzie to ma masę funkcji i masę komend. Potraktujmy ten artykuł jako początek naszej wielkiej przygody z Gitem. Na dobry początek tej podróży proponuję abyśmy wszyscy zrobili ten kurs – https://www.codecademy.com/learn/learn-git . Myślę, że da on nam solidne podstawy do odkrywania coraz to nowszych możliwości tej potężnej maszyny.

 

Ciał! Natka

Dodaj komentarz

4 komentarzy do "Jak używać Git Hub’a. Instalacja i obsługa Gita krok po kroku."

avatar
  Subscribe  
najnowszy najstarszy oceniany
Powiadom o
Astrid Wolees
Gość

A mi coś nie działa, bo po wierwszym poleceniu, żeby wpisać user name wyskakuje od razu : ‚$’ is not recognized as an internal or external command, operable program or batch file.

Makenzen
Gość
Hej 🙂 No dobra, ale tak właściwie to po co nam to „README.md” w zdalnym repozytorium? 🙂 Wczoraj udało mi się w końcu wysłać plik z lokalnego repo do GitHuba. Dziś chciałam wykonać kolejne polecenie z preworku i źle je zrozumiałam (zamiast wprowadzić zmianę wewnątrz pliku index.html, zmieniłam jego nazwę (o ja TRĄBA!!! — no dobra, spieszyłam się do pracy ;-)), potem git commit -am ‚zmiana nr 1’, w wyniku czego ze strony głównej GitHuba (w zakładce „Code”) zniknął plik „Index.html”, został tylko README.md, a co więcej — pod nim pojawiło się „takie coś”, nieklikalne, też o nazwie README.md”… Ki… Czytaj więcej »
Natalia
Gość

Plik reademe.md służy do opisu projektu, który znajduje się w repozytorium. Jest to taki domyślny plik. GitHub wyświetla go automatycznie. Wydaje mi się, jednak ekspertem nie jestem i mogę się mylić, że plik ten możesz dodać i jest to dobrą praktyką, ale nie musisz.

Makenzen
Gość
OK, dzięki 🙂 Spotkałam się wczoraj z kumplem, któremu Git je z ręki i okazało się, że namieszałam tam tak, iż wyszła z tego naprawdę przedziwna sytuacja. Skasowałam plik index.html, nawet nie mając o tym pojęcia 😀 i dlatego nie było go w zakładce „Code”. A tam, gdzie go znalazłam, był taki rządek pięciu czerwonych kwadracików, co, jak się okazało, oznacza, że plik został skasowany. Kolejna ciekawostka: usiłując wypchnąć do GitHuba plik html ze zmienioną treścią, czegoś tam nie zacommitowałam. Jakby tego jeszcze było mało, jakimś dziwnym trafem zrobiło mi się… BOR-ze, już sama nie wiem co 😀 w każdym… Czytaj więcej »