Czy mogę uruchamiać pliki HTML bezpośrednio z GitHub, zamiast po prostu przeglądać ich źródło?

300

Jeśli mam .htmlplik w repozytorium GitHub, np. Do uruchomienia zestawu testów JavaScript, czy jest jakiś sposób, aby bezpośrednio wyświetlić tę stronę - a więc uruchomić testy?

Na przykład, czy mogę w jakiś sposób zobaczyć wyniki testów, które zostałyby wygenerowane przez pakiet testowy jQuery , bez pobierania lub klonowania repozytorium na mój dysk lokalny i uruchamiania go tam?

Wiem, że w zasadzie umieściłoby to GitHub w branży hostingu treści statycznych, ale z drugiej strony po prostu musieli zmienić typ mime z text/plainna text/html.

javascript html github Domenic
źródło
2
Hmm ... czy skrypt GreaseMonkey może zmienić nagłówki?
Alex Howansky
1
Czy możesz zaktualizować zaakceptowaną odpowiedź na to pytanie? Jest teraz sposób, aby to zrobić - patrz odpowiedź @ niutech ...
Alex Dean
1
możliwy duplikat linku i wykonanie zewnętrznego pliku JavaScript hostowanego na GitHub
Troy Alford
Możliwy duplikat Jak wyświetlić stronę HTML na github jako normalną renderowaną stronę HTML, aby zobaczyć podgląd w przeglądarce, bez pobierania?
Michael Freidgeim

Odpowiedzi:

366

Możesz skorzystać z raw.githack.com . Obsługuje GistHub, Bitbucket, Gitlab i GitHub.

GitHub

Przed:

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

W twoim przypadku .htmlrozszerzenie

Po:

Rozwój (zdławiony)

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

Produkcja (CDN)

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

W twoim przypadku .htmlrozszerzenie

raw.githack.com obsługuje również inne usługi:

Bitbucket

Przed:

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

Po:

Rozwój (zdławiony)

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

Produkcja (CDN)

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

GitLab

Przed:

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

Po:

Rozwój (zdławiony)

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

Produkcja (CDN)

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

GistHub gists

Przed:

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

Po:

Rozwój (zdławiony)

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

Produkcja (CDN)

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

Aktualizacja: rawgit zostało przerwane

chmanie
źródło
Tak, dziękuję za dodanie tego, ponieważ dawno temu zadałem to pytanie. Sprawmy, byś zaakceptował odpowiedź :).
Domenic
13
Po prostu FYI: Z oczywistych względów nie działa to w przypadku prywatnych transakcji repo.
rfay
Wydaje się, że nie ładuje javascript.
PyRulez
1
Z jakiegoś powodu nie widzę typu zawartości text / html na moich stronach HTML, więc po prostu pokazuje źródło :(
benji
1
Po edycji ta odpowiedź jest całkowicie błędna. jsDelivr nie pozwala na bezpośrednie uruchomienie pliku HTML. Pokazuje tylko zwykły tekst plików HTML. Jest przeznaczony tylko do plików js lub css. Dla tych, którzy szukają odpowiedzi, skorzystaj z raw.githack.com , ponieważ jest to klon rawgit.
Spencer Wieczorek
194

Istnieje nowe narzędzie o nazwie GitHub HTML Preview , które robi dokładnie to, co chcesz. Po prostu dołącz http://htmlpreview.github.com/?do adresu URL dowolnego pliku HTML, np. Http://htmlpreview.github.com/?https://github.com/twbs/bootstrap/blob/gh-pages/2.3.2/index.html

Uwaga: To narzędzie jest w rzeczywistości stroną github.io i nie jest powiązane z github jako firmą.

niutech
źródło
2
Dziękuję dokładnie, co chciałem znaleźć.
nana,
2
Czy jest to również możliwe w przypadku prywatnych transakcji repo?
Björn Andersson
Nie działa z ramkami (Javadoc): htmlpreview.github.com/?https://github.com/MartinThoma/… :-(
Martin Thoma,
Nie działa z względnymi obrazami ładowanymi przez javascript na Chrome. Cross-origin image load denied by Cross-Origin Resource Sharing policy.
ubershmekel
3
Ładuje odpowiednio ścieżki względne, pozwalając na linkowanie do JS / CSS w repozytorium github. To jest fantastyczne.
Nathan Lilienthal
18

Aby skorzystać z odpowiedzi w odpowiedzi na @ niutech, możesz zrobić bardzo prosty fragment zakładki.
Używam Chrome, chociaż działa podobnie z innymi przeglądarkami

  1. Kliknij pasek zakładek prawym przyciskiem myszy
  2. Kliknij Dodaj plik
  3. Nazwij to coś jak Github HTML
  4. Dla typu adresu URLjavascript:top.location="http://htmlpreview.github.com/?"+document.URL
  5. Gdy jesteś na stronie widoku pliku github ( nie raw.github.com ), kliknij link zakładki i jesteś złoty.
mraaroncruz
źródło
7

Możesz rozgałęzić strony gh, aby uruchomić kod lub wypróbować to rozszerzenie (Chrome, Firefox): https://github.com/ryt/githtml

Jeśli potrzebujesz testów, możesz osadzić swoje pliki JS w: http://jsperf.com/

Gianluca Esposito
źródło
6

Miałem ten sam problem z moim projektem Ratio.js i oto co zrobiłem.

Problem: Github.com uniemożliwia renderowanie / wykonywanie plików podczas przeglądania źródła, ustawiając typ zawartości / MIME na zwykły tekst.

Rozwiązanie: Zaimportuj pliki do strony internetowej.

Przykład:

Użyj strony jsfiddle.net lub jsbin.com, aby utworzyć stronę internetową online, a następnie ją zapisz. Przejdź do pliku w Github.com i kliknij przycisk „raw”, aby uzyskać bezpośredni link do pliku. Stamtąd zaimportuj plik, używając odpowiedniego znacznika i atrybutu.

<!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>

Prezentacja na żywo: http://jsfiddle.net/jKu4q/2/

Uwaga: Uwaga dla jsfiddle.net można uzyskać bezpośredni dostęp do strony wyników, dodając showna końcu adresu URL. Podobnie jak: http://jsfiddle.net/jKu4q/2/show

Lub .... możesz utworzyć stronę projektu i stamtąd renderować pliki HTML. Możesz stworzyć stronę projektu na http://pages.github.com/ .

Po utworzeniu możesz uzyskać dostęp do linku za pomocą http://*accountName*.github.com/*projectName*/ Przykład: http://larrybattle.github.com/Ratio.js/

Larry Battle
źródło
1
Fajny pomysł, używając js fiddle, aby umożliwić przeglądarce ładowanie plików z github, ale dlaczego nie skorzystać z „Dodaj zasoby” JSFiddle?
Filippo Vitale
@Filippo Świetny pomysł! Spróbuję następnym razem.
Larry Battle
4

Oto mały skrypt Greasemonkey, który doda przycisk CDN do stron HTML na githubie

Strona docelowa będzie miała postać: 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
źródło
Wykonanie skryptu „cdn.rawgit.com” nie powiodło się! $ nie jest funkcją
xiaoyu2er
4

Możesz to zrobić łatwo, modyfikując nagłówki odpowiedzi, co można zrobić za pomocą rozszerzenia Chrome i Firefox, np . Requestly .

W Chrome i Firefox:

  1. Zainstaluj Requestly dla Chrome i Requestly dla Firefox

  2. Dodaj następujące reguły modyfikacji nagłówków :

    wprowadź opis zdjęcia tutaj

    a) Typ zawartości :

    • Modyfikować
    • Odpowiedź
    • Nagłówek: Content-Type
    • Wartość: text/html
    • Dopasowane adresy URL źródła: /raw\.githubusercontent\.com/.*\.html/


    b) Polityka bezpieczeństwa treści :

    • Modyfikować
    • Odpowiedź
    • Nagłówek: Content-Security-Policy
    • Wartość: default-src 'none'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; script-src * 'unsafe-eval';
    • Dopasowane adresy URL źródła: /raw\.githubusercontent\.com/.*\.html/
ostrokach
źródło
Aby uzyskać informacje, możesz również udostępnić swoje reguły jako publiczne adresy URL. W takim przypadku możesz po prostu utworzyć tę regułę i udostępnić ją innym użytkownikom. Inni użytkownicy mogą importować go bezpośrednio i zacząć z niego korzystać. Sprawdź to: requestly.in/documentation/introducing-shared-list
sachinjain024
Nie można edytować mój komentarz powyżej, więc dodając jeszcze jeden nowy link do opublikowania dokumentacji: requestly.in/content/documentation/introducing-shared-list
sachinjain024
3

Chciałem edytować HTML i JS w github i mieć podgląd. chciałem to zrobić w github, aby mieć natychmiastowe zatwierdzenia i zapisy.

próbowałem rawgithub.com, ale rawgithub.com nie było w czasie rzeczywistym (pamięć podręczna odświeża się raz na minutę).

więc szybko opracowałem własne rozwiązanie:

rozwiązanie node.js: https://github.com/shimondoodkin/rawgithub

Shimon Doodkin
źródło
2

raw.github.com/user/repository już nie ma

Aby połączyć, powróć do kodu źródłowego w github, musisz użyć łącza github do surowego źródła w ten sposób:

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

PRZYKŁAD

<html>
...
...
<head>    
<script src="https://raw.githubusercontent.com/amiahmadtouseef/tutorialhtmlfive/master/petdecider/script.js"></script>
...
</head>
<body>
...
</html>
Ami Ahmad Touseef
źródło
2

Jeśli masz projekt kątowy lub reagujesz w github, możesz użyć https://stackblitz.com/, aby uruchomić aplikację online w przeglądarce.

Wprowadź swoją nazwę użytkownika i nazwę repozytorium Github, aby wyświetlić aplikację online - stackblitz.com/github/{GITHUB_USERNAME}/{REPO_NAME}

Działa to nawet bez przesłania Node_Modules do Github

Obecnie obsługuje projekty przy użyciu @ angular / cli i tworzy-reaguje-aplikację. Wsparcie dla Ionic, Vue i niestandardowych konfiguracji pakietu internetowego już wkrótce!

sujithuix
źródło
1

To rozwiązanie tylko dla przeglądarki Chrome. Nie jestem pewien co do innej przeglądarki.

  1. Dodaj rozszerzenie „Modify Content-Type Options” w przeglądarce Chrome.
  2. Otwórz „chrome-extension: //jnfofbopfpaoeojgieggflbpcblhfhka/options.html” w przeglądarce.
  3. Dodaj regułę dla surowego adresu URL pliku. Na przykład:
    • Filtr adresów URL: https: ///raw/master//fileName.html
    • Typ oryginału: tekstowy / zwykły
    • Typ wymiany: text / html
  4. Otwórz przeglądarkę plików, do której reguła dodałeś adres URL (w kroku 3).
Vijay
źródło