Git i GitHub dla zielonych: tworzymy pierwsze repozytorium

Jest taki moment w nauce programowania, że chcesz podzielić się swoim kodem z innymi. Jeśli uczymy się w grupie, chcemy, by ktoś nasz kod sprawdził. Mamy problem, najwygodniej byłoby pokazać nasz kod komuś bardziej doświadczonemu, kto doradzi rozwiązanie. W trakcie poszukiwania pracy też chcemy nasze osiągnięcia pokazać. A w pracy nad jednym projektem, nawet jednym plikem może pracować kilka osób na raz. Co zrobić, żeby nie wchodzić sobie w drogę i nie nadpisywać zmian? Tutaj z pomocą przychodzi Git – system kontroli wersji. Swój kod wrzucisz na GitHuba – platformę do udostępniania projektów i ich kontrolowania za pomocą Gita. Dziś we w poście pokazuję github od podstaw.

Pierwsze kroki w GitHubie

Co to jest Github i czym się różni od Git’a?
W skrócie:

  • Git to system kontroli wersji, a więc narzędzie do zarządzania historią kodu źródłowego.
  • GitHub to usługa hostingowa dla repozytoriów Gitowych.

Więc nie są tym samym: Git jest narzędziem, a GitHub jest usługą, gdzie możemy trzymać projekty korzystające z Gita.

Więcej o tym czym jest Git i jak go obsługiwać znajdziecie we wpisie: Git dla początkujących – ucz się interaktywnie.

Teraz skupimy się tylko na tym jak udostępnić swój kod przez Githuba.

Załóżmy, że mamy już stworzony prosty projekt. Trzymamy go na pulpicie w folderze, w środku jest plik lub pliki, które chcemy udostępnić czyli umieścić w repozytorium.

Na potrzeby tutorialu utworzyłam plik index.html w folderze Form1, wy możecie wrzucić dowolny plik tekstowy – notatki.txt.

Utworzenie konta i pierwszego repozytorium (folderu) jest banalnie proste. Właściwie Github sam, od podstaw przeprowadza nas przez proces tworzenia konta i wrzucenia pierwszego projektu.

  1. Rejestracja
  2. Instalacja git lokalnie
  3. Utworzenie repozytorium
  4. Dodanie plików z komputera
  5. Modyfikacje w projekcie
  6. O Githubie w skrócie

1. Rejestracja

W pierwszej kolejności należy zarejestrować nowe konto na Githubie przez: github.com/join. Należy dodać swoje podstawowe dane i utworzyć nazwę użytkownika. Pamiętajcie, że nazwę tę widać publicznie. Jest też bardzo prawdopodobne, że konto na Githubie w przyszłości podacie swojemu pracodawcy – nazwa użytkownika typu dvpa666 jest niezalecana 😉

github od podstaw - rejestracja

 

W kolejnym kroku Github proponuje nam darmowe lub płatne konto.

Na początek konto darmowe wystarczy, nic więcej nie trzeba zaznaczać.

Do trzeciego kroku można nie przechodzić, bo będziemy dodawać nasz projekt krok po kroku poniżej.

 

2. Instalacja systemu kontroli wersji Git

Założyliśmy konto na platformi GitHub (będziemy mogli udostępniać projekty w Internecie). Potrzebujemy jeszcze mieć u siebie na komputerze program Git – system kontroli wersji.

Zainstaluj Gita dla swojego systemu operacyjnego ze strony git-scm.com.

system kontroli wersji Git od podstaw

Po zainstalowaniu Git’a możemy pozamykać wszystkie okienka.

3. Utworzenie pierwszego repozytorium

Wróćmy do przeglądarki, na stronę główną GitHub.com.

Dodajemy nowe repozytorium https://github.com/new:

Github nowe repozytorium

Musimy podać nazwę naszego folderu (może być inna niż ta, którą mamy u siebie na komputerze) oraz dodać krótki opis naszego projektu. Oto nasze pierwsze repozytorium:

Nie tworzymy pliku README. Klikamy: create repository

4. Dodanie plików z komputera

Wracamy do siebie – lokalnie, na swój komputer. Na pulpicie mamy stworzony folder z jednym plikem, który chcielibyśmy dodać do naszego repozytorium.

sciezka do pliku

Za pomocą konsoli (wyszukaj na komputerze cmd lub powershell dla Windowsa, albo terminal dla systemów: linux & mac ) wchodzimy do katalogu, w którym jest nasz projekt.

Moja ścieżka do folderu to po prostu Pulpit > NazwaFolderu. Jeśli swój projekt trzymacie w folderze dokumenty, czy gdziekolwiek indziej i nie jesteście pewni gdzie jest wasz folder:

  • Windows: należy kliknąć prawym przyciskiem myszy w folderze i wybrać właściwości, skopiować ścieżkę do folderu. Następnie w wierszu poleceń wpisujemy komendę cd oraz ścieżkę do folderu z plikiem np.cd C:\Users\rita\Desktop\Form1
  • Linux: w folderze, w którym jesteśmy możemy wybrać prawy przycisk – uruchom terminal, terminal domyślnie uruchomi się ze ścieżką do tego folderu
  • Mac: ścieżkę do folderu można mieć podaną na dole Findera (instrukcja tutaj) lub odrazu skopiować spod menu / trybika (jak istnieje na to profesjonalna nazwa to przygarnę informację 😀 ), wklejamy do terminal z komendą cd czylicd /Users/rita/Desktop/Form1

Każdą komendę potwierdzamy enterem. Jeśli wszyscy przebrnęli przez ten etap, to jesteśmy w naszym folderze, żeby się upewnić możemy użyć polecenia dir (gdy używamy konsoli cmd na windowsie) lub ls (dla powershell, terminala), które wylistuje nam wszystkie pliki w folderze.

kurs git: scieżka do folderu

Ustawienia początkowe

Jednorazowo musimy wykonać kroki dla naszego repozytorium.

Github nam podpowiada co powinniśmy zrobić w naszej konsoli.
Utworzenie pierwszego github repo

Git: instrukcja krok po kroku

Folderze zaczynamy od inicjalizacji repozytorium komendą git’a:

git init

Powinen pojawić nam się nowy folder .git (folder ukryty, na widowsie nie będzie domyślnie widoczny, należy włączyć pokazywanie ukrytych plików).

Następnie chcemy dodać nasz plik do utworzonego repozytorium:

git add index.html

Jeśli w twoim folderze jest więcej niż jeden plik i nie chcesz dodawać ich pojedynczo po nazwie możesz użyć komendy git add . – kropka oznacza dodanie wszystkich plików w folderze.

Następnie dodajemy nasz pierwszy commit oraz krótki komentarz co się dzieje w danym commicie – zamiany jakie dokonaliśmy. To informuje nas (oraz naszych współpracowników) czego zmiana dotyczy. W tym wypadku tylko nas, dajemy więc sobie zrozumiałą wiadomość:

git commit -m "my first repository"

Github podpowie nam również, by nazwać swój branch main, zróbmy to:

git branch -M main

Teraz musimy się połączyć z naszym zdalnym repozytorium (tylko poraz pierwszy):

git remote add origin (url repozytorium)

U mnie:

git remote add origin https://github.com/ritaly/test-repo.git

git push -u origin main

https://github.com/nazwa_uzytkownika/nazwa_repozytorium.git – to adres mojego świeżo utworzonego repozytorium. Chcę te dwa foldery skomunikować – repozytorium na GitHubie i moje lokalne dane w folderze.

Przy komendzie git push będziemy musieli podawać dane do logowania z Githuba.

 

⚠️ DANE DO LOGOWANIA

Możliwe, że na Windowsie wyskoczy nam sympatyczne okienko Github Credentials i wszystko stanie się automatycznie – super!

Windows przy oknie logowania pojawiają się 2 opcje:

  • logowanie przez „przeglądarkę” (browser) tj. email i hasło
  • logowanie przez token

Pewnie większość z was odruchowo skorzysta przez email i hasło, jednak github coraz bardziej wymusza na nas logowanie tokenem.

Jeżeli logowanie przez email i hasło nie powiedzie?

Wówczas musimy wygenerować token i użyć drugiej opcji logowania.

Wejdź w ustawienia > „Developer Settings”  https://github.com/settings/tokens i wygeneruj personal token.

github generowanie tokenu

Można oznaczyć token, którego ważność wygaśnie po czasie lub niewygasający.

Ważne być dać uprawnienia sobie do repozytorium (ja też polecam zaznaczyć workflows)

 

Pojawi się kod, który należy skopiować i użyć do logowania w miejscu gdzie git credential czeka na access token.

Co jeśli Github credentials nie działa ani przez email ani przez token? 

Czasem, w sporadycznych przypadkach trzeba dane do logowania ręcznie. W takim wypadku przyda się poniższa instrukcja.

Zaczynamy od włączenia konfiguracji użytkownika

git config credential.helper store
git push

Username for 'https://github.com’: nazwa_użytkownika
Password for 'https://nazwa_użytkownika@github.com’: <personal token> 
W momencie, gdy terminal czeka na Password, należy podać swój wygenerowany personal token!

Voila, po komendzie git push, jeśli odświeżymy stronę, to nasz pierwszy projekt jest już widoczny na GitHubie.

5. Modyfikacje w projekcie

Na pewno nie zaszkodzi dodać plik README, który opisuje zawartość repozytorium, co jest celem projektu i jakie technologie zostały wykorzystane. Plik README można utworzyć lokalnie w folderze jako plik tekstowy readme.md lub w GitHubie klikając na Add README.

Scrollujemy na dół, by zapisać plik.

Zapisujemy zmiany.

Lokalnie ściągniemy ten plik do siebie za pomocą komendy git pull.

Podsumowanie kiedy używamy git push, i dlaczego robimy git pull:

Dodanie nowego pliku

W konsoli wpisujemy: git status – wylistowuje stan w jakim znajdują się pliki w repozytorium. W tej chwili wszystkie pliki są aktualne – stan naszego repozytorium lokalnego i stan naszego zdalnego jest taki sam. Jeśli dokonamy zmian w pliku index.html (albo dodamy nowy plik style.css) komenda: git status dla nas to zaznaczy.


Zmiany w pliku dodamy za pomocą polecenia git add <nazwa_pliku>, a używając git add -p – zobaczymy jakie zmiany zostały dokonane w pliku. Możemy je zaakceptować lub odrzucić:

Wszystkie zaakceptowane zmiany znowu dodajemy do commita:

git commit -m "twój opis"

i wypychamy do zdalnego repozytorium za pomocą git push.

Na screenie widać, że zmiany w pliku index.html, były już zaakceptowane (zielony plik), a plik style.css czekał na dodanie.

6. GitHub w skrócie

Jeśli już udało Ci się dodać pierwszy projekt do GitHub’a od podstaw! Gratulacje! 🎉

Czas się przyjrzeć samej platformie. Strona naszego profilu github.com/nazwa_uzytkownika prezentuje się jak na poniższym screenie.

Oczywiście, nowo utworzone konto będzie puste.

Od góry mamy główne menu z paskiem wyszukiwania, który pozwala na przeszukiwanie wszystkich publicznie dostępnych repozytoriów (np. wpisując Django Girls znajdziecie oficjalny tutorial warsztatów 😉 ). W prawym górnym rogu jak już wiecie dodajmy nowe repozytorium oraz przejdziemy do ustawień konta.

Profil na GitHubie możemy personalizować dodając zdjęcie, krótkie bio czy podpis jaki ma się wyświetlać zamiast naszej nazwy użytkownika. Jest to przydatne, zwłaszcza gdy pracujecie w grupie, a wasz nick to losowy ciąg znaków.

Niby każdy wie, że ty to przecież @m4k0w4l5k4, jednak czytelniej wygląda komunikat updated by MariaKowalska. 

Dodatkowo pod bio znajdują się organizacje / zespoły (publiczne), w których się udzielamy.

W głównej części możemy przypiąć wybrane repozytoria. Wykorzystaj to podczas szukania pracy: warto wtedy przypiąć projekty, z których szczególnie jesteśmy zadowoleni i chcemy, by zwrócono na nie uwagę podczas rekrutacji.

W dolnej części profilu jest widoczna aktywność, ale tylko aktywność publiczna (we własnych projektach czy projektach open-source). Jeśli rozwijamy kod w repozytoriach prywatnych informacja ta nie będzie widoczna, dla osób z zewnątrz.

Moja aktywność całkowita:

Aktywność widoczna publicznie:

Skąd różnica? Najwięcej kodu piszę w pracy. Rozwijamy produkt komercyjny, także wszystkie repozytoria są widoczne tylko dla pracowników. Jeśli chcemy, możemy udostępnić naszą pełną aktywność, bez pokazywania prywatnych repozytoriów. Ustawieniach profilu, sekcja pod danymi osobowymi:

7. Co dalej?

To nie koniec nauki, a na pewno nie koniec komend Gita, które możecie używać.

Kurs wideo Git i Github od podstaw po polsku

https://youtube.com/watch?v=D6EI7EbEN4Q

Dobre nawyki: 

  • Jeden projekt = jedno repozytorium. Nie traktuj repozytorium jako folderu, w którym masz kilka projektów na raz. Sama tak wielokrotnie robiłam. Zadania na studiach wrzucałam w jeden folder, a folder na GitHuba, aby mieć kopię zapasową oraz żebym mogła w każdej chwili rzucić okiem niezależnie od komputera, na jakim będę pracować. Trzymanie kopii zapasowej kodu, jest mądre. Trzymanie śmietnika na GitHubie – nie. Nie idźcie tą drogą!
  • Nazwy plików i folderów nie powinny zawierać spacji oraz polskich znaków. Najlepiej zrezygnuj z polskiego nazewnictwa w plikach 😉
  • Komentarze w commitach staraj się pisać w sposób zrozumiały, krótki i jednocześnie uporządkowany np. w formie równoważników zdań np. dodanie pliku style.css, zmiana tła w headerze. Jeszcze lepiej, jeśli będziesz komentarze pisać w języku angielskim 🙂
  • Dodaj plik README. W pliku README umieszczaj krótki opis projektu, cel, wykorzystane technologie oraz jeśli są konieczne – wersje języka (PHP5 =/= PHP7, Python 2.7 =/= Python 3.6), bibliotek, frameworków jakie właśnie używasz. W przyszłości może okazać się, że wersje zostały zmienione i masz problem z uruchomieniem własnego programu. Informacja o wersji pozwoli Ci szybko znaleźć przyczynę problemu. Dowiedz się więcej o pliku dobrym README + gotowy szablon do pobrania

Warto wiedzieć: Dwa najpopularniejsze serwisy do przechowywania repozytoriów Git to GitHub i Bitbucket. Oba działają podobnie: umożliwiają hostowanie i współpracę z repozytorium Git, a także pozwalają wygodnie przeglądać i przeszukiwać repozytoria. Istotna różnica leży w rodzaju opłat. GitHub oferuje nieograniczone darmowe repozytoria publiczne, bez względu na liczbę osób pracujących nad projektem oraz płatną usługę jeśli chcemy tworzyć repozytorium prywatne. Bitbucket pozwala na publikację bezpłatnych prywatnych repozytoriów, ale pobiera opłaty przy większej liczbie współpracowników. To, której usługi używasz do konkretnego repo zależy od twoich konkretnych potrzeb. Po utworzeniu konta, oba serwisy działają na bazie Gita, więc używa się je analogicznie. Tutaj mam dla was Github od podstaw, ale napiszcie czy chcecie zobaczyć też Bitbucket, albo Gitlab?

Jeśli przydał Ci się ten post i chcesz być na bieżąco z wpisami wpadnij na facebooka – Fly Nerd.