web-dev-qa-db-fra.com

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

Si j’ai un fichier _.html_ dans un référentiel GitHub, par exemple, pour exécuter un ensemble de tests JavaScript, est-il possible de visualiser cette page directement - pour exécuter les tests?

Par exemple, pourrais-je voir les résultats des tests qui seraient produits par la suite de tests jQuery , sans télécharger ni cloner le rapport sur mon lecteur local et les exécuter là-bas?

Je sais que cela placerait GitHub dans le secteur de l'hébergement de contenu statique, mais encore faut-il changer leur type de mime de text/plain à _text/html_.

javascripthtmlgithub
291
Domenic

Vous voudrez peut-être utiliser raw.githack.com . Il supporte les gistes GitHub, Bitbucket, Gitlab et GitHub.

GitHub

Avant:

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

Dans votre cas, .html extension

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 cas, .html extension

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]

Gistes GitHub

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

350
chmanie

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 tout 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 de github.io et n’est pas affilié à github en tant qu’entreprise.

192
niutech

Pour reprendre la réponse de @ niutech, vous pouvez créer un extrait de signet très simple.
Utilisation de Chrome, même si cela fonctionne de manière similaire avec d'autres navigateurs

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

Vous pouvez soit créer une branche gh-pages 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/

7
Gianluca Esposito

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 le rendu/l’exécution des fichiers lorsque la source est visualisé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 si: http://jsfiddle.net/jKu4q/2/show

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

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

6
Larry Battle

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

La page cible sera sous 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);
4
James McGuigan

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

Dans Chrome et Firefox:

  1. Installer Requestly pour Chrome et Requestly pour Firefox

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

    enter image description here

    a) Type de contenu :

    • Modifier
    • Réponse
    • En-tête: Content-Type
    • Valeur: text/html
    • Url source Correspondances: /raw\.githubusercontent\.com/.*\.html/


    b) politique de sécurité du contenu :

    • Modifier
    • Réponse
    • En-tête: Content-Security-Policy
    • Valeur: default-src 'none'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; script-src * 'unsafe-eval';
    • Url source Correspondances: /raw\.githubusercontent\.com/.*\.html/
3
ostrokach

je voulais éditer HTML et JS en github et avoir un aperçu. Je voulais le faire dans github pour avoir des commits et des sauvegardes instantanés.

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

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

la solution node.js pour ceci: https://github.com/shimondoodkin/rawgithub

3
Shimon Doodkin

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>
2
Ami Ahmad Touseef

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

Entrez votre nom d'utilisateur Github et votre nom de référentiel pour afficher l'application en ligne - stackblitz.com/github/{GITHUB_USERNAMEBuch/{REPO_NAME}

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

Soutient actuellement des projets utilisant @ angular/cli et create-react-app. La prise en charge des configurations de packs Web personnalisées, ioniques et personnalisées arrive bientôt!

1
sujithuix

Cette solution concerne uniquement le navigateur chrome. Je ne suis pas sûr de l'autre navigateur.

  1. Ajoutez l'extension "Modify Content-Type Options" dans le navigateur chrome.
  2. Ouvrez l'URL "chrome-extension: //jnfofbopfpaoeojgieggflbpcblhfhka/options.html" dans le navigateur.
  3. Ajoutez la règle pour l'URL du fichier brut. Par exemple:
    • Filtre d'URL: https: ///raw/master//fileName.html
    • Type d'origine: text/plain
    • Type de remplacement: text/html
  4. Ouvrez le navigateur de fichiers auquel vous avez ajouté l'URL dans la règle (à l'étape 3).
1
Vijay