Share
Lassen Sie uns über GitHub-Seiten sprechen. was sie sind und wie Sie den Dienst in wenigen Minuten nutzen können, um statische Seiten kostenlos bereitzustellen. Lass uns anfangen!
GitHub Pages laut GitHub sind:
… Frei gehostete öffentliche Webseiten, die auf unserer Website leicht veröffentlicht werden können.
Was bedeutet das für dich? Dies bedeutet kostenloses, zuverlässiges Hosting statischer Inhalte. Im Allgemeinen wurde dies von GitHub zur Unterstützung von auf GitHub gehosteten Open-Source-Projekten geschaffen, indem es ihnen die Möglichkeit bietet, Dokumentation, Demos oder andere interaktive Erlebnisse anzubieten, um den Code im Repository zu ergänzen.
GitHub-Seiten können jedoch für eine Vielzahl von Projekten verwendet werden und unterstützen bereits Jekyll (einen leistungsstarken, auf Ruby basierenden statischen Site-Generator). Also lernen wir, wie man es benutzt!
Sie müssen sich zunächst für ein GitHub-Konto anmelden, bevor Sie mit den GitHub-Seiten beginnen können. Um den größtmöglichen Nutzen aus GitHub zu ziehen, wird dringend empfohlen, dass Sie Ihre SSH-Schlüssel einrichten. Mit den Anweisungen unter diesem Link können Sie Ihren Computer sicher mit Ihrem GitHub-Konto und all Ihren Repositorys auf GitHub verbinden. Nachdem Sie ein GitHub-Konto erstellt und Ihre Schlüssel registriert haben, können Sie ganz einfach die GitHub-App für Mac oder GitHub für Windows herunterladen, die beide offiziell von GitHub unterstützt werden.
GitHub ist ein Ort, an dem Leute ihren Code speichern können. Git ist ein leistungsfähiges Versionskontrollsystem, mit dem Entwickler Änderungen am Code in aufgerufenen Schritten nachverfolgen können begeht, und verfolgen Sie verschiedene Pfade eines bestimmten Projekts mithilfe von Geäst.
Es gibt viele Features von Git, und noch mehr Leistung ist in GitHub eingeschlossen, aber im Moment werden wir uns auf GitHub Pages konzentrieren. Wenn Sie mehr über GitHub erfahren möchten, sehen Sie sich Git for Designers sowie Git & GitHub: A Beginner's Guide an, die weitere Informationen zu SSH-Schlüsseln sowie einige grundlegende Git-Funktionen enthalten, die über den Umfang von hinausgehen Dieser Beitrag.
Es gibt verschiedene Möglichkeiten, wie GitHub-Seiten verwendet werden können. Wir werden mit einem der schnellsten Wege beginnen.
Mit dem automatischen Seitengenerator können Benutzer ihre Seite mit Markdown erstellen, einer von Menschen lesbaren Markup-Sprache, die Autoren von Inhalten die Erstellung von Dokumenten mit einheitlichen Markup-Richtlinien erleichtert.
Wie verwenden Sie den automatischen Seitengenerator? Zuerst möchten Sie ein Repository erstellen. Wenn das Repo auf Ihren Benutzernamen.github.com verweisen soll, erstellen Sie ein Repo, das diesem Namen entspricht. Zum Beispiel wird mein persönliches Repo benannt jcutrell.github.com. Um auf den statischen Standortgenerator zuzugreifen, gehen Sie zu den Einstellungen dieses Repos (Zugriff unter einer URL, die dem Format folgt https://github.com/username/projectname/settings). Daraufhin wird ein Editor angezeigt, der von einem Markdown-Rich-Text-Editor unterstützt wird. Sie können automatisch in die Standarddatei Readme.md kopieren oder Ihren Inhalt nach Belieben bearbeiten. Darüber hinaus bietet der automatische Generator Platz für das Tracking von Google Analytics.
Nachdem Sie alle relevanten Inhalte hinzugefügt haben, können Sie zur Layoutauswahl wechseln. Mit mehreren Designs zur Auswahl, ist dies eine großartige Option, um Benutzern sofort eine DRY-Landing-Page ohne Aufwand zu bieten, die auf Ihrer Readme-Datei basiert. Sie müssen lediglich Ihre Dokumentation auf dem neuesten Stand halten (etwas, das Sie bereits tun sollten). Sie können diese Seiten auch von ihrem Ursprung herunterziehen, lokal ändern und dann wieder nach oben schieben.
Wenn Sie die GitHub-App zur Steuerung Ihres GitHub-Repositorys verwenden möchten, können Sie Folgendes tun.
Zunächst sollten Sie die App von mac.github.com oder windows.github.com installieren und die einfachen Anweisungen zum Setup befolgen.
Wählen Sie dann ein Repository aus, das Sie auf Ihrem Computer klonen möchten, indem Sie links Ihren GitHub-Benutzernamen auswählen und auf klicken An Computer klonen.
Konfigurieren Sie anschließend den Ort und Namen, unter dem Sie das Repository klonen möchten.
Wählen Sie dann die Registerkarte "Verzweigungen" links aus und wählen Sie die Option gh-pages Zweig, der vom Generator erstellt wurde. Sie können Ihre Änderungen dann lokal an dem zuvor angegebenen Ort vornehmen.
Wenn Sie bereit sind, Änderungen vorzunehmen, um live zu sein, gehen Sie zu Änderungen Tab und erstellen Sie ein Commit mit dem Formular oben links.
Zum Schluss wählen Sie die Geäst Tab und klicken Sie auf veröffentlichen rechts neben dem gh-pages-Zweig. Dadurch werden alle Ihre Änderungen an GitHub übertragen.
Wenn Sie die Befehlszeile verwenden möchten, um Ihr GitHub-Repository zu steuern, können Sie Folgendes tun.
git clone [email protected]: Benutzername / Projektname.git git checkout gh-pages
Wenn Sie eine Benutzerseite (anstelle eines einzelnen Projekts) erstellt haben, wird der Hauptzweig angezeigt ist der GitHub-Seiten-Zweig. Klonen Sie einfach Ihr Benutzerprojekt, um es lokal zu bearbeiten.
git clone [email protected]: Benutzername / Benutzername.github.com.git git checkout master # Dies sollte bereits standardmäßig ausgecheckt sein
Der automatische Generator ist jedoch möglicherweise nicht die Lösung Ihres Problems. Vielleicht haben Sie Ihre Site bereits statisch aufgebaut und möchten sie einfach irgendwo einsetzen.
Diese zweite Option ist so einfach wie es klingt. Damit GitHub-Seiten mit beliebigen lokalen Inhalten arbeiten können, müssen Sie zunächst das Repository auf GitHub erstellen.
Wenn Sie sich für die GitHub-App entschieden haben, So erstellen Sie Ihre eigenen Handbuchseiten.
Wähle aus Meine Repositories Ordnerregisterkarte, und klicken Sie dann auf den Pfeil in dem Repository, mit dem Sie GitHub-Seiten erstellen möchten. Wenn Sie derzeit keine Repositories haben, mit denen Sie etwas anfangen können, können Sie eines in der App erstellen.
Wenn Sie GitHub Pages mit erstellen username.github.com, der Meisterzweig ist die Seiten verzweigen, so dass Sie das Projekt in einem lokalen Ordner öffnen können gh-pages Ast. Wenn Sie GitHub Pages für ein Projekt erstellen, erstellen Sie einen neuen Zweig mit dem Namen gh-pages; Klicken Sie auf die Schaltfläche auf der rechten Seite des Repositorys, und klicken Sie dann auf die Schaltfläche + auf der rechten Seite des aktuellen Zweigs.
Auf diese Weise können Sie den neuen Zweignamen eingeben.
Standardmäßig enthält der neue Zweig alle aktuellen Projektdateien. Sie möchten also alle Dateien aus dem Projekt entfernen, während das gh-pages Zweig ist ausgewählt. (Stellen Sie sicher, dass das Kennzeichen "Aktuelle Verzweigung" anzeigt, dass Sie sich in der Gh-Pages-Verzweigung befinden, es sei denn, Sie erstellen Seiten für username.github.com.)
Anschließend können Sie eine statische Site direkt in Ihrem Projektordner erstellen.
Nachdem Sie die statische Site im Projektordner erstellt haben, kehren Sie zur GitHub-App zurück und wechseln zur Änderungen Tab links. Daraufhin werden alle von Ihnen vorgenommenen Änderungen angezeigt, einschließlich der Löschung der Originaldateien. Erstellen Sie ein Commit, indem Sie das Formular oben links ausfüllen. Wenn Sie dies getan haben, können Sie zur Registerkarte Zweige und zurückkehren veröffentlichen der gh-pages-Zweig (oder der Master-Zweig, wenn Sie Seiten für username.github.com erstellen). Dies ist der Schritt, der Ihren Code an GitHub weiterleitet und die statische Site auf dem Server initiiert.
Sie können das Repository auch einfach über die Befehlszeile klonen Wählen Sie die URL oben auf der Projektseite aus und führen Sie den folgenden Befehl aus.
git clone [email protected]: Benutzername / Projektname.git
Als Nächstes müssen Sie einen neuen Zweig mit dem Namen erstellen gh-pages; Dieser Zweig muss auch vollständig leer sein. Führen Sie diese Befehle aus:
git checkout --orphan gh-pages git rm -rf. git commit -am "erste Seiten Commit"
(Weitere Informationen finden Sie in der offiziellen Dokumentation.).
Dadurch wird das Projekt in einen Ordner mit dem Namen heruntergezogen Projektname (was auch immer Ihr Projekt ist) in Ihrem aktuellen Arbeitsverzeichnis und wird automatisch GitHub als entfernter Ursprung. Im Wesentlichen bedeutet dies, dass Sie Dateien erstellen und Änderungen vornehmen können. Befolgen Sie dann die nächsten Befehle, um diese Dateien und Änderungen zu verfolgen, und senden Sie sie in GitHub.
git status # ruft den aktuellen Status des Repositorys ab und ruft ihn ab; Dadurch werden neue Dateien und nicht protokollierte Änderungen angezeigt. # Dies fügt alle neuen Dateien hinzu, die erstellt wurden. git commit -am "Hier ist mein ursprüngliches Commit" # Dies erstellt ein Commit für Ihren aktuellen Zweig (standardmäßig der Master-Zweig). git Push-Ursprung gh-pages #dies drückt den gh-pages-Zweig zurück zu GitHub.
Dieser Vorgang wird während aller Iterationen Ihrer Website wiederholt, wenn Sie Änderungen vornehmen. Das funktioniert großartig, aber was ist, wenn Sie ein statisches Blog hosten möchten? Die bekannteste statische Blogging-Plattform, Jekyll, wird standardmäßig von GitHub-Seiten unterstützt. (Jekyll wurde von einem Teammitglied bei GitHub gebaut.)
Um Jekyll mit GitHub Pages zu verwenden, müssen Sie zunächst eine Jekyll-Site lokal erstellen. Sie können lokal kompilieren oder GitHub für Sie kompilieren lassen. Um zu beginnen, können Sie diesem Leitfaden zu Octopress folgen, einem Rahmen, der einige der grundlegenden Funktionen von Jekyll abstrahiert.
Alternativ können Sie eine rohe Jekyll-Site erstellen. Zuerst müssen Sie den Jekyll-Edelstein installieren. Im Allgemeinen bedeutet dies, dass der folgende Befehl ausgeführt wird:
gem jekyll installieren
Wenn Sie RubyGems installiert haben, sollte dies die neueste stabile Version sein.
Schauen Sie sich die Gebrauchsanweisung sowie diese Anleitung zu NetTuts an. Sie müssen die grundlegende Dateistruktur erstellen, bevor Jekyll eine Site erstellen kann. Um schnell einsatzbereit zu sein, werfen Sie einen Blick auf Daniel McGraws Jekyll-Base. Dort wird die Dateistruktur definiert, die Jekyll zum Erstellen einer Site benötigt. Ich habe auch einige Momente gebraucht, um ein wiederverwendbares Skript namens jekyll_structure zu erstellen. Folgen Sie den Installationsanweisungen. Wenn es für Sie nicht funktioniert, erstellen Sie einfach die folgende Struktur manuell.
.
.gitignore
README
| - _config.yml
| - _layouts
| | - layout.html
| '- post.html
| - _posts
| '- 1985-10-26-Test-Post.md
'- index.html
Die Hauptkonfiguration für Jekyll wird in der _config.yml Datei. _layouts enthält die Layouts, die bei der Generierung verwendet werden.
Nachdem Sie Beiträge und Seiten erstellt und anschließend bearbeitet haben, können Sie sie einfach zu Ihrem Git-Repository hinzufügen und wie zuvor beschrieben festschreiben:
git add. git commit -am "Hinzugefügt einen neuen Beitrag" git Push-Ursprung gh-pages # oder git Push-Herkunftsmaster für username.github.com-Seiten
Hinweis: es ist viel Es ist einfacher, Frameworks wie Octopress oder Jekyll Bootstrap zu verwenden, um automatisch Beiträge und Seiten für Jekyll mit ähnlichen Befehlen zu generieren rake new_post ["Beitragsname geht hier"] Anstatt Ihre Post- oder Seitendateien manuell zu erstellen.
Beachten Sie, dass Repositorys, die auf GitHub als privat festgelegt sind, öffentliche Seiten erstellen. GitHub hat diese Funktion für Projekte zur einfachen Veröffentlichung von Dokumentation erstellt. Im Zentrum steht die Idee der Offenheit. Statische Websites, die auf GitHub gehostet werden, werden in naher Zukunft niemandem verborgen.
Beschränken Sie sich nicht auf das Design oder die Struktur, die in den von GitHub automatisch erstellten Seiten vordefiniert ist. Diese können leicht bearbeitet werden, indem Sie das Repository einfach auf Ihren lokalen Computer herunterziehen, Änderungen vornehmen und diese abschicken.
Je mehr Sie über Git und GitHub lernen, desto komfortabler werden Sie mit GitHub Pages. Schauen Sie sich diesen Beitrag auf Treehouse sowie dieses Tutsplus-Tutorial von Jeffrey Way über GitHub for Designers an.
Wenn Sie Ihre eigene Domäne an eine GitHub Pages-Domäne umleiten möchten, lesen Sie diese Anleitung auf der GitHub-Hilfeseite, um zu beginnen. Wer weiß - vielleicht können Sie Ihren persönlichen Hosting-Provider loswerden und statisch gehen!
GitHub Pages ist äußerst benutzerfreundlich, besonders wenn es mit anderen Tools wie Jekyll kombiniert wird. Wenn Sie die Tools kennenlernen, auf die GitHub Pages angewiesen ist, können Sie ein besserer und wertvollerer Front-End-Entwickler und Designer werden. Dies ist eine großartige Möglichkeit, Ihre Projekte zu präsentieren. Darüber hinaus bietet GitHub einen kostenlosen Service für alle, sodass die Kosten für den Einstieg auf den Wert der Lernzeit begrenzt sind. Worauf wartest du? Eintauchen!
Accentsconagua