Wie kann man eine HTML-Seite auf Github als normal gerenderte HTML-Seite sehen, um eine Vorschau im Browser zu sehen, ohne sie herunterzuladen?

Question

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

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

Wenn ich diese öffne, wird das gerenderte HTML des Codes des Autors nicht angezeigt. Es zeigt die Seite als Quellcode an.

Ist es möglich, es direkt als gerendertes HTML zu sehen? Sonst muss ich immer das ganze ZIP herunterladen, nur um das Ergebnis zu sehen.

Answer 1

Wenn Sie Tampermonkey verwenden, können Sie außerdem ein Skript hinzufügen, das preview with http://htmlpreview.github.com/ in das Aktionsmenü neben den Schaltflächen "raw", "blame" und "history".

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

Answer 2

Ich habe einen anderen Weg gefunden:

1. Klicken Sie auf die Schaltfläche "Raw", wenn Sie es nicht schon getan haben.
2. Ctrl+A, Ctrl+C
3. Öffnen Sie die "Entwicklertools" mit F12
4. Klicken Sie im "Inspektor" mit der rechten Maustaste auf den Tag und wählen Sie "HTML bearbeiten".
5. Strg+A, Strg+V
6. Strg+Zurück

Getestet mit Firefox, aber es sollte auch in anderen Browsern funktionieren

Answer 3

Wenn Sie Folgendes konfiguriert haben GitHub-Seiten können Sie Ihre öffentliche Url wie folgt erhalten:

https://<username>.github.io/<repository>/index.html

wobei <username> & <repository> wird der Platzhalter für den Benutzernamen bzw. den Repo-Namen sein

Das Ergebnis wird also folgendermaßen aussehen: http://necolas.github.io/css3-social-signin-buttons/index.html

Answer 4

Zwei Ansätze (für öffentliche Repositories) haben sich für mich bewährt: beide sehr einfach und in der Lage, komplexe HTML-Seiten mit Links zu lokalen CSS-Dateien und lokalen JAVASCRIPT/VUE-Dateien wiederzugeben.

• METHODE 1 - Mit GitHub-Seiten

Zum Einrichten gehen Sie bitte zu: https://github.com/YOUR_ACCT_NAME/YOUR_REPO_NAME/settings/pages (siehe Bildschirmfoto unten)

Beispiel für meine ursprüngliche HTML-Seite im Repo: https://github.com/BrainAnnex/life123/blob/main/experiments/life_1D/diffusion/diffusion_1.htm

Wie es gerendert aussieht: https://brainannex.github.io/life123/experiments/life_1D/diffusion/diffusion_1.htm Beachten Sie, dass das Styling, die Grafiken und die interaktiven Steuerelemente alle gut sind :)

• METHODE 2 - Mit kostenlosem Service raw.githack.com

Gehe zu https://raw.githack.com/ und geben Sie die vollständige URL Ihrer Seite ein (einschließlich des Teils "/blob"), z. B. https://github.com/BrainAnnex/life123/blob/main/experiments/life_1D/diffusion/diffusion_1.htm

Dann generiert die Website 2 Links, die recht gut funktionieren :)

Eine gute Alternative, falls die GitHub-Seiten nicht mehr verfügbar sein sollten!

Answer 5

Das ist keine direkte Antwort, aber ich denke, es ist eine ziemlich gute Alternative.

http://www.s3auth.com/

Es erlaubt Ihnen, Ihre Seiten hinter Basic Auth zu hosten. Groß für Dinge wie api Dokumente in Ihrem privaten github repo. fügen Sie einfach eine s3 setzen als Teil Ihrer api bauen.