web-dev-qa-db-de.com

Wie kann man eine HTML-Seite auf Github als normal gerenderte HTML-Seite anzeigen, um eine Vorschau im Browser zu sehen, ohne sie herunterladen zu müssen?

Am http://github.com Entwickler behalten die HTML-, CSS-, Javascript- und Bilddateien des Projekts. Wie kann ich die HTML-Ausgabe im Browser sehen?

zum Beispiel diese https://github.com/necolas/css3-social-signin-buttons/blob/master/index.html

wenn ich dies öffne, wird der gerenderte HTML-Code des Autors nicht angezeigt. Es zeigt die Seite als Quellcode.

Ist es möglich, als gerendertes HTML direkt zu sehen? ansonsten muss ich immer das ganze zipt herunterladen, um das ergebnis zu sehen

305
Jitendra Vyas

Die bequemste Möglichkeit, eine Vorschau von HTML-Dateien auf GitHub anzuzeigen, besteht darin, zu http://htmlpreview.github.com/ zu gehen oder sie einfach der ursprünglichen URL voranzustellen, dh: http: // htmlpreview.github.com/?https://github.com/bartaz/impress.js/blob/master/index.html

405
niutech

Wenn Sie kein Archiv herunterladen möchten, können Sie dies mit GitHub Pages rendern.

  1. Fork das Repository zu Ihrem Konto.
  2. Klonen Sie es lokal auf Ihrem Computer
  3. Ein ... kreieren gh-pages branch (falls bereits vorhanden, entfernen Sie diesen und erstellen Sie einen neuen Zweig basierend auf master).
  4. Schieben Sie den Zweig zurück zu GitHub.
  5. Sehen Sie sich die Seiten an unter http://username.github.io/repo `

In Code:

git clone [email protected]:username/repo.git
cd repo
git branch gh-pages
# Might need to do this first: git branch -D gh-pages
git Push -u Origin gh-pages # Push the new branch back to github
Go to http://username.github.io/repo
76
Ross

Sie können RawGit verwenden:
https://rawgit.com/necolas/css3-social-signin-buttons/master/index.html

Es funktioniert besser (zum Zeitpunkt des Schreibens) als http://htmlpreview.github.com/ und liefert Dateien mit korrekten Content-Type-Headern. Darüber hinaus wird eine CDN-URL zur Verwendung in der Produktion bereitgestellt.

61
Julien Carsique

Das geht ganz einfach mit Github-Seiten , es ist nur ein bisschen komisch, wenn du es zum ersten Mal machst. Sorta wie das erste Mal musste man 3 Kätzchen jonglieren, während man stricken lernte. (OK, es ist nicht so schlimm)

Sie benötigen einen gh-pages-Zweig:

Grundsätzlich sucht github.com nach einem gh-pages Zweig des Repositorys. Es wird alle HTML-Seiten, die es hier findet, als normales HTML direkt an den Browser liefern.

Wie bekomme ich diesen Gh-Pages-Zweig?

Einfach. Erstellen Sie einfach einen Zweig Ihres Github-Repos namens Gh-Branches. Geben Sie - Orphan an, wenn Sie diesen Zweig erstellen, da Sie diesen Zweig eigentlich nicht wieder in Ihrem Github-Zweig zusammenführen möchten, sondern nur einen Zweig das enthält Ihre HTML-Ressourcen.

$ git checkout --Orphan gh-pages

Was ist mit der ganzen anderen Masse in meinem Repo, wie passt das dazu?

Nein, du kannst es einfach löschen. Und das ist jetzt sicher, da Sie Ihre Aufmerksamkeit darauf gerichtet haben, einen Orphan-Zweig zu erstellen, der nicht wieder mit Ihrem Hauptzweig zusammengeführt werden kann, und all Ihren Code zu entfernen.

Ich habe den Zweig erstellt, was nun?

Sie müssen diesen Zweig auf github.com hochschieben, damit seine Automatisierung diese Seiten für Sie hosten kann.

git Push -u Origin gh-pages

Aber .. Mein HTML wird immer noch nicht geliefert!

Es dauert einige Minuten, bis Github diese Zweige indiziert und die erforderliche Infrastruktur für die Bereitstellung der Inhalte aktiviert hat. Bis zu 10 Minuten nach Github.

Die Schritte von github.com

https://help.github.com/articles/creating-project-pages-manual

27
hendrikswan

Ich habe alle Kommentare gelesen und dachte, dass GitHub es dem normalen Benutzer zu schwer machte, GitHub-Seiten zu erstellen, bis ich GitHub-Themenseite besuchte des betreffenden Repos, wo Sie die Option "Verwenden Sie den Master-Zweig für GitHub-Seiten" auswählen können. und voilà !! ... checke das jeweilige Repo am https://username.github.io/reponame

screenshot to support my answer

7
Mukesh

Diese Lösung nur für chrome browser. Ich bin nicht sicher über andere Browser.

  1. Fügen Sie im chrome browser die Erweiterung "Modify Content-Type Options" hinzu.
  2. Öffnen Sie die URL "chrome-extension: //jnfofbopfpaoeojgieggflbpcblhfhka/options.html" im Browser.
  3. Fügen Sie die Regel für die URL der Rohdatei hinzu. Zum Beispiel:
    • URL-Filter: https: ///raw/master//fileName.html
    • Originaltyp: Text/normal
    • Ersetzungstyp: Text/HTML
  4. Öffnen Sie den Dateibrowser, den Sie in der Regel als URL hinzugefügt haben (in Schritt 3).
1
Vijay

Wenn Sie Tampermonkey verwenden, können Sie dem Aktionsmenü neben den Schaltflächen "Roh", "Schuld" und "Verlauf" ein Skript hinzufügen, das die Schaltfläche preview with http://htmlpreview.github.com/ Hinzufügt.

Skript wie dieses: https://Gist.github.com/vanyakosmos/83ba165b288af32cf85e2cac8f02ce6d

1
Aiven

Dies ist keine direkte Antwort, aber ich denke, es ist eine ziemlich süße Alternative.

http://www.s3auth.com/

Es ermöglicht Ihnen, Ihre Seiten hinter der Basisauthentifizierung zu hosten. Großartig für Dinge wie API-Dokumente in Ihrem privaten Github-Repo. Einfach einen S3-Put als Teil Ihres API-Builds hinzufügen.

1
rynop

Sie können eine Vorschau des HTML-Codes anzeigen, indem Sie die folgende Chrome-Erweiterung - Run Selected HTML Verwenden, die recht einfach zu verwenden ist.

Wenn Sie im Lesemodus von GitHub select all the code Möchten, ist es auch ganz einfach, zuerst den Mauszeiger an die erste Klammer von <html> Oben zu bewegen und dann die Taste gedrückt zu halten Shift Drücken Sie die Taste und bewegen Sie als nächstes den Cursor in die letzte Klammer von </html> unten.

Ausgewähltes HTML ausführen - Chrome Web Store

https://chrome.google.com/webstore/detail/run-selected-html/eefflcdphpehljcadbmkdpopmbamfefl/

Schritt 1 : Wählen Sie im Lesemodus den gesamten Text des HTML-Codes aus.

Schritt 2 : Klicken Sie mit der rechten Maustaste auf "Ausgewähltes HTML ausführen", um das gerenderte Ergebnis in einem neuen Tab anzuzeigen.

Run Selected HTML

Das laufende Ergebnis: enter image description here

0
Bravo Yeung

Sie können Github Pages einfach einschalten. ^ _ ^

Klicken Sie auf "Einstellungen", gehen Sie zu "GitHub Pages" und klicken Sie auf "Dropdown" unter "Quelle" und wählen Sie den Zweig, den Sie veröffentlichen möchten (wo sich die Haupt-HTML-Datei befindet). ^ _ ^

0
jester96