Kann ich HTML-Dateien direkt von GitHub ausführen, anstatt nur deren Quelle anzuzeigen?

300

Wenn ich eine .htmlDatei in einem GitHub-Repository habe, z. B. zum Ausführen einer Reihe von JavaScript-Tests, kann ich diese Seite dann direkt anzeigen und so die Tests ausführen?

Könnte ich zum Beispiel tatsächlich die Testergebnisse sehen, die von der jQuery-Testsuite erzeugt würden , ohne das Repo auf mein lokales Laufwerk herunterzuladen oder zu klonen und dort auszuführen?

Ich weiß, dass dies GitHub im Grunde genommen in das Hosting-Geschäft für statische Inhalte bringen würde, aber andererseits müssen sie nur ihren MIME-Typ von text/plainauf ändern text/html.

javascript html github Domenic
quelle
2
Hmm ... kann ein GreaseMonkey-Skript Header ändern?
Alex Howansky
1
Können Sie die akzeptierte Antwort auf diese Frage aktualisieren? Es gibt jetzt eine Möglichkeit, dies zu tun - siehe @ Niutechs Antwort ...
Alex Dean
1
Mögliches Duplikat von Link und Ausführen einer externen JavaScript-Datei, die auf GitHub
Troy Alford
Mögliches Duplikat von Wie wird eine HTML-Seite auf Github als normal gerenderte HTML-Seite angezeigt, um die Vorschau im Browser anzuzeigen, ohne sie herunterzuladen?
Michael Freidgeim

Antworten:

366

Möglicherweise möchten Sie raw.githack.com verwenden . Es unterstützt GitHub-, Bitbucket-, Gitlab- und GitHub-Gists.

GitHub

Vor:

https://raw.githubusercontent.com/[user]/[repository]/[branch]/[filename.ext]

In Ihrem Fall .htmlErweiterung

Nach:

Entwicklung (gedrosselt)

https://raw.githack.com/[user]/[repository]/[branch]/[filename.ext]

Produktion (CDN)

https://rawcdn.githack.com/[user]/[repository]/[branch]/[filename.ext]

In Ihrem Fall .htmlErweiterung

raw.githack.com unterstützt auch andere Dienste:

Bit Bucket

Vor:

https://bitbucket.org/[user]/[repository]/raw/[branch]/[filename.ext]

Nach:

Entwicklung (gedrosselt)

https://bb.githack.com/[user]/[repository]/raw/[branch]/[filename.ext]

Produktion (CDN)

https://bbcdn.githack.com/[user]/[repository]/raw/[branch]/[filename.ext]

GitLab

Vor:

https://gitlab.com/[user]/[repository]/raw/[branch]/[filename.ext]

Nach:

Entwicklung (gedrosselt)

https://gl.githack.com/[user]/[repository]/raw/[branch]/[filename.ext]

Produktion (CDN)

https://glcdn.githack.com/[user]/[repository]/raw/[branch]/[filename.ext]

GitHub-Kernbilder

Vor:

https://gist.githubusercontent.com/[user]/[gist]/raw/[revision]/[filename.ext]

Nach:

Entwicklung (gedrosselt)

https://gist.githack.com/[user]/[gist]/raw/[revision]/[filename.ext]

Produktion (CDN)

https://gistcdn.githack.com/[user]/[gist]/raw/[revision]/[filename.ext]

Update: rawgit wurde eingestellt

chmanie
quelle
Ja, danke, dass Sie dies hinzugefügt haben, seit ich diese Frage vor langer Zeit gestellt habe, bin ich zu diesem Dienst gewechselt. Machen wir Ihnen die akzeptierte Antwort :).
Domenic
13
Nur zu Ihrer Information: Dies scheint aus offensichtlichen Gründen für private Repos überhaupt nicht zu funktionieren.
Rfay
Es scheint das Javascript nicht zu laden.
PyRulez
1
Aus irgendeinem Grund wird auf meinen HTML-Seiten kein Text- / HTML-Inhaltstyp
angezeigt,
1
Nach der Bearbeitung ist diese Antwort völlig falsch. Mit jsDelivr können Sie eine HTML-Datei nicht direkt ausführen. Es wird nur der Klartext von HTML-Dateien angezeigt. Es ist nur für JS- oder CSS-Dateien gedacht. Für diejenigen unter Ihnen, die nach einer Antwort suchen , verwenden Sie raw.githack.com , da es sich um einen Klon von rawgit handelt.
Spencer Wieczorek
194

Es gibt ein neues Tool namens GitHub HTML Preview , das genau das tut, was Sie wollen. Stellen Sie einfach http://htmlpreview.github.com/?die URL einer HTML-Datei voran , z. B. http://htmlpreview.github.com/?https://github.com/twbs/bootstrap/blob/gh-pages/2.3.2/index.html

Hinweis: Dieses Tool ist eigentlich eine github.io-Seite und nicht mit github als Unternehmen verbunden.

Niutech
quelle
2
Vielen Dank, genau das, was ich mir erhofft hatte.
Nana
2
Ist das auch auf privaten Repos möglich?
Björn Andersson
Funktioniert nicht mit Frames (Javadoc): htmlpreview.github.com/?https://github.com/MartinThoma/… :-(
Martin Thoma
Es funktioniert nicht mit relativen Bildern, die über Javascript auf Chrome geladen wurden. Cross-origin image load denied by Cross-Origin Resource Sharing policy.
Ubershmekel
3
Relative Pfade werden ordnungsgemäß geladen, sodass eine Verknüpfung mit JS / CSS im Github-Repository möglich ist. Das ist fantastisch.
Nathan Lilienthal
18

Um auf die Antwort von @ niutech zurückzugreifen, können Sie ein sehr einfaches Lesezeichen-Snippet erstellen.
Verwenden von Chrome, obwohl es mit anderen Browsern ähnlich funktioniert

  1. Klicken Sie mit der rechten Maustaste auf Ihre Lesezeichenleiste
  2. Klicken Sie auf Datei hinzufügen
  3. Nennen Sie es so etwas wie Github HTML
  4. Für den URL- Typjavascript:top.location="http://htmlpreview.github.com/?"+document.URL
  5. Wenn Sie sich auf einer Github-Dateisichteseite befinden ( nicht raw.github.com ), klicken Sie auf den Lesezeichen-Link und Sie sind golden.
mraaroncruz
quelle
7

Sie können entweder gh-Seiten verzweigen, um Ihren Code auszuführen, oder diese Erweiterung (Chrome, Firefox) ausprobieren: https://github.com/ryt/githtml

Wenn Sie Tests benötigen, können Sie Ihre JS-Dateien einbetten in: http://jsperf.com/

Gianluca Esposito
quelle
6

Ich hatte das gleiche Problem für mein Projekt Ratio.js und hier ist, was ich getan habe.

Problem: Github.com verhindert, dass Dateien beim Anzeigen der Quelle gerendert / ausgeführt werden, indem der Inhaltstyp / MIME auf Nur-Text gesetzt wird.

Lösung: Lassen Sie die Dateien von einer Webseite importieren.

Beispiel:

Verwenden Sie jsfiddle.net oder jsbin.com , um eine Webseite online zu erstellen, und speichern Sie sie dann. Navigieren Sie zu Ihrer Datei in Github.com und klicken Sie auf die Schaltfläche "Roh", um den direkten Link zur Datei zu erhalten. Importieren Sie von dort aus die Datei mit dem entsprechenden Tag und Attribut.

<!DOCTYPE>
<html>
    <head>
        <link rel="stylesheet" href="http://code.jquery.com/qunit/git/qunit.css" type="text/css" media="screen" />
    </head>
    <body>
        <h1 id="qunit-header">QUnit example</h1>
        <h2 id="qunit-banner"></h2>
        <div id="qunit-testrunner-toolbar"></div>
        <h2 id="qunit-userAgent"></h2>
        <ol id="qunit-tests"></ol>
        <div id="qunit-fixture">test markup, will be hidden</div>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/qunit/git/qunit.js"></script>  
        <script type="text/javascript" src="https://raw.github.com/LarryBattle/Ratio.js/master/src/Ratio.js"></script>  
        <script type="text/javascript" src="https://raw.github.com/LarryBattle/Ratio.js/master/tests/js/Ratio-testcases.js"></script>  
    </body>
</html>

Live-Demo: http://jsfiddle.net/jKu4q/2/

Hinweis: Hinweis für jsfiddle.net Sie können direkten Zugriff auf die Ergebnisseite erhalten, indem Sie showam Ende der URL hinzufügen . Wie so: http://jsfiddle.net/jKu4q/2/show

Oder ... Sie können eine Projektseite erstellen und von dort aus Ihre HTML-Dateien rendern. Sie können eine Projektseite unter http://pages.github.com/ erstellen .

Nach der Erstellung können Sie über http://*accountName*.github.com/*projectName*/ Beispiel auf den Link zugreifen : http://larrybattle.github.com/Ratio.js/

Larry Battle
quelle
1
Gute Idee, verwenden Sie js fiddle, damit der Browser die Dateien von github lädt, aber warum nicht die "Ressourcen hinzufügen" von JSFiddle verwenden?
Filippo Vitale
@Filippo Tolle Idee! Ich werde das nächste Mal versuchen.
Larry Battle
4

Hier ist ein kleines Greasemonkey-Skript, das HTML-Seiten auf Github eine CDN-Schaltfläche hinzufügt

Die Zielseite hat die Form: https://cdn.rawgit.com/user/repo/master/filename.js


// ==UserScript==
// @name        cdn.rawgit.com
// @namespace   github.com
// @include     https://github.com/*/blob/*.html
// @version     1
// @grant       none
// ==/UserScript==

var buttonGroup = $(".meta .actions .button-group");
var raw = buttonGroup.find("#raw-url");
var cdn = raw.clone();
cdn.attr("id", "cdn-url");
cdn.attr("href", "https://cdn.rawgit.com" + cdn.attr("href").replace("/raw/","/") );
cdn.text("CDN");
cdn.insertBefore(raw);
James McGuigan
quelle
Ausführung des Skripts 'cdn.rawgit.com' fehlgeschlagen! $ ist keine Funktion
Xiaoyu2er
4

Sie können dies durch leicht tun Ändern von Antwortheader , die mit Chrome und Firefox - Erweiterung wie getan werden kann Requestly .

In Chrome und Firefox:

  1. Installieren Sie Requestly for Chrome und Requestly for Firefox

  2. Fügen Sie die folgenden Änderungsregeln für Header hinzu :

    Geben Sie hier die Bildbeschreibung ein

    a) Inhaltstyp :

    • Ändern
    • Antwort
    • Header: Content-Type
    • Wert: text/html
    • Quell-URL-Übereinstimmungen: /raw\.githubusercontent\.com/.*\.html/


    b) Inhaltssicherheitsrichtlinie :

    • Ändern
    • Antwort
    • Header: Content-Security-Policy
    • Wert: default-src 'none'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; script-src * 'unsafe-eval';
    • Quell-URL-Übereinstimmungen: /raw\.githubusercontent\.com/.*\.html/
ostrokach
quelle
Nur zur Information können Sie Ihre Regeln auch als öffentliche URLs freigeben. In diesem Fall können Sie diese Regel einfach erstellen und für andere Benutzer freigeben. Andere Benutzer können es direkt importieren und verwenden. Überprüfen Sie dies heraus: requestly.in/documentation/introducing-shared-list
sachinjain024
Mein Kommentar oben kann nicht bearbeitet werden. Fügen
Sie
3

Ich wollte HTML und JS in Github bearbeiten und eine Vorschau haben. Ich wollte es in Github tun, um sofortige Commits und Save zu haben.

habe rawgithub.com ausprobiert, aber rawgithub.com war nicht in Echtzeit (der Cache wird einmal pro Minute aktualisiert).

Also entwickelte ich schnell meine eigene Lösung:

Die Lösung von node.js hierfür: https://github.com/shimondoodkin/rawgithub

Shimon Doodkin
quelle
2

raw.github.com/user/repository ist nicht mehr vorhanden

Um einen Link zum Quellcode in Github zu erstellen, müssen Sie den Github-Link zur Rohquelle folgendermaßen verwenden:

raw.githubusercontent.com/user/repository/master/file.extension

BEISPIEL

<html>
...
...
<head>    
<script src="https://raw.githubusercontent.com/amiahmadtouseef/tutorialhtmlfive/master/petdecider/script.js"></script>
...
</head>
<body>
...
</html>
Ami Ahmad Touseef
quelle
2

Wenn Sie ein Winkel- oder Reaktionsprojekt in Github haben, können Sie die Anwendung unter https://stackblitz.com/ online in Ihrem Browser ausführen.

Geben Sie Ihren Github-Benutzernamen und den Namen des Repositorys ein, um die Anwendung online anzuzeigen - stackblitz.com/github/{GITHUB_USERNAME}/{REPO_NAME}

Dies funktioniert auch ohne Node_Modules, die auf Github hochgeladen wurden

Unterstützen Sie derzeit Projekte mit @ angle / cli und create-react-app. Unterstützung für Ionic-, Vue- und benutzerdefinierte Webpack-Konfigurationen ist in Kürze verfügbar!

Sujithuix
quelle
1

Diese Lösung nur für Chrome-Browser. Ich bin mir bei anderen Browsern nicht sicher.

  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 / Klartext
    • Ersatztyp: Text / HTML
  4. Öffnen Sie den Dateibrowser, zu dem Sie in der Regel eine URL hinzugefügt haben (in Schritt 3).
Vijay
quelle