¿Puedo ejecutar archivos HTML directamente desde GitHub, en lugar de solo ver su fuente?

300

Si tengo un .htmlarchivo en un repositorio de GitHub, por ejemplo, para ejecutar un conjunto de pruebas de JavaScript, ¿hay alguna forma de que pueda ver esa página directamente, y así ejecutar las pruebas?

Por ejemplo, ¿podría de alguna manera ver los resultados de la prueba que produciría el conjunto de pruebas jQuery , sin descargar o clonar el repositorio en mi unidad local y ejecutarlos allí?

Sé que esto básicamente pondría a GitHub en el negocio de alojamiento de contenido estático, pero, de nuevo, solo tienen que cambiar su tipo mime de text/plaina text/html.

javascript html github Domenic
fuente
2
Hmm ... ¿puede un script de GreaseMonkey cambiar los encabezados?
Alex Howansky 01 de
1
¿Puedes actualizar la respuesta aceptada en este caso? Ahora hay una manera de hacerlo: vea la respuesta de @ niutech ...
Alex Dean
1
posible duplicado de Link y ejecutar archivo JavaScript externo alojado en GitHub
Troy Alford
Posible duplicado de ¿Cómo ver una página html en github como una página html renderizada normal para ver una vista previa en el navegador, sin descargar?
Michael Freidgeim

Respuestas:

366

Es posible que desee utilizar raw.githack.com . Es compatible con GitHub, Bitbucket, Gitlab y GitHub.

GitHub

Antes de:

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

En su caso .htmlextensión

Después:

Desarrollo (estrangulado)

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

Producción (CDN)

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

En su caso .htmlextensión

raw.githack.com también es compatible con otros servicios:

Bitbucket

Antes de:

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

Después:

Desarrollo (estrangulado)

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

Producción (CDN)

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

GitLab

Antes de:

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

Después:

Desarrollo (estrangulado)

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

Producción (CDN)

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

Lo esencial de GitHub

Antes de:

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

Después:

Desarrollo (estrangulado)

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

Producción (CDN)

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

Actualización: rawgit fue descontinuado

chmanie
fuente
Sí, gracias por agregar esto, ya que hace esta pregunta hace mucho tiempo me cambié a este servicio. Vamos a hacerte la respuesta aceptada :).
Domenic
13
Solo un FYI: Esto no parece funcionar para repositorios privados, por razones obvias.
rfay
No parece cargar el javascript.
PyRulez
1
Por alguna razón, no obtengo un tipo de contenido de texto / html en mis páginas HTML, así que solo muestra la fuente :(
benji
1
Después de editar, esta respuesta es completamente incorrecta. jsDelivr no le permite ejecutar un archivo HTML directamente. Solo muestra el texto sin formato de los archivos HTML. Solo está destinado a archivos js o css. Para aquellos de ustedes que buscan una respuesta, use raw.githack.com , ya que es un clon de rawgit.
Spencer Wieczorek
194

Hay una nueva herramienta llamada GitHub HTML Preview , que hace exactamente lo que quieres. Simplemente anteponga http://htmlpreview.github.com/?a la URL de cualquier archivo HTML, por ejemplo, http://htmlpreview.github.com/?https://github.com/twbs/bootstrap/blob/gh-pages/2.3.2/index.html

Nota: Esta herramienta es en realidad una página de github.io y no está afiliada a github como empresa.

niutech
fuente
2
Gracias es exactamente lo que esperaba encontrar.
nana
2
¿Esto también es posible en repositorios privados?
Björn Andersson
No funciona con marcos (Javadoc): htmlpreview.github.com/?https://github.com/MartinThoma/… :-(
Martin Thoma
No funciona con imágenes relativas cargadas a través de JavaScript en Chrome. Cross-origin image load denied by Cross-Origin Resource Sharing policy.
ubershmekel 01 de
3
Carga las rutas relativas correctamente, lo que permite vincular a JS / CSS dentro del repositorio github. Esto es fantástico.
Nathan Lilienthal
18

Para aprovechar la respuesta de @ niutech, puede hacer un fragmento de marcador muy simple.
Usar Chrome, aunque funciona de manera similar con otros navegadores

  1. Haga clic derecho en su barra de marcadores
  2. Haga clic en Agregar archivo
  3. Nómbralo como Github HTML
  4. Para el tipo de URLjavascript:top.location="http://htmlpreview.github.com/?"+document.URL
  5. Cuando estés en una página de vista de archivo github ( no raw.github.com ) haz clic en el enlace del marcador y estarás dorado.
mraaroncruz
fuente
6

Tuve el mismo problema para mi proyecto Ratio.js y esto es lo que hice.

Problema: Github.com evita que los archivos se procesen / ejecuten cuando se visualiza la fuente al configurar el tipo de contenido / MIME en texto plano.

Solución: haga que una página web importe los archivos.

Ejemplo:

Use jsfiddle.net o jsbin.com para crear una página web en línea y luego guárdela . Navegue a su archivo en Github.com y haga clic en el botón 'sin procesar' para obtener el enlace directo al archivo. A partir de ahí, importe el archivo con la etiqueta y el atributo adecuados.

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

Demostración en vivo: http://jsfiddle.net/jKu4q/2/

Nota: Nota para jsfiddle.net puede obtener acceso directo a la página de resultados agregando showal final de la url. Me gusta así: http://jsfiddle.net/jKu4q/2/show

O ... podría crear una página de proyecto y renderizar sus archivos HTML desde allí. Puede crear una página de proyecto en http://pages.github.com/ .

Una vez creado, puede acceder al enlace a través de http://*accountName*.github.com/*projectName*/ Ejemplo: http://larrybattle.github.com/Ratio.js/

Larry Battle
fuente
1
Buena idea usar js fiddle para permitir que el navegador cargue los archivos de github, pero ¿por qué no usar el "Agregar recursos" de JSFiddle?
Filippo Vitale
@Filippo ¡Gran idea! Lo intentaré la próxima vez.
Larry Battle
4

Aquí hay un pequeño script de Greasemonkey que agregará un botón CDN a las páginas html en github

La página de destino tendrá la forma: 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
fuente
¡Falló la ejecución del script 'cdn.rawgit.com'! $ no es una función
xiaoyu2er
4

Puede hacerlo fácilmente modificando los encabezados de respuesta que se pueden hacer con la extensión de Chrome y Firefox como Requestly .

En Chrome y Firefox:

  1. Instalar Requestly para Chrome y Requestly para Firefox

  2. Agregue las siguientes reglas de modificación de encabezados :

    ingrese la descripción de la imagen aquí

    a) Tipo de contenido :

    • Modificar
    • Respuesta
    • Encabezamiento: Content-Type
    • Valor: text/html
    • Coincidencias de URL de origen: /raw\.githubusercontent\.com/.*\.html/


    b) Política de seguridad de contenido :

    • Modificar
    • Respuesta
    • Encabezamiento: Content-Security-Policy
    • Valor: default-src 'none'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; script-src * 'unsafe-eval';
    • Coincidencias de URL de origen: /raw\.githubusercontent\.com/.*\.html/
Ostrokach
fuente
Solo para información, también puede compartir sus reglas como URL públicas. En este caso, solo puede crear esta regla y compartirla con otros usuarios. Otros usuarios solicitantes pueden importarlo directamente y comenzar a usarlo. Mira esto: requestly.in/documentation/introducing-shared-list
sachinjain024
No se puede editar mi comentario anterior, así que agregué
sachinjain024
3

Quería editar html y js en github y tener una vista previa. Quería hacerlo en Github para tener confirmaciones y guardados instantáneos.

probé rawgithub.com pero rawgithub.com no fue en tiempo real (su caché se actualiza una vez por minuto).

Así que rápidamente desarrollé mi propia solución:

Solución de node.js para esto: https://github.com/shimondoodkin/rawgithub

Shimon Doodkin
fuente
2

raw.github.com/user/repository ya no está allí

Para vincular, href al código fuente en github, debe usar el enlace github a la fuente sin formato de esta manera:

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

EJEMPLO

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

Si tiene un proyecto angular o de reacción en github, puede usar https://stackblitz.com/ para ejecutar la aplicación en línea en su navegador.

Ingrese su nombre de usuario de Github y el nombre del repositorio para ver la aplicación en línea: stackblitz.com/github/{GITHUB_USERNAME}/{REPO_NAME}

Esto funciona incluso sin Node_Modules subidos a Github

Actualmente soporto proyectos usando @ angular / cli y create-react-app. ¡Pronto habrá soporte para Ionic, Vue y configuraciones de paquetes web personalizados!

sujithuix
fuente
1

Esta solución solo para el navegador Chrome. No estoy seguro sobre otro navegador.

  1. Agregue la extensión "Modificar opciones de tipo de contenido" en el navegador Chrome.
  2. Abra "url-extension: //jnfofbopfpaoeojgieggflbpcblhfhka/options.html" url en el navegador.
  3. Agregue la regla para la URL del archivo sin formato. Por ejemplo:
    • Filtro de URL: https: ///raw/master//fileName.html
    • Tipo original: texto / plano
    • Tipo de reemplazo: texto / html
  4. Abra el navegador de archivos que agregó URL en la regla (en el paso 3).
Vijay
fuente