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

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.

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

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

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.

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

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

Además, si usa Tampermonkey, puede agregar un script que agregará preview with http://htmlpreview.github.com/ botón al menú de acciones junto a los botones 'raw', 'culpe' e 'history'.

Script como este: https://gist.github.com/vanyakosmos/83ba165b288af32cf85e2cac8f02ce6d

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.

El resultado de ejecución:

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).

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.

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. ^ _ ^