Posso eseguire i file HTML direttamente da GitHub, invece di visualizzarne solo l'origine?

300

Se ho un .htmlfile in un repository GitHub, ad esempio per eseguire una serie di test JavaScript, esiste un modo per visualizzare direttamente quella pagina, quindi eseguire i test?

Ad esempio, potrei in qualche modo vedere effettivamente i risultati dei test che sarebbero prodotti dalla suite di test jQuery , senza scaricare o clonare il repository sul mio disco locale ed eseguirli lì?

So che questo fondamentalmente metterebbe GitHub nel business dell'hosting di contenuti statici, ma poi, devono solo cambiare il loro tipo mime da text/plaina text/html.

javascript html github

— Domenic
fonte

2

Hmm ... uno script GreaseMonkey può cambiare le intestazioni?

— Alex Howansky,

1

Puoi aggiornare la risposta accettata su questa? Ora c'è un modo per farlo - vedi la risposta di @ niutech ...

— Alex Dean,

1

possibile duplicato di Link ed eseguire file JavaScript esterni ospitati su GitHub

— Troy Alford

Possibile duplicato di Come visualizzare una pagina html su github come una normale pagina html renderizzata per vedere l'anteprima nel browser, senza scaricare?

— Michael Freidgeim,

366

Potresti voler utilizzare raw.githack.com . Supporta GitHub, Bitbucket, Gitlab e GitHub.

GitHub

Prima:

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

Nel tuo caso .htmlestensione

Dopo:

Sviluppo (strozzato)

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

Produzione (CDN)

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

Nel tuo caso .htmlestensione

raw.githack.com supporta anche altri servizi:

bitbucket

Prima:

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

Dopo:

Sviluppo (strozzato)

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

Produzione (CDN)

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

GitLab

Prima:

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

Dopo:

Sviluppo (strozzato)

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

Produzione (CDN)

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

GitHub gists

Prima:

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

Dopo:

Sviluppo (strozzato)

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

Produzione (CDN)

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

Aggiornamento: rawgit è stato sospeso

— chmanie
fonte

Sì, grazie per averlo aggiunto, da quando ho posto questa domanda molto tempo fa sono passato a questo servizio. Ti facciamo la risposta accettata :).

— Domenic,

13

Solo un FYI: questo non sembra funzionare affatto per i repository privati, per ovvie ragioni.

— rfay,

Non sembra caricare il javascript.

— PyRulez,

1

Per qualche motivo non sto ottenendo un tipo di contenuto text / html sulle mie pagine HTML, quindi mostra solo la fonte :(

— benji,

1

Dopo la modifica questa risposta è completamente sbagliata. jsDelivr non ti consente di eseguire direttamente un file HTML. Mostra solo il testo in chiaro dei file HTML. È inteso solo per file js o css. Per quelli di voi che cercano una risposta, utilizzate raw.githack.com , poiché è un clone di rawgit.

— Spencer Wieczorek,

194

Esiste un nuovo strumento chiamato Anteprima HTML GitHub , che fa esattamente quello che vuoi. Basta anteporre http://htmlpreview.github.com/?all'URL di qualsiasi file HTML, ad esempio http://htmlpreview.github.com/?https://github.com/twbs/bootstrap/blob/gh-pages/2.3.2/index.html

Nota: questo strumento è in realtà una pagina github.io e non è affiliato a github come azienda.

— niutech
fonte

2

Grazie è esattamente quello che speravo di trovare.

— nana,

2

È possibile anche su repository privati?

— Björn Andersson,

Non funziona con i frame (Javadoc): htmlpreview.github.com/?https://github.com/MartinThoma/… :-(

— Martin Thoma

Non funziona con le immagini relative caricate tramite JavaScript su Chrome. Cross-origin image load denied by Cross-Origin Resource Sharing policy.

— ubershmekel,

3

Carica correttamente i percorsi relativi consentendo il collegamento a JS / CSS all'interno del repository github. È fantastico.

— Nathan Lilienthal,

18

Per dare una occhiata alla risposta di @ niutech, puoi creare uno snippet di segnalibri molto semplice.
Utilizzando Chrome, sebbene funzioni in modo simile con altri browser

Fare clic con il tasto destro del mouse sulla barra dei segnalibri
Fai clic su Aggiungi file
Denominalo come Github HTML
Per il tipo di URLjavascript:top.location="http://htmlpreview.github.com/?"+document.URL
Quando sei su una pagina di visualizzazione dei file github ( non raw.github.com ) fai clic sul link del segnalibro e sei d'oro.

— mraaroncruz
fonte

7

Puoi eseguire il branch delle pagine gh per eseguire il tuo codice o provare questa estensione (Chrome, Firefox): https://github.com/ryt/githtml

Se ciò di cui hai bisogno sono i test, puoi incorporare i tuoi file JS in: http://jsperf.com/

— Gianluca Esposito
fonte

6

Ho avuto lo stesso problema per il mio progetto Ratio.js ed ecco cosa ho fatto.

Problema: Github.com impedisce il rendering / l'esecuzione dei file quando l'origine viene visualizzata impostando il tipo di contenuto / MIME su testo normale.

Soluzione: fare in modo che una pagina Web importi i file.

Esempio:

Utilizzare jsfiddle.net o jsbin.com per creare una pagina Web online, quindi salvarla. Passare al file in Github.com e fare clic sul pulsante 'raw' per ottenere il collegamento diretto al file. Da lì, importare il file utilizzando il tag e l'attributo appropriati.

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

Demo live: http://jsfiddle.net/jKu4q/2/

Nota: Nota per jsfiddle.net è possibile ottenere l'accesso diretto alla pagina dei risultati aggiungendo showalla fine dell'URL. In questo modo: http://jsfiddle.net/jKu4q/2/show

Oppure .... potresti creare una pagina di progetto e renderizzare i tuoi file HTML da lì. È possibile creare una pagina di progetto su http://pages.github.com/ .

Una volta creato, è possibile accedere al collegamento tramite http://*accountName*.github.com/*projectName*/ Esempio: http://larrybattle.github.com/Ratio.js/

— Larry Battle
fonte

1

Bella idea usare js fiddle per consentire al browser di caricare i file da Github, ma perché non utilizzare "Aggiungi risorse" di JSFiddle?

— Filippo Vitale,

@Filippo Ottima idea! Ci proverò la prossima volta.

— Larry Battle,

4

Ecco un piccolo script di Greasemonkey che aggiungerà un pulsante CDN alle pagine html su github

La pagina di destinazione sarà nel formato: 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
fonte

L'esecuzione dello script 'cdn.rawgit.com' non è riuscita! $ non è una funzione

— xiaoyu2er

4

Puoi farlo facilmente modificando le intestazioni di risposta che possono essere eseguite con l'estensione di Chrome e Firefox come Requestly .

In Chrome e Firefox:

Installa Requestly per Chrome e Requestly per Firefox
Aggiungi le seguenti regole di modifica delle intestazioni :

a) Tipo di contenuto :
- Modificare
- Risposta
- Intestazione: Content-Type
- Valore: text/html
- Corrispondenze URL di origine: /raw\.githubusercontent\.com/.*\.html/
b) Politica sulla sicurezza dei contenuti :
- Modificare
- Risposta
- Intestazione: Content-Security-Policy
- Valore: default-src 'none'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; script-src * 'unsafe-eval';
- Corrispondenze URL di origine: /raw\.githubusercontent\.com/.*\.html/

— ostrokach
fonte

Solo per informazione puoi anche condividere le tue regole come URL pubblici. In questo caso puoi semplicemente creare questa regola e condividerla con altri utenti. Altri utenti su richiesta possono importarlo direttamente e iniziare a usarlo. Check this out: requestly.in/documentation/introducing-shared-list

— sachinjain024

Impossibile modificare il mio commento di cui sopra, in modo da aggiungere un altro per la pubblicazione di nuovo link di documentazione: requestly.in/content/documentation/introducing-shared-list

— sachinjain024

3

volevo modificare html e js in github e avere un'anteprima. volevo farlo in github per avere commit e salvataggi istantanei.

provato rawgithub.com ma rawgithub.com non era in tempo reale (la cache si aggiorna una volta al minuto).

così ho sviluppato rapidamente la mia soluzione:

soluzione node.js per questo: https://github.com/shimondoodkin/rawgithub

— Shimon Doodkin
fonte

2

raw.github.com/user/repository non è più lì

Per collegare, tramite il codice sorgente in github, è necessario utilizzare il collegamento github per il codice sorgente in questo modo:

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

ESEMPIO

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

— Ami Ahmad Touseef
fonte

2

Se hai un progetto angolare o di reazione in github, puoi usare https://stackblitz.com/ per eseguire l'applicazione online nel tuo browser.

Inserisci il tuo nome utente Github e il nome del repository per visualizzare l'applicazione online - stackblitz.com/github/{GITHUB_USERNAME}/{REPO_NAME}

Funziona anche senza Node_Modules caricati su Github

Attualmente supporta i progetti utilizzando @ angular / cli e create -eagire-app. Il supporto per Ionic, Vue e le configurazioni personalizzate del webpack è in arrivo!

— sujithuix
fonte

1

Questa soluzione è solo per browser Chrome. Non sono sicuro di altri browser.

Aggiungi l'estensione "Modifica opzioni tipo di contenuto" nel browser Chrome.
Apri l'URL "chrome-extension: //jnfofbopfpaoeojgieggflbpcblhfhka/options.html" nel browser.
Aggiungi la regola per l'URL del file non elaborato. Per esempio:
- Filtro URL: https: ///raw/master//fileName.html
- Tipo originale: testo / semplice
- Tipo di sostituzione: testo / html
Apri il browser dei file che hai aggiunto l'URL nella regola (nel passaggio 3).

— Vijay
fonte