Como ver uma página HTML no Github como uma página HTML renderizada normal para visualizar no navegador, sem fazer o download?

No http://github.com, o desenvolvedor mantém os arquivos HTML, CSS, JavaScript e imagens do projeto. Como posso ver a saída HTML no navegador?

Por exemplo, isso: https://github.com/necolas/css3-social-signin-buttons/blob/master/index.html

Quando abro isso, ele não mostra o HTML renderizado do código do autor. Mostra a página como um código fonte.

É possível vê-lo como HTML renderizado diretamente? Caso contrário, eu sempre preciso baixar o ZIP inteiro apenas para ver o resultado.

A maneira mais confortável de visualizar arquivos HTML no GitHub é acessando https://htmlpreview.github.io/ ou apenas anexando-o ao URL original, ou seja: https://htmlpreview.github.io/?https:// github.com/bartaz/impress.js/blob/master/index.html

Se você não deseja baixar um arquivo, pode usar as Páginas do GitHub para renderizá-lo.

1. Coloque o repositório na sua conta.
2. Clone localmente na sua máquina
3. Crie uma gh-pagesramificação (se já existir, remova-a e crie uma nova com base master).
4. Empurre a ramificação de volta ao GitHub.
5. Veja as páginas em `http://username.github.io/repo

Em código:

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

Você pode usar o RawGit :
https://rawgit.com/necolas/css3-social-signin-buttons/master/index.html

Funciona melhor (no momento em que este artigo foi escrito) do que http://htmlpreview.github.com/ , servindo arquivos com cabeçalhos de tipo de conteúdo adequados. Além disso, ele também fornece a URL da CDN para uso na produção.

É realmente fácil de fazer com as páginas do github , é um pouco estranho a primeira vez que você faz isso. É como a primeira vez que você teve que fazer malabarismos com 3 gatinhos enquanto aprendia a tricotar. (OK, não é tão ruim assim)

Você precisa de um ramo gh-pages:

Basicamente, o github.com procura uma ramificação gh-pages do repositório. Ele servirá todas as páginas HTML encontradas aqui como HTML normal diretamente para o navegador.

Como obtenho esse ramo gh-pages?

Fácil. Basta criar um ramo do seu repositório no Github chamado gh-pages. Especifique --orphanquando você criar esse ramo, pois, na verdade, não deseja mesclar esse ramo novamente ao ramo do github, mas apenas um ramo que contenha seus recursos HTML.

$ git checkout --orphan gh-pages

E todas as outras porcarias do meu repositório, como isso se encaixa nele?

Não, você pode simplesmente ir em frente e excluí-lo. E é seguro fazer isso agora, porque você prestou atenção e criou um ramo órfão que não pode ser mesclado novamente ao ramo principal e remove todo o seu código.

Eu criei o ramo, e agora?

Você precisa enviar esse ramo para o github.com, para que a automação deles possa entrar e começar a hospedar essas páginas para você.

git push -u origin gh-pages

Mas .. Meu HTML ainda não está sendo veiculado!

Leva alguns minutos para o github indexar essas ramificações e acionar a infraestrutura necessária para veicular o conteúdo. Até 10 minutos de acordo com o github.

As etapas apresentadas pelo github.com

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

Eu li todos os comentários e achei que o GitHub tornava muito difícil para o usuário normal criar páginas do GitHub até visitar a Página do tema do GitHub, onde é claramente mencionado que há uma seção de "Páginas do GitHub" nas configurações Página do repositório em questão, onde você pode escolha a opção "use a ramificação principal das páginas do GitHub". e voilà !! ... confira esse repositório específico em https://username.github.io/reponame

Além disso, se você usar o Tampermonkey, poderá adicionar um script que adicionará um preview with http://htmlpreview.github.com/botão ao menu de ações, ao lado dos botões 'cru', 'culpado' e 'histórico'.

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

Você pode visualizar o código HTML usando a seguinte extensão do Chrome - Run Selected HTML, bastante simples de usar.

Se você quiser select all the codeno modo de leitura do GitHub, também é bastante simples: primeiro mova o cursor do mouse para o colchete inicial <html>do topo, mantenha pressionada a Shifttecla e, em seguida, mova o cursor para o colchete final </html>do fundo.

Executar HTML selecionado - Chrome Web Store

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

Etapa 1 : no modo de leitura, selecione todo o corpo do código html.

Etapa 2 : clique com o botão direito do mouse em "Executar HTML selecionado" e, em seguida, você poderá ver o resultado renderizado em uma nova guia.

O resultado em execução:

Agora, esta é uma resposta desatualizada (porque a extensão "Modify Content-Type Options" não está funcionando conforme o esperado).

Esta solução apenas para o navegador Chrome. Não tenho certeza sobre outro navegador.

1. Adicione a extensão "Modificar opções de tipo de conteúdo" no navegador Chrome.
2. Abra o URL "chrome-extension: //jnfofbopfpaoeojgieggflbpcblhfhka/options.html" no navegador.
3. Adicione a regra para o URL do arquivo bruto. Por exemplo:
   • Filtro de URL: https: ///raw/master//fileName.html
   • Tipo original: texto / planície
   • Tipo de substituição: text / html
4. Abra o navegador de arquivos ao qual você adicionou o URL na regra (na etapa 3).

Esta não é uma resposta direta, mas acho que é uma alternativa bastante agradável.

http://www.s3auth.com/

Ele permite que você hospede suas páginas por trás da autenticação básica. Ótimo para coisas como APIs em seu repositório particular do Github. basta adicionar um s3 como parte da sua compilação de API.

Você pode simplesmente ativar as páginas do Github. ^ _ ^

Clique em "Configurações", depois vá em "Páginas do GitHub" e clique no menu suspenso em "Origem" e escolha o ramo que deseja publicar (onde está localizado o arquivo html principal) aaaand vualaa. ^ _ ^