Puis-je exécuter des fichiers HTML directement à partir de GitHub, au lieu de simplement afficher leur source?

300

Si j'ai un .htmlfichier dans un référentiel GitHub, par exemple pour exécuter un ensemble de tests JavaScript, existe-t-il un moyen de visualiser cette page directement, exécutant ainsi les tests?

Par exemple, pourrais-je en fait voir les résultats des tests qui seraient produits par la suite de tests jQuery , sans télécharger ou cloner le dépôt sur mon disque local et les y exécuter?

Je sais que cela placerait essentiellement GitHub dans le domaine de l'hébergement de contenu statique, mais là encore, ils n'ont qu'à changer leur type de mime de text/plainà text/html.

javascript html github Domenic
la source
2
Hmm ... un script GreaseMonkey peut-il changer les en-têtes?
Alex Howansky
1
Pouvez-vous mettre à jour la réponse acceptée sur celle-ci? Il y a maintenant un moyen de le faire - voir la réponse de @ niutech ...
Alex Dean
1
doublon possible de Link et exécution d'un fichier JavaScript externe hébergé sur GitHub
Troy Alford
Copie possible de Comment voir une page html sur github comme une page html rendue normale pour voir l'aperçu dans le navigateur, sans téléchargement?
Michael Freidgeim

Réponses:

366

Vous voudrez peut-être utiliser raw.githack.com . Il prend en charge GitHub, Bitbucket, Gitlab et GitHub gists.

GitHub

Avant:

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

Dans votre .htmlextension de cas

Après:

Développement (étranglé)

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

Production (CDN)

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

Dans votre .htmlextension de cas

raw.githack.com prend également en charge d'autres services:

Bitbucket

Avant:

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

Après:

Développement (étranglé)

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

Production (CDN)

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

GitLab

Avant:

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

Après:

Développement (étranglé)

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

Production (CDN)

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

GitHub gists

Avant:

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

Après:

Développement (étranglé)

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

Production (CDN)

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

Mise à jour: rawgit a été interrompu

chmanie
la source
Oui, merci d'avoir ajouté ceci, puisque j'ai posé cette question il y a longtemps, je suis passé à ce service. Faisons de vous la réponse acceptée :).
Domenic
13
Juste un FYI: Cela ne semble pas du tout fonctionner pour les dépôts privés, pour des raisons évidentes.
rfay
Il ne semble pas charger le javascript.
PyRulez
1
Pour une raison quelconque, je n'obtiens pas de type de contenu texte / html sur mes pages HTML, donc il montre juste la source :(
benji
1
Après la modification, cette réponse est complètement fausse. jsDelivr ne vous permet pas d'exécuter directement un fichier HTML. Il ne montre que le texte en clair des fichiers HTML. Il est uniquement destiné aux fichiers js ou css. Pour ceux d'entre vous qui cherchent une réponse, utilisez raw.githack.com , car c'est un clone de rawgit.
Spencer Wieczorek
194

Il existe un nouvel outil appelé GitHub HTML Preview , qui fait exactement ce que vous voulez. Ajoutez simplement http://htmlpreview.github.com/?l'URL de n'importe quel fichier HTML, par exemple http://htmlpreview.github.com/?https://github.com/twbs/bootstrap/blob/gh-pages/2.3.2/index.html

Remarque: Cet outil est en fait une page github.io et n'est pas affilié à github en tant qu'entreprise.

niutech
la source
2
Merci exactement ce que j'espérais trouver.
nana
2
Est-ce également possible sur les dépôts privés?
Björn Andersson
Ne fonctionne pas avec les cadres (Javadoc): htmlpreview.github.com/?https://github.com/MartinThoma/… :-(
Martin Thoma
Cela ne fonctionne pas avec les images relatives chargées via javascript sur Chrome. Cross-origin image load denied by Cross-Origin Resource Sharing policy.
ubershmekel
3
Il charge correctement les chemins relatifs permettant la liaison à JS / CSS à l'intérieur du référentiel github. C'est fantastique.
Nathan Lilienthal
18

Pour vous baser sur la réponse de @ niutech, vous pouvez créer un extrait de signet très simple.
Utilisation de Chrome, bien qu'il fonctionne de manière similaire avec d'autres navigateurs

  1. Faites un clic droit sur votre barre de favoris
  2. Cliquez sur Ajouter un fichier
  3. Nommez-le quelque chose comme Github HTML
  4. Pour le type d' URLjavascript:top.location="http://htmlpreview.github.com/?"+document.URL
  5. Lorsque vous êtes sur une page d'affichage de fichier github ( pas raw.github.com ), cliquez sur le lien du signet et vous êtes en or.
mraaroncruz
la source
7

Vous pouvez soit brancher des pages gh pour exécuter votre code, soit essayer cette extension (Chrome, Firefox): https://github.com/ryt/githtml

Si vous avez besoin de tests, vous pouvez intégrer vos fichiers JS dans: http://jsperf.com/

Gianluca Esposito
la source
6

J'ai eu le même problème pour mon projet Ratio.js et voici ce que j'ai fait.

Problème: Github.com empêche les fichiers de s'afficher / s'exécuter lorsque la source est affichée en définissant le type de contenu / MIME en texte brut.

Solution: demandez à une page Web d'importer les fichiers.

Exemple:

Utilisez jsfiddle.net ou jsbin.com pour créer une page Web en ligne, puis enregistrez-la. Accédez à votre fichier sur Github.com et cliquez sur le bouton «brut» pour obtenir le lien direct vers le fichier. À partir de là, importez le fichier à l'aide de la balise et de l'attribut appropriés.

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

Démo en direct: http://jsfiddle.net/jKu4q/2/

Remarque: Remarque pour jsfiddle.net, vous pouvez accéder directement à la page de résultats en ajoutant showà la fin de l'URL. Comme ça: http://jsfiddle.net/jKu4q/2/show

Ou .... vous pouvez créer une page de projet et rendre vos fichiers HTML à partir de là. Vous pouvez créer une page de projet sur http://pages.github.com/ .

Une fois créé, vous pouvez ensuite accéder au lien via http://*accountName*.github.com/*projectName*/ Exemple: http://larrybattle.github.com/Ratio.js/

Larry Battle
la source
1
Belle idée d'utiliser js fiddle pour laisser le navigateur charger les fichiers depuis github mais pourquoi ne pas utiliser les "Add Resources" de JSFiddle?
Filippo Vitale
@Filippo Excellente idée! Je vais essayer ça la prochaine fois.
Larry Battle
4

Voici un petit script Greasemonkey qui ajoutera un bouton CDN aux pages html sur github

La page cible sera de la forme: 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
la source
Échec de l'exécution du script 'cdn.rawgit.com'! $ n'est pas une fonction
xiaoyu2er
4

Vous pouvez le faire facilement en modifiant les en-têtes de réponse, ce qui peut être fait avec l'extension Chrome et Firefox comme Requestly .

Dans Chrome et Firefox:

  1. Installer Requestly pour Chrome et Requestly pour Firefox

  2. Ajoutez les règles de modification des en-têtes suivantes :

    entrez la description de l'image ici

    a) Type de contenu :

    • Modifier
    • Réponse
    • Entête: Content-Type
    • Valeur: text/html
    • Correspondances d'URL source: /raw\.githubusercontent\.com/.*\.html/


    b) Politique de sécurité du contenu :

    • Modifier
    • Réponse
    • Entête: Content-Security-Policy
    • Valeur: default-src 'none'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; script-src * 'unsafe-eval';
    • Correspondances d'URL source: /raw\.githubusercontent\.com/.*\.html/
ostrokach
la source
Juste pour information, vous pouvez également partager vos règles en tant qu'URL publiques. Dans ce cas, vous pouvez simplement créer cette règle et la partager avec d'autres utilisateurs. D'autres utilisateurs demandeurs peuvent directement l'importer et commencer à l'utiliser. Vérifiez ceci: requestly.in/documentation/introducing-shared-list
sachinjain024
Impossible de modifier mon commentaire ci-dessus, donc en ajouter un autre pour publier un nouveau lien de documentation: requestly.in/content/documentation/introducing-shared-list
sachinjain024
3

je voulais éditer html et js dans github et avoir un aperçu. je voulais le faire dans github pour avoir des commits et des sauvegardes instantanés.

essayé rawgithub.com mais rawgithub.com n'était pas en temps réel (c'est le cache actualisé une fois par minute).

j'ai donc rapidement développé ma propre solution:

Solution node.js pour cela: https://github.com/shimondoodkin/rawgithub

Shimon Doodkin
la source
2

raw.github.com/user/repository n'est plus là

Pour lier, href au code source dans github, vous devez utiliser le lien github vers la source brute de cette façon:

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

EXEMPLE

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

Si vous avez un projet angulaire ou réactif dans github, vous pouvez utiliser https://stackblitz.com/ pour exécuter l'application en ligne dans votre navigateur.

Saisissez votre nom d'utilisateur Github et le nom du référentiel pour afficher l'application en ligne - stackblitz.com/github/{GITHUB_USERNAME}/{REPO_NAME}

Cela fonctionne même sans Node_Modules téléchargé sur Github

Soutenez actuellement les projets utilisant @ angular / cli et create-react-app. La prise en charge des configurations Ionic, Vue et Webpack personnalisées arrive bientôt!

sujithuix
la source
1

Cette solution uniquement pour le navigateur Chrome. Je ne suis pas sûr d'un autre navigateur.

  1. Ajoutez l'extension "Modifier les options de type de contenu" dans le navigateur Chrome.
  2. Ouvrez l'URL "chrome-extension: //jnfofbopfpaoeojgieggflbpcblhfhka/options.html" dans le navigateur.
  3. Ajoutez la règle pour l'url de fichier brut. Par exemple:
    • Filtre URL: https: ///raw/master//fileName.html
    • Type d'origine: texte / uni
    • Type de remplacement: text / html
  4. Ouvrez le navigateur de fichiers auquel vous avez ajouté l'URL dans la règle (à l'étape 3).
Vijay
la source