Share
Ein wirklich nützlicher Aspekt von GitHub-Repos ist, dass sie dank GitHub Pages statische Websites hosten können. Wussten Sie jedoch, dass Sie alle GitHub-Repos auch dynamisch auf Ihrer Website anzeigen können?
In diesem Tutorial zeige ich Ihnen einen kleinen Trick, indem Sie Repository-Metadaten verwenden, um ein Portfolio Ihrer Open-Source-Projekte zu erstellen:
Bevor wir loslegen, müssen Sie sicherstellen, dass alle Ihre Open Source-Projekte auf dem neuesten Stand sind. Das bedeutet, dass sie über eine ordentliche Readme-Datei und eine entsprechende Lizenz verfügen. Es sieht nicht gut aus, wenn die Readme-Datei fehlt oder ungenau ist. Darüber hinaus müssen Sie die Felder für Beschreibung und URL entsprechend ausfüllen. Diese werden als Teil jedes Portfolioelements verwendet.
Zuerst müssen wir ein neues Repo auf GitHub erstellen. Um GitHub Pages auszulösen, müssen Sie entweder das Repo als Ihren Benutzernamen angeben, gefolgt von .github.io also in meinem Fall daviddarnes.github.io oder ein Repo Ihrer Wahl, aber mit einem Hauptzweig namens gh-pages.
Die Schaltfläche "Neues Repo" auf github.comWenn Sie GitHub noch nicht kennen und nicht sicher sind, wie Sie ein Repo einrichten möchten, werfen Sie einen Blick auf diese Einführung für Anfänger von Dan Wellman.
Ich würde das empfehlen Benutzername.github.io Repo, wenn Sie es noch nicht für etwas anderes verwenden. Viele Unternehmen wie Yelp, IBM und Square verwenden ihre Haupt-Website von github.io, um ihre Open-Source-Projekte zu präsentieren, aber es liegt ganz bei Ihnen.
Stellen Sie sicher, dass Sie auswählen Jekyll in dem .gitignore dropdown beim Erstellen Ihres Repos.
Wir werden keine vollständige Jekyll-Site erstellen, aber wir werden einige ihrer Funktionen nutzen. Wenn Sie Hilfe bei der Verwendung von Jekyll benötigen, lesen Sie den hervorragenden Kurs von Guy Routledge, statische Websites mit Jekyll erstellen.
Nach dem Klonen des Repos (Hinzufügen zum lokalen Computer) können Sie die erforderlichen Dateien hinzufügen, um Ihre GitHub-Projekte aufzulisten.
Um unsere Projektseite zu konfigurieren, müssen wir eine _config.yml Datei. Dies ist, was verwendet wird, um unser Jekyll-Projekt zu konfigurieren. Es ist nicht viel Konfiguration erforderlich, wir müssen Jekyll nur anweisen, das zu ignorieren readme.md Datei:
# Repo-Dateien ignorieren schließen aus: - README.md
Die Konfigurationsdatei teilt dem Server außerdem mit, dass wir Jekyll mit diesem Repo verwenden möchten.
Die andere Datei, die wir brauchen, ist eine index.html-Datei. In dieser Datei werden wir die Repositorys auf GitHub über ihre Metadaten-API durchlaufen. Wir können dies mit der Kraft von Liquid, der Templatiersprache in Jekyll, erreichen. Sie müssen oben in der Indexdatei Folgendes hinzufügen, um die Verwendung von Liquid zu ermöglichen:
--- # Vordere Angelegenheit ---
Die beiden Sätze von Strichen werden zum Einwickeln verwendet vordere Angelegenheit für die Datei; Einstellungen für diese bestimmte Seite. Da wir derzeit jedoch keine Einstellungen für die Datei vorgenommen haben, habe ich gerade einen Kommentar hinterlassen.
Wenn Sie sich in der Datei index.html befinden, müssen Sie etwas HTML-Struktur und etwas Flüssigkeit hinzufügen, um die Projekte zu durchlaufen. Hier ist meine einfache HTML-Struktur:
Zu Beginn haben wir nur eine mit einem , aber ich plane, später weitere Details hinzuzufügen.
Als nächstes kommt der flüssige Code. Im folgenden Beispiel habe ich die Listenstruktur verwendet und mit der Flüssigkeitsschleife kombiniert:
Nehmen wir uns einen Moment Zeit, um aufzuschlüsseln, was passiert. Wir machen uns über jedes Repo auf site.github.public_repositories. site.github Hier werden alle Metadaten für GitHub-Repos gespeichert, darunter auch alle öffentlichen Repositorys.
Dann habe ich für die Zwecke dieser Demo die Schleife mit begrenzt Limit: 28, Die Demo-Seite ist also nicht zu lang.
Als nächstes überprüfe ich, ob es ein gegabeltes Repo ist. Ob repo.fork stimmt nicht, wir fahren mit der Ausgabe fort. Wenn Sie gerne zu anderen Projekten auf GitHub beitragen, wie ich, haben Sie normalerweise ein paar gegabelte Repos. Wenn Sie dies wünschen, wird diese Prüfung verhindern, dass sie in Ihrem Portfolio angezeigt werden.
Zuletzt geben wir für jedes Repo die Werte aus repo.homepage und repo.name in einem Anker.
Jetzt müssen Sie diese Änderungen festschreiben und vorantreiben. entweder um zu Meister oder gh-pages (abhängig vom gewählten Setup). Dann zeigen Sie Ihre grundlegende Projektlistensite an:
Es wird noch keine sehr aufregende Ausgabe sein - so sieht die grundlegende Demo mit meinem eigenen GitHub-Account aus:
Es ist an der Zeit, unseren Projekten Stil und Details hinzuzufügen!
Mit den GitHub-Metadaten können Sie alle Arten von Überprüfungen und Filtern durchführen. Einige der Datenwerte wurden dokumentiert. Wenn Sie jedoch detailliertere Beispiele wünschen, können Sie die API detailliert beschreiben. Als Erstes sollten wir eine CSS-Datei hinzufügen, damit wir die Seite gestalten können.
Dank Jekyll können wir eine SCSS-Datei verwenden, um unser Portfolio direkt zu gestalten. Erstellen Sie eine styles.scss-Datei in einem neuen css-Verzeichnis und fügen Sie am Anfang der Datei einen Front-Angel-Kommentar hinzu:
--- # Styles ---
Dieser Kommentar funktioniert genauso wie in der index.html. Jekyll erkennt die Datei und übernimmt für uns die Vorverarbeitung. Sie können die Dinge nach Belieben gestalten, aber nach etwas Flexbox-Arbeit und Hinzufügen von Google-Schriftarten habe ich jetzt Folgendes:
Schauen Sie sich das an SCSS Tab oben in der Demo, um zu sehen, wie ich Dinge gestylt habe.
Versuchen wir nun, zusätzliche Informationen zu jedem Repository einzubringen. Zuerst fügen wir eine Beschreibung hinzu:
repo.description
repo.description bringt die Beschreibung durch, die über Ihrem Repository in GitHub angezeigt wird.
Wie wäre es, wenn wir zeigen, wie viele Sterne und Gabeln wir in jedem Repository hatten? Das können wir mit erreichen repo.stargazers_count und repo.forks_count wie so:
repo.description
Wie dies zeigt, können Sie viele Daten aus Ihren GitHub-Repositorys verfügbar machen. Einige davon sind Versuch und Irrtum; Es ist nur eine Frage des Ausprobieren verschiedener Werte und der Überprüfung der Ergebnisse. Jekyll sollte (meistens) keinen Fehler auslösen, so dass Sie auf der Live-Seite sehen können, ob das Ergebnis funktioniert oder nicht.
In meinem Beispiel habe ich jedem Element Symbole und Farben hinzugefügt, die die Hauptsprache widerspiegeln, in der sie geschrieben wurden. Ich habe dies durch Hinzufügen einer Klasse mit erreicht repo.language. Ich konnte dann jedes Element je nach Sprache gestalten. Siehe folgendes Beispiel:
Im obigen Beispiel verwende ich Flüssigkeit downcase filtern, um Großbuchstaben zu entfernen. Sie werden auch sehen, dass ich ein Symbol in Form eines SVG-Sprites hinzugefügt habe. Wieder benutze ich repo.language als ID für jedes meiner Icons. Wenn Sie mehr über SVG-Sprite-Symbole erfahren möchten, werfen Sie einen Blick auf ein Tutorial, das ich vor einiger Zeit geschrieben habe:
Natürlich muss Ihre eigene Projektseite nicht so aussehen. Sie können so kreativ sein, wie Sie möchten! Hier ist zum Beispiel meine persönliche Open-Source-Projektseite: https://daviddarnes.github.io. Ich habe schon einige Features und Tricks in meinem verwendet. Wenn Sie also etwas davon herausfinden möchten, können Sie den Code auf GitHub anzeigen.
Es gibt ein oder zwei Details, mit denen wir uns nicht befasst haben, und ein paar Funktionen, die wir hinzufügen könnten.
Teilen Sie uns in den Kommentaren mit, wie es Ihnen geht!
Accentsconagua