Zu diesem Projekt beitragen
Logo erstellt mit? Von Candiddeer
Bekanntmachung:
Möchten Sie ein Betreuer in diesem Projekt werden und dabei helfen, es am Laufen zu halten? Wenn Sie interessiert sind, lesen Sie den Leitfaden des Betreuers, treten Sie unserem Discord -Server an und fordern Sie sie auf, sich dem Team aus den Projektbeteiligten anzuschließen.
Schnellzugriffsindex
- Einführung
- Ziele
- Für wen ist das?
- Warum muss ich das tun?
- Was soll ich beisteuern?
- Übersetzungen
- Aufstellen! :)
- Beitragen
- Schritt 1: Geben Sie dieses Repository auf
- Schritt 2: Klonen Sie das Repository
- Schritt 3: Erstellen Sie einen neuen Zweig
- Schritt 4: Öffnen Sie die Index.html -Datei
- Schritt 5: Kopieren Sie die Kartenvorlage
- Schritt 6: Wenden Sie Ihre Änderungen an
- Schritt 7: Verpfändet Ihre Änderungen
- Schritt 8: Drücken Sie Ihre Änderungen auf GitHub
- Schritt 9: Senden Sie eine PR (Pull -Anfrage)
- Schritt 10: Feiern Sie
- Nächste Schritte
- Anerkennung
- Lizenz
- Top 100 Mitwirkende
Einführung
Dies ist ein Tutorial, mit dem Erstmals mit Mitwirkenden an einem einfachen und einfachen Projekt teilnehmen können.
Ziele
- Einen Beitrag zu einem Open -Source -Projekt leisten.
- Nehmen Sie sich wohler bei der Verwendung von GitHub.
Für wen ist das?
- Dies ist für absolute Anfänger. Wenn Sie wissen, wie Sie ein Anker -Tag
<a href="" target=""></a> schreiben und bearbeiten, sollten Sie es tun. - Es ist auch für diejenigen mit etwas mehr Erfahrung, die aber ihren ersten Open -Source -Beitrag leisten oder mehr Beiträge für mehr Erfahrung und Vertrauen erhalten möchten.
Warum muss ich das tun?
Jeder Webentwickler, anstrengende oder Erfahrene muss die Git -Versionskontrolle verwenden, und GitHub ist der beliebteste Git -Hosting -Service, den alle verwendet haben. Es ist auch das Herz der Open -Source -Community. Mit GitHub bequem zu werden, ist eine wesentliche Fähigkeit. Wenn Sie einen Beitrag zu einem Projekt leisten, wird Ihr Selbstvertrauen gesteigert und Ihnen etwas zu zeigen, das Sie in Ihrem Github -Profil zeigen können.
Wenn Sie ein neuer Entwickler sind und sich fragen, ob Sie Git und Github lernen müssen, dann ist hier die Antwort: Sie hätten Git gestern lernen sollen.
Was soll ich beisteuern?
Sie werden eine Karte wie diese auf die Webseite dieses Projekts einbringen. Es enthält Ihren Namen, Ihren Twitter -Handle, eine kurze Beschreibung und 3 Links zu nützlichen Ressourcen für Webentwickler, die Sie empfehlen.
Sie erstellen eine Kopie der Kartenvorlage in der HTML -Datei und passen Sie sie mit Ihren eigenen Informationen an.
Übersetzungen
Dieses Tutorial ist auch in anderen Sprachen erhältlich
| Arabisch (عربي) | Bangla (বাংলা) | Chinesisch (traditionell) (繁體中文) | Niederländisch | Englisch (Englisch) |
|---|
| Französisch (Français) | Deutsch (Deutsch) | Hindi (हिंदी) | Italienisch (Italienisch) | Japanisch (日本語) |
| Koreanisch (한국어) | Polnisch (Polski) | Portugiesisch (Portugiesisch) | Russisch (рсский) | Serbisch (сaturen) |
| Spanisch (Español) | Türkisch (türkçe) | Ukrainisch (українська) | Norwegisch (Norsk) | Malyalam |
Übersetzungen für Projektdokumentationen sind willkommen. Lesen Sie Translation Guide um einen Beitrag zu leisten.
Aufstellen! :)
Notiz
Dieses Tutorial basiert auf Github PC. Wenn Sie mit dem Terminal vertraut sind, gehen Sie zu diesem Tutorial (klicken Sie hier)
Lassen Sie uns zunächst einrichten, um die Arbeit zu erledigen
- Melden Sie sich bei Ihrem Github -Konto an. Wenn Sie noch kein Konto haben, schließen Sie sich GitHub bei. Ich empfehle Ihnen, das Github Hello World -Tutorial vorzunehmen, bevor Sie fortfahren.
- Laden Sie die GitHub -Desktop -App herunter.
- Alternativ, wenn Sie sich in der Befehlszeile wohl fühlen, können Sie dies hier der Link zum CLI -Tutorial tun.
- Wenn Sie VS -Code verwenden, wird integriertes Git geliefert und ermöglicht es Ihnen, das zu tun, was wir direkt vom Editor benötigen.
- Der einfachste und einfachste Weg, diesem Tutorial zu folgen, besteht jedoch darin, Github Desktop zu verwenden.
Jetzt, da Sie alle eingerichtet sind, machen wir uns mit dem Geschäft weiter, zum Projekt beizutragen.
↑ Gehen Sie nach oben ↑
Beitragen
Werden Sie Open Source -Mitwirkende in 10 einfachen Schritten.
Geschätzte Zeit: weniger als 30 Minuten .
Schritt 1: Geben Sie dieses Repository auf
- Das Ziel hier ist es, eine Kopie dieses Projekts zu erstellen und es in Ihr Konto zu platzieren.
- Ein Repository (Repository) ist, wie ein Projekt auf GitHub aufgerufen wird, und eine Gabel ist eine Kopie davon.
- Stellen Sie sicher, dass Sie auf der Hauptseite dieses Repo sind.
 |
|---|
| Klicken Sie auf die Schaltfläche Fork |
- Sie haben jetzt eine vollständige Kopie des Projekts in Ihrem eigenen Konto.
↑ Gehen Sie nach oben ↑
Schritt 2: Klonen Sie das Repository
- Jetzt möchten wir eine lokale Kopie des Projekts erstellen. Das ist eine Kopie, die auf Ihrer eigenen Maschine gespeichert ist.
- Öffnen Sie die GitHub -Desktop -App. In der App:
 |
|---|
| Klicken Sie auf die Datei und klonen Sie das Repository |
- Sie sehen eine Liste Ihrer Projekte und Gabeln auf GitHub.
- Wählen Sie
<your-github-username>/Contribute-To-This-Project . - Klicken Sie auf Klon
| ↪️ Ein Forked -Projekt hat das Fork -Symbol links. Ihre Gabel hat einen eigenen Github -Benutzer |  |
|---|
- Dies wird einen Moment dauern, da das Projekt auf Ihre Festplatte kopiert wird. Ich empfehle Ihnen, den Standardpfad zu behalten, der normalerweise
..DocumentsGitHub ist. - Jetzt haben Sie eine lokale Kopie des Projekts.
↑ Gehen Sie nach oben ↑
Schritt 3: Erstellen Sie einen neuen Zweig
- Sobald das Repo geklont wurde und Sie es im Github -Desktop geöffnet haben, ist es an der Zeit, einen neuen Zweig zu erstellen.
- Ein Zweig ist eine Möglichkeit, Ihre Änderungen vom Hauptteil des Projekts namens
Master getrennt zu halten. Wenn beispielsweise etwas schief geht und Sie mit Ihren Änderungen nicht zufrieden sind, können Sie einfach den Zweig löschen und das Hauptprojekt wird nicht betroffen sein.
↪️ Klicken Sie auf Current branch und klicken Sie dann auf New |  |
|---|
↪️ Geben Sie Ihrem Zweig einen Namen an und klicken Sie dann auf Create branch |  |
| ↪️ Veröffentlichen Sie Ihre neue Filiale in GitHub |  |
- Sie können es nennen, was Sie wollen, aber da dies eine Filiale ist, die dem Projekt mit Ihrem Namen eine Karte hinzufügt, ist es eine gute Praxis, sie
your-name-card zu nennen, da sie die Absicht dieser Filiale klar hält. - Jetzt haben Sie einen neuen Zweig erstellt, der vom Meister getrennt ist.
- Für die nächsten Schritte stellen Sie sicher, dass Sie in diesem Zweig arbeiten. Sie sehen den Namen der Filiale, in der Sie sich in der oberen Mitte der Github -Desktop -App befinden, in der die aktuelle Filiale angegeben ist.
Arbeiten Sie nicht am master -Zweig
↑ Gehen Sie nach oben ↑
Schritt 4: Öffnen Sie die Index.html -Datei
- Jetzt müssen wir die Datei öffnen, die wir mit Ihrem bevorzugten Code -Editor bearbeiten werden.
- Suchen Sie den Projektordner auf Ihrem Computer. Wenn Sie die Standardeinstellung beibehalten haben, sollte dies so etwas wie
your-computer > Documents > GitHub > Contribute-To-This-Project - Die Datei
index.html befindet sich direkt im Ordner Contribute-To-This-Project . - Öffnen Sie Ihren Code -Editor (Sublime, VS Code, Atom..ETC) und verwenden Sie den Befehl
Open file und suchen Sie die Datei idex.html im Hauptverzeichnis des Projekts
 |
|---|
| ↪️ Alternativ können Sie die Datei auf Ihrer Festplatte finden, mit der rechten Maustaste klicken und mit Ihrem Editor öffnen |
- Jetzt haben Sie die Datei, die Sie in Ihrem Editor offen bearbeiten und bereit sind, Änderungen daran vorzunehmen.
↑ Gehen Sie nach oben ↑
Schritt 5: Kopieren Sie die Kartenvorlage
- Wir werden eine Kopie der Kartenvorlage erstellen, um daran zu arbeiten
- Direkt im
<body> finden Sie einen Abschnitt <div class="container"> . Dies enthält viele andere Abschnitte. - Die ersten 2 Abschnitte sind genau wie:
<div class="row"> . Zusammenfassen Sie sie zusammen, indem Sie auf den Pfeil auf Ihrem VS -Code -Editor auf den Pfeil klicken, wie im Bild unten gezeigt. (Wenn Sie einen anderen Editor verwenden, können Sie die Funktion möglicherweise nicht verwenden. Sie müssen nur nach unten scrollen.) Der Zusammenbruch erleichtert es einfach, einige Codekomponenten auszublenden, die Sie nicht ändern müssen. - Sie sollten nun den Abschnitt sehen, in dem alle Beitragskarten untergebracht sind:
<div class="grid" id="contributions">
- In diesem Abschnitt finden Sie den Abschnitt, der
== TEMPLATE == gekennzeichnet ist - Kopieren Sie alles innerhalb des roten Quadrats im Bild, vom
Contributor card START den Kommentar Contributor card END
- Fügen Sie das Ganze direkt unter den Kommentar ein, der es anzeigt. direkt vor der neuesten Karten des Mitwirkenden.
- Stellen Sie sicher, dass zwischen Ihrem Kartenende und dem Start der letzten Karte eine einzelne Speicherlinie zwischen Ihrem Kartenende liegt. Fügen Sie außerdem eine Speicherlinie zwischen dem Start Ihrer Karte und der Linie mit dem Kommentar
=== Paste YOUR CARD directly BELOW this line === . Es ist eine gute Praxis, unseren Code so klar wie möglich zu halten - Verwenden Sie niemals Linter oder Stilformatter. Das Projekt hat hübscheres Setup
- Dies ist jetzt Ihre Karte, mit der Sie anpassen und bearbeiten können.
↑ Gehen Sie nach oben ↑
Schritt 6: Wenden Sie Ihre Änderungen an
- Wir werden jetzt mit der Bearbeitung von HTML beginnen und die anpassbaren Felder in unserer Karte ändern.
| ↪️ Ersetzen Sie den Namen "Name" durch Ihren Namen |  |
|---|
- HINWEIS: Ändern Sie nicht
class="name"
↪️ Fügen Sie die URL Ihres Twitter -Kontos ein href="Insert URL here" Geben Sie Ihr Handle im Textfeld ein |  |
|---|
- Wenn Sie es vorziehen, einen anderen Kontakt als Twitter zu verwenden, müssen Sie das Twitter-Symbol
<i class="fa fa-x-twitter"></i> ersetzen, indem Sie zu fantastischen Symbolen suchen, die nach dem richtigen Symbol suchen und nur den fa-x-twitter Teil durch das neue Icon wie fa-facebook ersetzen. Befolgen Sie dann die gleichen Schritte oben.
 |
|---|
| ↪️ Erzählen Sie uns etwas über Sie. Halten Sie es kurz und süß. Denken Sie eher wie einen Tweet als einen Blog -Beitrag darüber nach |
 |
| ↪️ Mit den Community 3 -Links zu Ressourcen teilen, die für die Webentwicklung nützlich sind. Dies kann alles sein, ein Video, ein Vortrag, ein Podcast, ein Artikel, ein Referenz oder ein Tool. Wenn Sie ein Anfänger sind, lassen Sie sich von diesem nicht einschüchtern lassen, was Sie wissen, auch wenn Sie der Meinung sind, dass es grundlegend ist. Sie werden überrascht sein, wie viele Menschen profitieren werden. |
- Link: Fügen Sie den Link
href="here" ein, das die # ersetzt. Bitte beachten Sie die Verwendung von URL -Shortenern oder URLs, die nicht von der Website stammen, die Sie veröffentlichen! - Titel: Schreiben Sie eine kurze Beschreibung
title="here" . - Name: Schreiben Sie den Namen der Ressource in das Textfeld
>here</a> . - Stellen Sie sicher, dass Sie alle Ihre Änderungen gespeichert haben.
- Testen Sie Ihre Änderungen . Das ist wichtig! Öffnen Sie die HTML -Datei in Ihrem Browser (durch Doppelklicken auf sie) und sehen Sie, wie Ihre Karte auf der Website aussieht. Sehen Sie, dass die gesamte Seite immer noch gleich aussieht und nichts kaputt ist. Klicken Sie auf Ihre Links und stellen Sie sicher, dass sie funktionieren. Öffnen Sie die Konsole (Strg + Shift + J (Windows / Linux) oder CMD + OPT + J (MAC)) und überprüfen Sie, ob keine Fehlermeldungen vorhanden sind.
- Großartig, Sie haben fertig mit Ihrem Code bearbeitet! In den nächsten Schritten wird Ihre Änderungen an GitHub gesendet und sie dann einreichen, um mit dem Hauptprojekt zusammengeführt zu werden.
↑ Gehen Sie nach oben ↑
Schritt 7: Verpfändet Ihre Änderungen
- Kehren Sie zur Github -Desktop -App zurück.
- Ihre Änderungen wurden automatisch in den Staging -Bereich hinzugefügt.
- Dies bedeutet, dass Git alle gespeicherten Änderungen aufgezeichnet hat.
- Sie können dies in der App sehen. Alles, was Sie der Datei hinzugefügt haben, wird grün sein, und Löschungen werden als rot angezeigt.
 |
|---|
↪️ Der nächste Schritt heißt Commit . Dies bedeutet grob, confirm the changes |
 |
↪️ So sollte Ihr GitHub -Desktop -Header aussehen. Beachten Sie das Fork -Symbol neben dem Projektnamen im Current repository . In Ihrer Current branch wird der in Schritt 3 angegebene Name angegeben |
 |
↪️ Um Commit müssen Sie das Summary Feld ausfüllen. Dies ist die Commit -Nachricht, die erklärt, was Sie geändert haben. In diesem Fall wäre "Add my card information" eine angemessene Nachricht. Optional können Sie eine detailliertere Description hinzufügen. Klicken Sie auf die Schaltfläche Commit . Ihr Button wird so aussagen, dass Commit to "your-branch-name" |
↑ Gehen Sie nach oben ↑
Schritt 8: Drücken Sie Ihre Änderungen auf GitHub
- Ihre Änderungen werden jetzt gespeichert oder begangen. Aber sie werden nur lokal gespeichert, das ist auf Ihrem Computer.
- Die Synchronisierung lokaler Änderungen mit Ihrem Repository auf GitHub wird als Push bezeichnet. Sie "drücken" die Änderungen von Ihrem lokalen Repository zum Remote -Repository auf GitHub.
↪️ Klicken Sie auf die Schaltfläche Push |  |
|---|
- Nach einigen Sekunden ist der Betrieb abgeschlossen und jetzt haben Sie genau die gleiche Kopie dieser Filiale auf Ihrem Computer sowie auf GitHub.
↑ Gehen Sie nach oben ↑
Schritt 9: Senden Sie eine PR (Pull -Anfrage)
- Dies ist der Moment, auf den Sie gewartet haben; Senden einer Pull -Anfrage (PR).
- Bisher befand sich die gesamte Arbeit, die Sie geleistet haben, auf der Gabelung des Projekts, das, wie Sie sich erinnern, auf Ihrem eigenen Bericht über GitHub liegt.
- Jetzt ist es an der Zeit, Ihre Änderungen an das Hauptprojekt zu senden, um damit zusammenzufassen.
- Dies wird als Pull -Anfrage bezeichnet, da Sie den ursprünglichen Projektbetrieb auffordern, Ihre Änderungen in ihr Projekt zu "ziehen".
- Gehen Sie zur Hauptseite Ihrer Gabel auf GitHub (es wird das Fork -Symbol und Ihren eigenen Benutzernamen oben befinden).
- Im oberen Rand des Repo sehen Sie eine hervorgehobene Pull -Anforderungsnachricht mit einer grünen Taste.
 |
|---|
↪️ Klicken Sie auf die Compare and pull request |
 |
↪️ So sieht die Open a pull request -Seite aus. |
- Denken Sie daran , dass Sie versuchen, Ihren Zweig mit dem ursprünglichen Projekt nicht mit dem
Master -Zweig auf Ihrer Gabel zu verschmelzen . - Das Bild unten gibt Ihnen eine Vorstellung davon, wie der Header Ihrer Pull -Anfrage aussehen sollte.
- Links befindet sich das ursprüngliche Projekt, gefolgt vom Master -Zweig. Auf der rechten Seite befindet sich Ihre Gabel und die Filiale, die Sie erstellt haben.
 |
|---|
↪️ Erstellen Sie eine Pull -Anfrage: Schreiben Sie einen Titel, fügen Sie optionale Informationen in die Beschreibung hinzu und klicken Sie auf Create pull request |
- Lassen Sie sich nicht von allen Optionen beeinflussen. Sie müssen diese drei Schritte vorerst nur ausführen.
- Lassen Sie die Option
Allow edits from maintainers gekreuzt werden. - Jetzt wird eine Pull -Anfrage an den Projektbetrieb gesendet. Sobald es überprüft und akzeptiert wird, werden Ihre Änderungen auf der Projekt -Webseite angezeigt.
↑ Gehen Sie nach oben ↑
Schritt 10: Feiern Sie
Das war's. Du hast es geschafft! Sie haben jetzt zu Open Source auf GitHub beigetragen.
Sie haben einer Live-Webseite Code hinzugefügt: https://syknapse.github.io/contribute-to-this-project
Ihre Änderungen werden nicht sofort sichtbar . Zuerst müssen sie vom Projektbetrieb überprüft, akzeptiert und zusammengeführt werden. Sobald sie zusammengeführt werden, sollte Ihre Karte sichtbar sein und auf der Seite leben.
Für einen Rezensent ist es sehr normal, nach Änderungen eines PR zu fragen. Stellen Sie sich das als gute Praxis vor, wenn es Ihnen passiert. Behalten Sie ein Auge für Kommentare und forderten Änderungen an. Sobald Sie die angeforderten Änderungen vorgenommen haben (zurück in Ihrer Filiale), müssen Sie nur Ihre Änderungen festlegen und vorantreiben. Die PR wird automatisch mit den neuen Änderungen aktualisieren.
Ich verspreche, ich werde versuchen, so schnell wie möglich zu überprüfen und zusammenzuführen, aber ich mache das in meiner Freizeit, daher ist eine Verzögerung von Tagen unvermeidlich.
↑ Gehen Sie nach oben ↑
Nächste Schritte
- Kommen Sie in einer Weile zurück, um nach Ihrer fusionierten Pull -Anfrage zu überprüfen.
- Sie sollten eine E -Mail von GitHub erhalten, wenn Ihre Änderungen genehmigt wurden oder wenn zusätzliche Änderungen angefordert werden. Und wenn die PR endlich mit dem Meister verschmolzen und Ihre Karte hinzugefügt wurde.
- Sie können auch erfahren
- Wenn Sie dieses Projekt nützlich fanden, geben Sie ihm bitte einen Stern oben auf der Seite und twittern Sie darüber, um das Wort zu verbreiten
- Sie können sich unserem Discord -Server anschließen
- Sie können mir folgen und in Verbindung setzen? (Twitter) oder eine dieser anderen Optionen verwenden
- Dies ist ein Open -Source -Projekt. Abgesehen davon, dass Sie Ihre Karte beitragen, helfen Sie gerne, Fehler, Verbesserungen oder neue Funktionen zu beheben. Öffnen Sie ein Problem oder senden Sie eine neue Pull -Anfrage
- Um unsere Community zu verbessern, schauen Sie sich die Registerkarte GitHub Diskussionen nebenher, um Anfragen zu ziehen. Dieser Bereich ist ein Ort, an dem Sie sich vorstellen, in tiefere Diskussionen über Open Source eingehen und mit den Projektbeteiligern kommunizieren können. Helfen Sie uns, diese Funktion aufzubauen und unsere Community zu verbessern?
- Vielen Dank, dass Sie zu diesem Projekt beigetragen haben . Jetzt können Sie versuchen, zu anderen Projekten beizutragen. Suchen Sie nach dem
Etikett für Anfänger-freundliche Beitragsoptionen. - Ich suche auch Mitarbeiter, die mir bei der Überprüfung und Verschmelzung von PRs behoben werden. Wenn Sie eine fortgeschrittenere Git -Praxis erhalten möchten, lesen Sie den Leitfaden des Betreuers, beitreten Sie unserem Discord -Server an und fordern Sie sie auf, sich dem Team aus den Projektbeteiligten anzuschließen.
↑ Gehen Sie nach oben ↑
Anerkennung
Dieses Projekt wird stark von Roshan Josseys großem First-Contributions-Projekt mit seinem hervorragenden Tutorial beeinflusst.
Es ist auch besonders von der großartigen Community in Bezug auf #GoogLeudacityscholars The Google Challenge Stipendium: Front-End Web Dev, Klasse von 2017 Europa inspiriert.
Lizenz
Dieses Projekt ist unter der MIT -Lizenz lizenziert.
Top 100 Mitwirkende
Zurück nach oben ↑
