Posso executar arquivos HTML diretamente do GitHub, em vez de apenas visualizar sua fonte?

300

Se eu tiver um .htmlarquivo em um repositório do GitHub, por exemplo, para executar um conjunto de testes de JavaScript, existe alguma maneira de visualizar essa página diretamente - executando os testes?

Por exemplo, eu poderia, de alguma forma, ver os resultados do teste que seriam produzidos pelo conjunto de testes do jQuery , sem fazer o download ou clonar o repositório na unidade local e executá-los lá?

Eu sei que isso basicamente colocaria o GitHub no negócio de hospedagem de conteúdo estático, mas, novamente, eles apenas precisam alterar o tipo de mímica de text/plainpara text/html.

javascript  html  github 
— Domenic
fonte
2
Hmm ... um script GreaseMonkey pode mudar de cabeçalho?
— 21811 Alex Howansky #
1
Você pode atualizar a resposta aceita? Há agora uma maneira de fazer isso - ver resposta da @ niutech ...
— Alex Dean
1
— Troy Alford
— Michael Freidgeim 29/11

Respostas:

366

Você pode querer usar raw.githack.com . Ele suporta gitHub, Bitbucket, Gitlab e GitHub.

GitHub

Antes:

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

No seu caso, .htmlextensão

Depois de:

Desenvolvimento (regulado)

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

Produção (CDN)

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

No seu caso, .htmlextensão

O raw.githack.com também suporta outros serviços:

Bitbucket

Antes:

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

Depois de:

Desenvolvimento (regulado)

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

Produção (CDN)

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

GitLab

Antes:

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

Depois de:

Desenvolvimento (regulado)

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

Produção (CDN)

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

GitHub gists

Antes:

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

Depois de:

Desenvolvimento (regulado)

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

Produção (CDN)

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

Atualização: rawgit foi descontinuado

— chmanie
fonte
Sim, obrigado por adicionar isso, já que fiz essa pergunta há muito tempo, mudei para este serviço. Vamos fazer de você a resposta aceita :).
— Domenic
13
Apenas um FYI: Isso parece não funcionar de maneira alguma para repositórios particulares, por razões óbvias.
— Rfay
Não parece carregar o javascript.
— PyRulez
1
Por alguma razão, eu não estou recebendo um tipo de conteúdo de texto / html nas minhas páginas HTML, então ele apenas mostra a fonte :(
— benji
1
Após a edição, esta resposta está completamente errada. O jsDelivr não permite que você execute um arquivo HTML diretamente. Ele mostra apenas o texto sem formatação dos arquivos HTML. Destina-se apenas a arquivos js ou css. Para quem procura uma resposta, use raw.githack.com , pois é um clone do rawgit.
— Spencer Wieczorek
194

Existe uma nova ferramenta chamada GitHub HTML Preview , que faz exatamente o que você deseja. Anexe apenas http://htmlpreview.github.com/?o URL de qualquer arquivo HTML, por exemplo, http://htmlpreview.github.com/?https://github.com/twbs/bootstrap/blob/gh-pages/2.3.2/index.html

Nota: Esta ferramenta é na verdade uma página do github.io e não é afiliada ao github como empresa.

— niutech
fonte
2
Obrigado é exatamente o que eu esperava encontrar.
— Nana
2
Isso também é possível em acordos privados?
— Björn Andersson
Não funciona com quadros (Javadoc): htmlpreview.github.com/?https://github.com/MartinThoma/… :-(
— Martin Thoma
Não funciona com imagens relativas carregadas via javascript no chrome. Cross-origin image load denied by Cross-Origin Resource Sharing policy.
— Ubershmekel #
3
Carrega caminhos relativos adequadamente, permitindo vincular a JS / CSS dentro do repositório do github. Isto é fantástico.
— Nathan Lilienthal
18

Para acompanhar a resposta da @ niutech, você pode criar um snippet de marcador muito simples.
Usando o Chrome, embora funcione da mesma forma com outros navegadores

  1. Clique com o botão direito na barra de favoritos
  2. Clique em Adicionar arquivo
  3. Nomeie algo como HTML do Github
  4. Para o tipo de URLjavascript:top.location="http://htmlpreview.github.com/?"+document.URL
  5. Quando você estiver em uma página de visualização de arquivo do github ( não em raw.github.com ), clique no link do marcador e você estará pronto .
— mraaroncruz
fonte
6

Eu tive o mesmo problema para o meu projeto Ratio.js e aqui está o que eu fiz.

Problema: O Github.com impede que os arquivos sejam renderizados / executados quando a fonte é visualizada, definindo o tipo de conteúdo / MIME como texto sem formatação.

Solução: Faça uma página da Web importar os arquivos.

Exemplo:

Use jsfiddle.net ou jsbin.com para criar uma página da Web online e salve-a. Navegue até o seu arquivo no Github.com e clique no botão 'bruto' para obter o link direto para o arquivo. A partir daí, importe o arquivo usando a tag e o atributo apropriados.

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

Demonstração ao vivo: http://jsfiddle.net/jKu4q/2/

Nota: Nota para jsfiddle.net, você pode obter acesso direto à página de resultados adicionando showao final do URL. Assim: http://jsfiddle.net/jKu4q/2/show

Ou .... você pode criar uma página de projeto e renderizar seus arquivos HTML a partir daí. Você pode criar uma página de projeto em http://pages.github.com/ .

Depois de criado, você poderá acessar o link através de http://*accountName*.github.com/*projectName*/ Exemplo: http://larrybattle.github.com/Ratio.js/

— Larry Battle
fonte
1
Boa idéia usar o js fiddle para permitir que o navegador carregue os arquivos do github, mas por que não usar o "Add Resources" do JSFiddle?
— Filippo Vitale
@Filippo Ótima idéia! Vou tentar na próxima vez.
— Larry Batalha
4

Aqui está um pequeno script Greasemonkey que adicionará um botão CDN às páginas html no github

A página de destino terá o formato: 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
fonte
A execução do script 'cdn.rawgit.com' falhou! $ não é uma função
— xiaoyu2er
4

Você pode fazer isso facilmente modificando os cabeçalhos de resposta, o que pode ser feito com a extensão do Chrome e Firefox, como Requestly .

No Chrome e Firefox:

  1. Instale Requestly para Chrome e Requestly para Firefox

  2. Adicione as seguintes regras de modificação de cabeçalhos :

    insira a descrição da imagem aqui

    a) Tipo de conteúdo :

    • Modificar
    • Resposta
    • Cabeçalho: Content-Type
    • Valor: text/html
    • Correspondências de URL de origem: /raw\.githubusercontent\.com/.*\.html/


    b) Política de segurança de conteúdo :

    • Modificar
    • Resposta
    • Cabeçalho: Content-Security-Policy
    • Valor: default-src 'none'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; script-src * 'unsafe-eval';
    • Correspondências de URL de origem: /raw\.githubusercontent\.com/.*\.html/
— ostrokach
fonte
Apenas para obter informações, você também pode compartilhar suas regras como URLs públicas. Nesse caso, você pode apenas criar esta regra e compartilhar com outros usuários. Outros usuários solicitados podem importá-lo diretamente e começar a usá-lo. Veja isso: requestly.in/documentation/introducing-shared-list
— sachinjain024
Não é possível editar o meu comentário acima, assim que adicionar outro para postar novo link de documentação: requestly.in/content/documentation/introducing-shared-list
— sachinjain024
3

Eu queria editar html e js no github e ter uma prévia. Eu queria fazê-lo no github para ter instantâneos de commit e save.

tentei rawgithub.com, mas rawgithub.com não era em tempo real (o cache é atualizado uma vez por minuto).

então eu rapidamente desenvolvi minha própria solução:

solução node.js para isso: https://github.com/shimondoodkin/rawgithub

— Shimon Doodkin
fonte
2

raw.github.com/user/repository não está mais lá

Para vincular, href ao código-fonte no github, você deve usar o link do github para a fonte bruta da seguinte maneira:

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

EXEMPLO

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

Se você tem um projeto angular ou de reação no github, pode usar https://stackblitz.com/ para executar o aplicativo on-line no seu navegador.

Digite seu nome de usuário e repositório no Github para visualizar o aplicativo on-line - stackblitz.com/github/{GITHUB_USERNAME}/{REPO_NAME}

Isso funciona mesmo sem o Node_Modules carregado no Github

Atualmente, suporte projetos usando @ angular / cli e create-react-app. Em breve, o suporte para configurações Ionic, Vue e webpack personalizadas!

— sujithuix
fonte
1

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).
— Vijay
fonte
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.