You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
To tutorial, który pomoże początkującym kontrybutorom uczestniczyć w prostym i łatwym projekcie.
Ten tutorial jest również dostępny w innych językach (tłumaczenia mile widziane).
Cele
Wgraj swoją pierwszą kontrybucję w projekt open source.
Poczuj się bardziej komfortowo korzystając z GitHub.
Dla kogo to jest?
Dla początkujących. Jeśli wiesz jak napisać i edytować element kotwicy<a href="" target=""></a>, powinieneś być w stanie to zrobić.
Dla tych, którzy mają trochę więcej doświadczenia, ale chcą wgrać swoją pierwszą zmianę w projekt open source lub wgrać więcej zmian, aby uzyskać więcej doświadczenia i pewności siebie.
Po co mi to?
Każdy programista, początkujący czy doświadczony, musi korzystać z systemu kontroli wersji Git, a GitHub jest najpopularniejszą usługą hostingową Gita używaną przez wszystkich. To także serce społeczności Open Source. Korzystanie z GitHuba to niezbędna umiejętność. Wgrywanie zmian do projektu zwiększa Twoją pewność siebie i daje Ci coś do pokazania na Twoim profilu na GitHub.
Jeśli jesteś początkującym programistą i zastanawiasz się, czy powinieneś nauczyć się Gita i GitHuba, oto odpowiedź: You Should've Learned Git Yesterday.
Jaką zmianę wgram?
Wgrasz kartę, jak ta, do strony internetowej projektu. Karta będzie zawierała Twoje imię, nazwę użytkownika na Twiterze, krótki opis i 3 linki do użytecznych zasobów dla programistów, które polecasz.
Stworzysz kopię szablonu karty w pliku HTML i uzupełnisz ją informacjami o sobie.
Ewentualnie, jeśli czujesz się komfortowo używając Gita w wierszu poleceń, możesz to zrobić (tutaj jest first-contributions, podobny projekt, który może służyć jako przewodnik po potrzebnych poleceniach). LUB
Jeśli używasz VS Code ma ono wbudowaną obsługę Git i pozwala robić to, co potrzebujemy, bezpośrednio z edytora.
Jednak najprostszym i najłatwiejszym sposobem wykonania tego tutorialu jest GitHub Desktop.
Teraz, gdy wszystko gotowe, przejdźmy do wgrywania zmiany do projektu.
Wgraj swoją zmianę
Zostań kontrybutorem open source w 10 prostych krokach.
Przewidywany czas: Mniej niż 30 minut.
Krok 1: Utwórz fork repozytorium
Celem jest wykonanie kopii tego projektu i umieszczenie jej na swoim koncie.
Projekt na GitHub jest nazywany repozytorium (repo), a fork jest jego kopią.
Upewnij się, że jesteś na głównej stronie tego repozytorium.
Kliknij przycisk Fork
Masz teraz pełną kopię projektu na swoim koncie.
Krok 2: Sklonuj repozytorium
Teraz chcemy stworzyć lokalną kopię projektu. To jest kopia zapisana na Twoim komputerze.
Otwórz aplikację GitHub Desktop. W aplikacji:
Kliknij File, a następnie Clone repository
Zobaczysz listę swoich projektów i forków na GitHubie.
Sforkowany projekt będzie miał symbol fork po lewej stronie.
Twój fork będzie miał nazwę Twojej nazwy użytkownika na GitHub.
Może to chwilę potrwać, ponieważ porjekt zostanie skopiowany na na Twój dysk twardy. Zalecam zachowanie domyślnej ścieżki, jaką jest zwykle ..\Dokumenty\GitHub.
Teraz masz lokalną kopię projektu.
Krok 3: Stwórz nową gałąź
Po sklonowaniu repozytorium i otwarciu go w GitHub Desktop nadszedł czas, aby utworzyć nową gałąź.
Gałąź to sposób na oddzielenie zmian od głównej części projektu nazwanej Master. Na przykład, jeśli coś pójdzie nie tak i nie jesteś zadowolony ze zmian, możesz po prostu usunąć gałąź, a główny projekt nie zostanie zmieniony.
Kliknij Current branch
Następnie kliknij New
Nazwij swoją gałąź
Kliknij Create branch
Możesz nazwać ją jak chcesz, ale dlatego, że jest to gałąź, aby dodać kartę z Twoim imieniem do projektu, nazwanie tego twoje-imię-card jest dobrą praktyką, ponieważ jasno określa cel tej gałęzi.
Opublikuj swoją nową gałąź na GitHubie
Właśnie utworzyłeś nową gałąź niezależną od mastera.
Przy następnych krokach upewnij się, że pracujesz na tej gałęzi. Nazwę gałęzi, w której się znajdujesz, zobaczysz w górnej środkowej części GitHub Desktop, gdzie jest napisane Current branch.
NIE pracuj na gałęzi master
Krok 4: Otwórz plik index.html
Teraz musimy otworzyć plik, który będziemy edytować za pomocą Twojego ulubionego edytora kodu.
Znajdź folder projektu na swoim komputerze. Jeśli zachowałeś wartość domyślną, powinno to być coś w stylu twój-komputer > Dokumenty > GitHub > Contribute-To-This-Project
Plik index.html znajduje się bezpośrednio w folderze Contribute-To-This-Project.
Otwórz edytor kodu (Sublime, VS Code, Atom..etc) i użyj polecenia Open file i znajdź plik index.html w głównym folderze projektu
Ewentualnie możesz znaleźć plik na dysku twardym, kliknąć go prawym przyciskiem myszy i otworzyć go w edytorze
Teraz masz plik, który będziesz edytować, w swoim edytorze i możesz rozpocząć wprowadzanie w nim zmian.
Krok 5: Skopiuj szablon karty
Stwórzmy kopię szablonu karty, aby rozpocząć nad nim pracę.
W górnej części pliku html, pod sekcjami <head> i <header> znajduje się sekcja oznaczona == TEMPLATE ==
Skopiuj wszystko, co znajduje się w czerwonym kwadracie na obrazie, od komentarza Contributor card START do komentarza Contributor card END
Wklej całość bezpośrednio pod wskazanym komentarzem
Upewnij się, że przed komentarzem, gdzie zaczyna się Twoja karta i po komentarzu, gdzie się kończy, jest jedna linia odstępu. Dobrą praktyką jest, aby nasz kod był jak najbardziej przejrzysty
Nigdy nie używaj linterów ani formatorów stylu. Projekt ma konfigurację Prettier
To jest teraz Twoja karta, którą możesz dostosowywać i edytować.
Krok 6: Wprowadź zmiany
Zaczniemy teraz edytować kod html, zmieniając konfigurowalne pola na naszej karcie.
Zastąp 'Name' swoim imieniem
Uwaga: Nie zmieniaj class="name"
Wprowadź adres URL swojego konta na Twitterze href="Insert URL here"
Wpisz swój nick w polu tekstowym
Jeśli wolisz użyć kontaktu innego niż Twitter, musisz zmienić ikonę Twittera, <i class="fa fa-twitter"></i>, przechodząc do Font Awesome Icons, wyszukując odpowiedniej ikony i zastępując tylko część fa-twitter nową ikoną, jak na przykład fa-facebook. Następnie wykonaj te same kroki co powyżej.
Powiedz nam coś o sobie
Pisz krótko i miło. Pomyśl o tym bardziej jak o tweecie niż poście na bloga
Udostępnij społeczności 3 linki do zasobów przydatnych przy tworzeniu stron internetowych
Może to być wszystko, wideo, wykład, podcast, artykuł, odniesienie lub narzędzie
Jeśli jesteś początkującym, nie krępuj się, podziel się tym, co wiesz, nawet jeśli uważasz, że jest to proste. Zdziwisz się, ile osób na tym skorzysta
Link: Wstaw link href="tutaj" zastępując #
Tytuł: Napisz krótki opis title="tutaj"
Nazwa: Wpisz nazwę zasobu w polu tekstowym >here</a>
Upewnij się, że zapisałeś wszystkie zmiany.
Przetestuj swoje zmiany. TO JEST WAŻNE! Otwórz plik html w swojej przeglądarce (na przykład kilkając na niego dwukrotnie) i zobacz, jak Twoja karta będzie wyglądała na stronie. Sprawdź, czy cała strona nadal wygląda tak samo i nic nie jest zepsute. Kliknij swoje linki i upewnij się, że działają. Otwórz konsolę (Ctrl + Shift + J (Windows / Linux) lub Cmd + Opt + J (Mac)) i sprawdź, czy nie ma komunikatów o błędach.
Świetnie, skończyłeś edytować swój kod!! Następne kroki spowodują wysłanie zmin do GitHub, a póżniej wysłanie ich do połączenia z głównym projektem.
Krok 7: Wgraj zmiany
Wróć do aplikacji GitHub Desktop.
Twoje zmiany zostaną automatycznie dodane do obszaru startowego aplikacji.
Oznacza to, że Git zarejestrował wszystkie zapisane zmiany.
Widać to w aplikacji. Wszystko, co dodałeś do pliku, będzie zaznaczone na zielono, a usunięte elementy na czerwono.
Następny krok nosi nazwę Commit
To z grubsza oznacza "potwiedź zmiany"
Tak powinien wyglądać nagłowek Github Desktop
Zwróć uwagę na symbol fork obok nazwy projektu w Current repository
Twoje Current branch będzie miało nazwę, jaką nadałeś mu w kroku 3
Aby kliknąć Commit musisz wypełnić pole Summary
To wiadomość, wyjaśniająca, co zmieniłeś
W tym przypadku rozsądną wiadomością byłoby "Dodanie informacji o mojej karcie"
Opcjonalnie możesz dodać bardziej szczegółowy opis Description
Kliknij przycisk Commit. Na przycisku pojawi się coś w rodzaju Commit to "nazwa-twojej-gałęzi"
Krok 8: Wyślij zmiany na GitHub
Twoje zmiany są teraz zapisane lub wgrane. Ale są one zapisane tylko lokalnie, czyli na Twoim komputerze.
Synchronizacja lokalnych zmian z repozytorium na GitHubnazywa się Push. "Wypychasz" zmiany z lokalnego repozytorium do zdalnego repozytorium na GitHub.
Kliknij przycisk Push
Po kilku sekundach operacja jest zakończona i teraz masz dokładnie taką samą kopię tej gałęzi na swoim komputerze jak i na GitHubie.
Krok 9: Wyślij swoje zmiany do zatwierdzenia
To jest moment, na który czekałeś; wysłanie Pull Request (PR).
Do tej pory cała praca, którą wykonałeś, znajdowała się w forku projektu, który jak pamiętasz, znajduje się na Twoim koncie GitHub.
Teraz nadszedł czas, aby wysłać zmiany do głównego projektu, aby zostały z nim połączone.
To się nazywa Pull Request, ponieważ prosisz oryginalnego opiekuna projektu, aby "wciągnął" Twoje zmiany do swojego projektu.
Przejdź do strony głównej swojego forka na GitHubie (będzie miał ikonę fork i Twoją nazwę użytkownika na górze).
W górnej części repozytorium zobaczysz podświetloną wiadomość z zielonym przyciskiem.
Kliknij na Compare and pull request
Tak wygląda strona Open a pull request.
PAMIĘTAJ, że próbujesz połączyć swoją gałąź z oryginalnym projektem, a nie gałęzią Master.
Poniższy obraz pokazuje, jak powinien wyglądać nagłówek Twojej prośby o scalenie.
Po lewej stronie znajduje się oryginalny projekt, a po nim gałąź główna. Po prawej jest Twój fork i utworzona przez Ciebie gałąź.
Stwórz prośbę o scalenie:
Napisz tytuł
Dodaj opcjonalne informacje w opisie
Kliknij Create pull request
Nie przejmuj się wszystkimi opcjami. Na razie musisz wykonać tylko te trzy kroki.
Pozostaw opcję Allow edits from maintainers zaznaczoną.
Teraz Pull Request zostanie wysłany do opiekuna projektu. Jak tylko zostanie sprawdzony i zaakceptowany, Twoje zmiany pojawią się na stronie internetowej projektu.
Krok 10: Świętuj!
To wszystko. Zrobiłeś to! Wgrałeś swoją pierwszą kontrybucję w projekt open source na GitHub!
Twoje zmiany nie będą widoczne od razu; najpierw muszą zostać przejrzane, zaakcetpowane i połączone z projektem przez opiekuna. Po ich połączeniu Twoja karta powinna być widoczna na stronie.
To normalne, że recenzent prosi o zmiany w postaci Pull Request (PR). Potraktuj to jako dobrą praktykę, jeśli Ci się to przytrafi. Miej oko na komentarze i wymagane zmiany. Po wprowadzeniu wymaganych zmian (w swojej gałęzi) wszystko, co musisz zrobić, to wgranie i wysłanie swoich zmian. PR zostanie automatycznie zaktualizowany o nowe zmiany.
Obiecuję, że postaram się jak najszybciej przejrzeć je i scalić z głównym projektem, jendak robię to w wolnym czasię, więc kilkudniowe opóźnienie jest nieuniknione.
Następne kroki
Wróć za jakiś, aby sprawdzić, czy Twój PR został złączony z projektem.
Powinieneś otrzymać wiadomość e-mail od GitHub, gdy Twoje zmiany zostaną zatwierdzone lub jeśli będą wymagane dodatkowe zmiany. A kiedy PR zostanie ostatecznie połączony z masterem, Twoja karta zostanie dodana.
Jeśli uważasz, że ten projekt jest przydatny daj ⭐ gwiazdkę ⭐ u góry strony i Tweet o tym, aby pomóc w rozprzestrzenianiu informacji .
Jest to projekt open source, więc oprócz wgrania swojej karty, możesz pomóc w naprawianiu błędów, wprowadzaniu popraw i nowych możliwości. Otwórz problem lub wyślij nowy pull request.
Dziękuję za wgrywanie kontrybucji do tego projektu. Teraz możesz śmiało spróbować wgrywać zmiany do innych projektów; szukaj etykiety dla możliwości wgrywania zmian przyjaznych dla początkujących.
Szukam również współpracowników, którzy pomogliby mi w recenzowaniu i łączeniu PR. Jeśli chcesz uzyskać bardziej zaawansowaną praktykę Git, wyślij mi wiadomość na Twitterze i przeczytaj przewodnik współpracownika.
Jest on również szczególnie zainspirowany przez świetną społeczność #GoogleUdacityScholars The Google Challenge Scholarship: Front-End Web Dev, class of 2017 Europe.
.
dla możliwości wgrywania zmian przyjaznych dla początkujących.