Logo mit 💖 erstellt von CandidDeer
Willst Du ein Maintainer dieses Projekts werden und helfen, es am Laufen zu halten? Bei Interesse lies den Maintainers Guide und sende mir eine PN bei Twitter.
- Ausschreibung
- Einleitung
- Für wen ist es geeignet?
- Warum sollte ich mitmachen?
- Was werde ich beitragen?
- Übersetzungen
- Setup
- Nächste Schritte
- Danke
- Beitragen
- Schritt 1: Fork dieses Repository
- Schritt 2: Clone das Repository
- Schritt 3: Erstelle einen Branch
- Schritt 4: Öffne die Datei index.html
- Schritt 5: Kopiere die Karten-Vorlage
- Schritt 6: Änderungen eintragen
- Schritt 7: Commit Deine Änderungen
- Schritt 8: Push Deine Änderungen zu GitHub
- Schritt 9: Erstelle einen PR(Pull Request)
- Schritt 10: Feier
Hier lernst Du, wie Du zu diesem Projekt bzw. in Git/GitHub über das Terminal beitragen kannst. Dieses Tutorial hilft Erstautoren zu einem einfachen und unkomplizierten Projekt beizutragen.
- Trage zu einem Open-Source-Projekt bei.
- Werde vertrauter in der GitHub-Benutzung.
- Es ist für absolute Anfänger geeignet. Wenn Du weißt, wie man einen Anker-tag
<a ref="" target=""></a>schreibt und editiert, solltest Du auch diese Aufgabe schaffen. - Es ist auch für diejenigen, die etwas mehr Erfahrung haben und jetzt ihren ersten Open-Source-Beitrag einreichen wollen, oder auch mehr Erfahrung und Routine erlangen wollen.
Jeder Web-Entwickler, ob Anfänger oder Experte, sollte die Versionsverwaltung Git nutzen und GitHub ist der populärste Git-Hosting-Service, den jeder nutzt. Es ist auch das Herz der Open-Source-Gemeinschaft. Sich mit GitHub vertraut zu machen, ist eine notwendige Fähigkeit. Zu einem Projekt beizutragen, stärkt das Vertrauen in die eigenen Fähigkeiten und man kann es auch im eigenen GitHub-Profil zeigen.
Wenn Du als Entwickler gerade erst beginnst und Dich fragst, ob Du Git und GitHub lernen solltest, so ist hier Deine Antwort: Du solltest Git bereits gestern gelernt haben (eng., You Should've Learned Git Yesterday).
Du wirst eine Karte wie diese zur Projekt Webseite beisteuern. Sie wird Deinen Namen, Deinen Twitter-Namen, eine kurze Beschreibung und drei von Dir empfohlene Links zu für Web-Entwickler nützlichen Seiten enthalten.
Du wirst eine Kopie der Karten-Vorlage innerhalb der HTML-Datei erstellen und sie mit Deinen Informationen anpassen.
Dieses Tutorial ist auch in anderen Sprachen verfügbar:
| English | Bangla | Chinese (Traditional) | German | Hindi |
|---|---|---|---|---|
| Portuguese (Brazilian) | Ukrainian |
Übersetzungen der Projektdokumentation sind gerne gesehen. Siehe
Translation Guide(engl.) um beizutragen.
Info: Wenn Du Dich nicht so gut mit der Kommandozeile auskennst, gibt es hier ein GUI-Tutorial mit dem GitHub-Desktop
Als erstes bereiten wir das Setup vor.
- Logge Dich in Deinen GibtHub-Account ein. Wenn Du noch keinen hast, kannst Du hier einen erstellen. Ich empfehle das GitHub Hello World tutorial zu machen, bevor Du hier weiter machst.
- Wenn Du noch kein Git installiert hast, kannst Du es hier installieren.
Jetzt, wo alles eingerichtet ist, können wir mit dem Beitrag zum Projekt beginnen.
Werde ein Open-Source-Mitwirkender in 10 einfachen Schritten.
Geschätzte Zeit: Weniger als 30 Minuten.
- Das Ziel ist es, eine Kopie dieses Projekts in Deinem Konto zu erstellen.
- Als Repository (Repo) bezeichnet man ein Projekt auf GitHub und ein Fork ist eine Kopie davon.
- Stelle sicher, dass Du auf der Hauptseite dieses Repos bist.
 |
|---|
| Klicke auf die Fork-Schaltfläche |
- Jetzt hast Du eine vollständige Kopie des Projekts in Deinem Konto.
- Jetzt erstellen wir die lokale Kopie des Projekts, welche auf Deinem eigenen Computer gespeichert wird.
- Jetzt »clone« dieses Repo auf Deinen Computer. Klicke auf die Schaltfläche »Clone« und danach auf das Kopieren-Symbol.
- Als Repository (Repo) bezeichnet man ein Projekt auf GitHub und ein Fork ist eine Kopie davon.
Öffne ein Terminal und führe folgenden Git-Befehl aus:
git clone "url you just copied"Zum Beispiel:
git clone https://github.com/$Username/Contribute-To-This-Project.gitwobei $Username Dein GitHub-Benutzername ist. Damit kopierst Du den Inhalt dieses Repositories auf Deinen Computer.
Wechsle in das Repository-Verzeichnis auf Deinem Computer (wenn DU nicht bereits dort bist):
cd Contribute-To-This-ProjectJetzt erstelle mit dem Befehl git checkout einen neuen Zweig (Branch):
git checkout -b dein-neuer-branch-nameZum Beispiel:
git checkout -b add-$Username-cardInfo: Ersetze $Username mit Deinem GitHub-Kontonamen.
- Du hast nun einen neuen, vom Master-Branch (bzw. Main-branch) separierten, Zweig erstellt
- Stelle fr die nächsten Schritte sicher, dass Du in diesem Branch arbeitest. Je nach Editor wird der Branch-Name unten links angezeigt.
Arbeite NICHT im master/main Branch
Jetzt öffnen wir in unserem Lieblingseditor die Datei, die wir bearbeiten werden. In diesem Tutorial nutzen wir VSCode.
- Die Datei
index.htmlist im VerzeichnisContribute-To-This-Project. - Du kannst diese Datei mit folgendem Befehl im Editor öffnen:
code index.htmlInfo: Dies ist die Befehlszeilenversion, um index.html in VSCode zu öffnen.
- Jetzt, da die Datei zum Editieren geöffnet ist, kannst Du mit den Änderungen beginnen.
- Wir erstellen eine Kopie der Karten-Vorlage um daran zu arbeiten.
- Zu Beginn der Datei, unterhalb der Sektionen
<head>und<header>ist eine Sektion== TEMPLATE == - Kopiere alles, was im Bild rot markiert ist, also vom
Contributor card START-Kommentar bis zumContributor card END-Kommentar.
 |
|---|
- Füge dies dann direkt unter dem entsprechenden Kommentar wieder ein.
- Stelle sicher, dass zwischen dem Beginn Deiner Karte und dem Ende der letzten Karte genau eine Leerzeile ist. Es ist üblich, den Quelltext so verständlich wie möglich zu halten.
- Nutze keinen Linter oder »Style-Formatierer«. Dieses Projekt hat »Prettier« eingerichtet.
 |
|---|
- Dies ist jetzt Deine Karte, die Du nun editieren und anpassen kannst.
- Jetzt beginnen wir, das HTML zu editieren, und die anpassbaren Felder der Karte zu ändern.
| ↪️ Ersetze 'Name' mit Deinem Namen |  |
|---|
- Info: Ändere
class="name"NICHT
↪️ Trage die URL Deines Twitter-Kontos hier href="Insert URL here" ein, und Deinen Twitternamen in das Textfeld |
 |
|---|
- Wenn Du lieber einen anderen Kontakt anstatt Twitter eintragen möchtest, musst Du das Twitter-Symbol
<i class="fa fa-x-twitter"></i>ersetzen und ein anderes von Font Awesome Icons suchen und dann nur denfa-x-twitter-Teil mit dem neuen Icon ersetzen, z. B.fa-facebook. Dann wieder den obigen Schritten folgen.
 |
|---|
| ↪️ Erzähl uns etwas über Dich. Halte es kurz und bündig. Mehr wie ein Tweet, als ein Blog Post |
 |
| ↪️ Teile 3 Links zu Ressourcen mit der Community, die nützlich für Web-Entwicklung sind. Es kann alles sein, ein Video, Podcast, Artikel, Referenz oder ein Tool. Wenn Du ein Anfänger bist, lass Dich davon nicht einschüchtern; teile, was Du meinst, selbst wenn Du es für grundlegend hältst. Du wirst überrascht sein, wie viele Leute davon profitieren. |
- Link: Füge den Link ein
href="hier", indem Du das#ersetzt. Bitte nutze keinen URL-Shortener und auch keine Links, die nicht von der Seite kommen, die teilst! - Title: Eine kurze Beschreibung
title="hier". - Name: Schreibe den Ressourcen-Name in das Textfeld
>hier</a>. - Stelle sicher, dass Du alle Änderungen gespeichert hast.
- Teste Deine Änderungen. DIES IST WICHTIG! Öffne die HTML-Datei in Deinem Browser (z. B. durch einen Doppelklick) und schau Dir Deine Karte an, wie sie auf der Seite aussehen wird. Die komplette Seite sollte noch gleich aussehen und nichts sollte kaputt sein. Klicke Deine Links und stell sicher, dass sie funktionieren. Öffne die Konsole (Strg + Shift + J (Windows / Linux) or Cmd + Opt + J (Mac)) und prüfe, dass dort keine Fehlermeldungen sind.
- Großartig, Du hast die Bearbeitung des Quelltextes abgeschlossen. Als Nächstes wirst Du Deine Änderungen zu GitHub übertragen und sie dann beim Hauptprojekt einreichen
- Öffne ein Terminal in Deinem Projektverzeichnis und führe
git statusaus und Du bemerkst, dass in git nichts geändert wurde. - Du kannst Deine Änderungen mit dem
git add-Befehl hinzufügen
git add index.html- Jetzt commit diese Änderungen mit dem Befehl
git commit
git commit -m "Add $Username card info"- Wieder
$Usernamemit Deinem GitHub-Namen ersetzen.
- Deine Änderungen sind nur gespeichert und »committed« (zu git übertragen). Aber sie sind bis jetzt nur lokal, also auf Deinem Computer.
- Lokale Änderungen mit Deinem Repository auf GitHub zu synchronisieren nennt man Push. Du »pushst« Änderungen von Deinem lokalen Repository zu Deinem entfernten Repo auf GitHub.
- Hierfür nutzen wir den Befehl
git push
git push -u origin $Username-card-
Ersetze
$Username-cardmit dem Namen Deines Branches. -
Nach ein paar Sekunden ist der Befehl erfolgreich ausgeführt und Du hast eine genau gleiche Kopie deines Branches auf Deinem Computer und auf GitHub.
- Dies ist der Moment, auf den Du gewartet hast: Einen Pull Request (PR) erstellen.
- Bis jetzt hast Du alle Änderungen in Deinem Fork des Projekts vorgenommen, welches ja in Deinem GitHub-Konto ist.
- Jetzt ist es Zeit, Deine Änderungen an das Hauptprojekt zu schicken, um dort eingepflegt zu werden.
- Dies nennt man einen Pull Request, weil man den/die Betreuer des Originalprojekts fragt, die Änderungen in ihr Projekt zu ziehen (to pull).
- Gehe zur Hauptseite Deines Forks auf GitHub (oben wird das Fork-Symbol und Dein eigener Benutzernamen angezeigt).
- Oben im Repo siehst Du eine hervorgehobene Pull-Request-Nachricht mit einer grünen Schaltfläche.
 |
|---|
↪️ Klicke auf Compare and pull request |
 |
↪️ So sieht die Erstelle einen Pull-Request-Seite aus. |
- ERINNERUNG: Du versuchst, Deinen Branch mit dem Original-Projekt zu vereinen, nicht mit dem
Master-Branch Deines Forks. - Das Bild oben zeigt, wie der Kopf der Pull-Request-Seite aussehen sollte.
- Links steht das Original-Projekt, gefolgt vom Master-Branch. Auf der rechten Seite ist Dein Fork und der von Dir erstellte Branch
 |
|---|
↪️ Erstelle einen Pull-Request: Schreibe eine Überschrift, füge optionale Informationen in der Beschreibung hinzu und klicke auf Create pull request |
- Lass Dich nicht von all den Optionen überwältigen. Du musst jetzt nur diese drei Schritte ausführen.
- Lass die Option
Allow edits from maintainersaktiviert. - Nun wird ein Pull-Request an die Projektbetreuer gesendet. Sobald diese ihn begutachtet und akzeptiert haben, werden Deine Änderungen auf der Project Webseite sichtbar.
Das war's. Du hast es geschafft. Du hast soeben zu ein Open-Source-Project auf GItHub beigetragen.
Du hast Code zu einer Webseite beigetragen: https://syknapse.github.io/Contribute-To-This-Project
Deine Änderungen werden nicht sofort sichtbar sein; sie werden erst durch die Projektbetreuer überprüft, akzeptiert und eingebunden. Nachdem sie eingebunden wurden, ist Deine Karte sichtbar auf der Seite.
Es ist normal, dass ein Prüfer nach Änderungen an einem PR fragt. Denk einfach daran, dass es normal ist, wenn es Dir passiert. Schau immer mal mit einem Auge auf die Kommentare. Nachdem Du die angefragten Kommentare erledigt hast (in Deinem Branch), musst Du nur noch die Änderungen commit'en und push'en. Der PR wird sich automatisch aktualisieren.
Ich verspreche Dir, dass ich versuchen werden, die Änderungen so schnell wie möglich zu prüfen und einzubinden; aber da ich das in meiner Freizeit mache, kann es schon mal einen Moment dauern.
- Komm etwas später zurück und sieh Dir Deinen eingebundenen Pull Request an.
- Du solltest eine E-Mail von GitHub erhalten haben, als Deine Änderungen akzeptiert wurden, oder, falls weitere Anpassungen angefragt wurden. Nachdem Dein PR eingebunden (merged) wurde, wurde Deine Karte hinzugefügt.
- Du kannst auch durch diese freie Reihe lernen, wie man beitragen kann: How to Contribute to an Open Source Project on GitHub
- Wenn Du dieses Projekt nützlich findest, bitte gib ihm oben einen ⭐ star ⭐ und tweete über es
, um es bekannter zu machen.
- Du kannst mir auf Twitter folgen und mich kontaktieren, oder Du nutzt eine der anderen Optionen
- Da dies ein Open-Source-Projekt ist, kannst Du nicht nur Deine Karte beitragen, sondert bist herzlich eingeladen, Fehler zu beheben, Verbesserungen oder auch neue Features beizutragen. Erstelle ein issue oder sende einen neuen Pull Request
- Um unsere Community zu verbessern, schaue in die GitHub Diskussionen oben neben den Pull Requests. Hier kannst Du Dich selbst vorstellen, tiefere Diskussionen über Open Source führen und mit den Projektbetreuern in reden. Wirst Du uns helfen, dieses Feature weiter auszubauen und unsere Community weiter aufzubauen?
- Danke, dass Du zu diesem Projekt beigetragen hast. Jetzt kannst Du Dich auch an anderen Projekten beteiligen; suche nach
für Einsteiger-freundliche Beteiligungsoptionen. - Ich suche auch nach Projektmitarbeitern, die mir beim Überprüfen und einbinden der Pull Requests helfen. Wenn Du gerne weitere Git-Erfahrung sammeln möchtest, schicke mir eine PN auf Twitter und lies den maintainer's guide.
Dieses Projekt ist stark durch Roshan Josseys großartiges first-contributions-Projekt mit seinem exzellenten Tutorial beeinflusst.
Es ist teilweise durch die großartige Community um #GoogleUdacityScholars »The Google Challenge Scholarship: Front-End Web Dev, class of 2017 Europe« inspiriert.