¿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?


355

En http://github.com el desarrollador conserva los archivos HTML, CSS, JavaScript e imágenes del proyecto. ¿Cómo puedo ver la salida HTML en el navegador?

Por ejemplo esto: https://github.com/necolas/css3-social-signin-buttons/blob/master/index.html

Cuando abro esto, no muestra el HTML representado del código del autor. Muestra la página como un código fuente.

¿Es posible verlo como HTML renderizado directamente? De lo contrario, siempre necesito descargar todo el ZIP solo para ver el resultado.



1
a partir de junio de 2019, raw.githack.com parece ser la solución más conveniente (ver las respuestas a la pregunta vinculada anteriormente )
leopold.talirz

Respuestas:


455

La forma más cómoda de obtener una vista previa de los archivos HTML en GitHub es ir a https://htmlpreview.github.io/ o simplemente anteponerlo a la URL original, es decir: https://htmlpreview.github.io/?https:// github.com/bartaz/impress.js/blob/master/index.html


@Denis: ¿Qué navegador y qué URL estás usando? Por ahora, solo admite los navegadores Webkit y Gecko.
niutech

32
Tenga en cuenta que esto solo funciona para repos públicos. Los privados darán el mensaje de errorError: Cannot load file
Erik Trautman

37
htmlpreview.github.com falla en parte al representar JavaScript y CSS. La alternativa rawgit.com funciona mejor y sirve archivos con encabezados de tipo de contenido adecuados.
Julien Carsique

1
Gran solución, gracias! Agregué los enlaces a mis cuadernos R con el prefijo al archivo README.md y muestra mi archivo nb.html muy bien. Aquí está la página en caso de que alguien quiera ver cómo funciona: github.com/sargdavid/snippets.cvi y htmlpreview.github.io/?https://github.com/sargdavid/…
Davit Sargsyan

1
Parece que esta solución deja de funcionar en los últimos días de diciembre de 2018 hasta ahora, sin embargo, todavía tenemos este stackoverflow.com/a/8446391/860099
Kamil Kiełczewski

85

Si no desea descargar un archivo, puede usar las páginas de GitHub para representarlo.

  1. Bifurca el repositorio en tu cuenta.
  2. Clonarlo localmente en su máquina
  3. Cree una gh-pagesrama (si ya existe, elimínela y cree una nueva basada en master).
  4. Empuje la rama de nuevo a GitHub.
  5. Ver las páginas en `http://username.github.io/repo

En codigo:

git clone git@github.com:username/repo.git
cd repo
git branch gh-pages
# Might need to do this first: git branch -D gh-pages
git push -u origin gh-pages # Push the new branch back to github
Go to http://username.github.io/repo

Bifurqué un proyecto ahora, cómo puedo copiarlo en páginas de Github.
Jitendra Vyas

1
Actualicé mi respuesta con un proceso.
Ross


2
¿Por qué primero crear un maestro y clonarlo ("jugar con seguridad" en crear-proyecto-páginas-manualmente)? ¿Puede uno no checkout --orphan gh-pages solo empujar eso, sin meterse con el maestro?
denis

44
Las páginas se movieron a github.io, ya no a github.com.
Damjan Pavlica

64

Puede usar RawGit :
https://rawgit.com/necolas/css3-social-signin-buttons/master/index.html

Funciona mejor (en el momento de escribir esto) que http://htmlpreview.github.com/ , ya que sirve archivos con encabezados de tipo de contenido adecuados. Además, también proporciona URL de CDN para su uso en producción.


2
Confirmo que funciona mejor que htmlpreview. Al menos, muestra mis animaciones WebGL.
Cyril Duchon-Doris

1
En realidad, funciona más rápido y con Bokeh ( por ejemplo ), muestra algunas de las interacciones (por ejemplo, información sobre herramientas) que no funcionan con htmlpreview.
jadianes

Al igual que htmlpreview, no funciona con repositorios privados. Git crea las URL para estas, como las URL públicas, agregando? Token = <hash>, pero estas herramientas deberían entenderlo y pasarlo a GH junto con el resto.
zakmck

2
Esto es de las preguntas frecuentes para rawgit: ¿Puedo usar una URL de desarrollo de rawgit.com en un sitio web de producción o en un código de ejemplo público? No. Solo use las URL de rawgit.com para pruebas de poco tráfico o para compartir demostraciones temporales con algunas personas durante el desarrollo. Utilice cdn.rawgit.com para cualquier cosa que pueda generar mucho tráfico o que las personas puedan copiar y pegar en su propio código. ... Hay más explicaciones disponibles
BarryPye

3
Puede confirmar: Rawgit se cerrará a partir de octubre de 2019.
samcozmid

34

Es muy fácil hacerlo con las páginas de Github , es un poco extraño la primera vez que lo haces. Sorta como la primera vez que tenías que hacer malabarismos con 3 gatitos mientras aprendías a tejer. (OK, no es tan malo)

Necesita una rama de gh-pages:

Básicamente, github.com busca una rama de gh-pages del repositorio. Servirá todas las páginas HTML que encuentre aquí como HTML normal directamente al navegador.

¿Cómo obtengo esta rama de gh-pages?

Fácil. Simplemente cree una rama de su repositorio de github llamada gh-pages. Especifique --orphancuándo crea esta rama, ya que en realidad no desea fusionar esta rama nuevamente en su rama github, solo quiere una rama que contenga sus recursos HTML.

$ git checkout --orphan gh-pages

¿Qué pasa con todas las otras mugre en mi repositorio, cómo encaja eso en él?

No, puedes seguir adelante y eliminarlo. Y es seguro hacerlo ahora, porque ha estado prestando atención y ha creado una rama huérfana que no puede fusionarse nuevamente en su rama principal y eliminar todo su código.

He creado la sucursal, ¿y ahora qué?

Debes llevar esta rama a github.com, para que su automatización pueda comenzar y alojar estas páginas por ti.

git push -u origin gh-pages

Pero ... ¡Mi HTML todavía no se está sirviendo!

Github tarda unos minutos en indexar estas ramas y activar la infraestructura necesaria para servir el contenido. Hasta 10 minutos según github.

Los pasos presentados por github.com

https://help.github.com/articles/creating-project-pages-manually


3
Funciona genial. Como git noob, olvidé $ git commit -m 'init'entre tus líneas.
systemaddict

1
¿Cuál será la URL?
Koray Tugay

hmm ... no estoy tan seguro de que esto sea mucho más fácil que hacer malabarismos con gatitos ...
dreftymac

14

Leí todos los comentarios y pensé que GitHub hacía demasiado difícil para el usuario normal crear páginas de GitHub hasta que visité la página de temas de GitHub donde se menciona claramente que hay una sección de "Páginas de GitHub" en la página de configuración del repositorio en cuestión donde puede elija la opción "usar la rama maestra para las páginas de GitHub". y voilà !! ... revisa ese repositorio particular en https://username.github.io/reponame

captura de pantalla para apoyar mi respuesta



1

Usted puede ver el código HTML utilizando siguiente extensión de Chrome - Run Selected HTML, bastante simple de usar.

Si desea select all the codeen el modo de lectura de GitHub, también es bastante simple, primero mueva el cursor del mouse al soporte inicial de <html>en la parte superior, luego mantenga presionada la Shifttecla y luego mueva el cursor al soporte final de</html> la parte inferior.

Ejecutar HTML seleccionado - Chrome Web store

https://chrome.google.com/webstore/detail/run-selected-html/eefflcdphpehljcadbmkdpopmbamfefl/

Paso 1 : en modo de lectura, seleccione todo el cuerpo del código html.

Paso 2 : haga clic con el botón derecho del mouse en "Ejecutar HTML seleccionado", luego podrá ver el resultado representado en una nueva pestaña.

Ejecutar HTML seleccionado

El resultado de ejecución: ingrese la descripción de la imagen aquí


1

Ahora, esta es una respuesta desactualizada (porque la extensión "Modificar las opciones de tipo de contenido" no funciona como se esperaba).

Esta solución solo para el navegador Chrome. No estoy seguro acerca de 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).

El autor de la pregunta probablemente quiere que todos vean la página representada.
Ondra Žižka

@zakmck Browser enviando el encabezado "text / plain" pero necesita enviar "text / html". No puedo enviar mis datos a terceros (" htmlpreview.github.com ") por eso estoy usando los pasos anteriores. También puede usar la expresión regular para url en los pasos anteriores.
Vijay

Estaba buscando exactamente esto. Quiero ver la página, y tanto en git como en bitbucket.
Eduardo Reis

No funciono para mi.
Eduardo Reis

@EduardoReis Hoy, revisé mi máquina, no funciona ahora. Puede haber algunos cambios en la extensión "Modificar opciones de tipo de contenido". Si encuentro alguna otra extensión, publicaré aquí. Gracias.
Vijay

0

Esta no es una respuesta directa, pero creo que es una alternativa bastante dulce.

http://www.s3auth.com/

Le permite alojar sus páginas detrás de la autenticación básica. Ideal para cosas como api docs en tu repositorio privado de github. solo agregue un s3 puesto como parte de su compilación de API.


Parece un servicio de terceros que no tiene nada en común con git. ¿Dónde está la instrucción de cómo usarlo en el contexto de esta pregunta?
Stalinko

-3

Puedes activar las páginas de Github. ^ _ ^

Haga clic en "Configuración", luego vaya a "Páginas de GitHub" y haga clic en el menú desplegable debajo de "Fuente" y elija la rama que desea publicar (donde se encuentra el archivo html principal) aaa y vualaa. ^ _ ^

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.