Могу ли я запускать HTML-файлы напрямую из GitHub вместо просмотра их исходного кода? - PullRequest
Новая
       13

Могу ли я запускать HTML-файлы напрямую из GitHub вместо просмотра их исходного кода?

287 голосов
/ 01 июля 2011

Если у меня есть файл .html в репозитории GitHub, например для выполнения набора тестов JavaScript, есть ли какой-нибудь способ, которым я могу просмотреть эту страницу напрямую - таким образом, выполняя тесты?

Например, могу ли я как-то на самом деле увидеть результаты теста, которые будут получены набором тестов jQuery , без загрузки или клонирования репо на мой локальный диск и запуска их там?

Я знаю, что это в основном привело бы к GitHub в бизнесе размещения статического контента, но опять же, им просто нужно изменить свой тип пантомимы с text/plain на text/html.

Ответы [ 11 ]

348 голосов
/ 19 июня 2013

Возможно, вы захотите использовать raw.githack.com . Он поддерживает GitHub, Bitbucket, Gitlab и GitHub GIST.

GitHub

До:

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

В вашем случае .html расширение

После того, как:

Развитие (задушено)

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

Производство (CDN)

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

В вашем случае .html расширение

raw.githack.com также поддерживает другие службы:

Bitbucket

До:

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

После того, как:

Развитие (задушено)

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

Производство (CDN)

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

GitLab

До:

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

После того, как:

Развитие (задушено)

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

Производство (CDN)

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

GitHub Gists

До:

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

После того, как:

Развитие (задушено)

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

Производство (CDN)

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

Обновление: rawgit был прекращен

190 голосов
/ 03 сентября 2012

Существует новый инструмент под названием GitHub HTML Preview , который делает именно то, что вы хотите. Просто добавьте http://htmlpreview.github.com/? к URL-адресу любого HTML-файла, например, http://htmlpreview.github.com/?https://github.com/twbs/bootstrap/blob/gh-pages/2.3.2/index.html

Примечание. Этот инструмент фактически является страницей github.io и не связан с github как компанией.

17 голосов
/ 28 марта 2013

Чтобы добавить ответ @ niutech, вы можете сделать очень простой фрагмент закладки.
Использование Chrome, хотя он работает аналогично с другими браузерами

  1. Щелкните правой кнопкой мыши на панели закладок
  2. Нажмите Добавить файл
  3. Назовите это что-то вроде Github HTML
  4. Для URL введите javascript:top.location="http://htmlpreview.github.com/?"+document.URL
  5. Когда вы находитесь на странице просмотра файлов GitHub ( не raw.github.com ), нажмите на ссылку закладки, и вы получите золотой.
7 голосов
/ 13 июля 2012

Вы можете разветвить gh-pages для запуска вашего кода или попробовать это расширение (Chrome, Firefox): https://github.com/ryt/githtml

Если вам нужны тесты, вы можете встроить файлы JS в: http://jsperf.com/

6 голосов
/ 12 июня 2012

У меня была такая же проблема для моего проекта Ratio.js и вот что я сделал.

Проблема: Github.com предотвращает рендеринг / выполнение файлов при просмотре источника, задав для типа контента / MIME простой текст.

Решение: Имейте веб-страницу, чтобы импортировать файлы.

Пример:

Используйте jsfiddle.net или jsbin.com , чтобы создать веб-страницу в Интернете и сохранить ее. Перейдите к своему файлу на Github.com и нажмите кнопку «raw», чтобы получить прямую ссылку на файл. Оттуда импортируйте файл, используя соответствующий тег и атрибут. 

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

Live Demo: http://jsfiddle.net/jKu4q/2/

Примечание: Примечание: для jsfiddle.net вы можете получить прямой доступ к странице результатов, добавив show в конец URL-адреса. Вот так: http://jsfiddle.net/jKu4q/2/show

Или .... вы можете создать страницу проекта и оттуда вывести свои HTML-файлы. Вы можете создать страницу проекта на http://pages.github.com/.

После создания вы можете получить доступ к ссылке через http://*accountName*.github.com/*projectName*/ Пример: http://larrybattle.github.com/Ratio.js/

4 голосов
/ 25 июля 2014

Вот небольшой скрипт Greasemonkey, который добавит кнопку CDN к HTML-страницам на github

Целевая страница будет иметь вид: 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);
3 голосов
/ 20 июня 2016

Вы можете легко сделать это, изменив заголовки ответа , что можно сделать с расширением Chrome и Firefox, например по запросу .

В Chrome и Firefox:

  1. Установить Запрошено для Chrome и Запрошено для Firefox

  2. Добавить следующие Правила изменения заголовков :

    enter image description here

    a) Тип содержимого :

    • Изменение
    • Ответ
    • Заголовок: Content-Type
    • Значение: text/html
    • Исходные матчи URL: /raw\.githubusercontent\.com/.*\.html/


    b) Content-Security-Policy :

    • Изменение
    • Ответ
    • Заголовок: Content-Security-Policy
    • Значение: default-src 'none'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; script-src * 'unsafe-eval';
    • Исходные URL-адреса: /raw\.githubusercontent\.com/.*\.html/
3 голосов
/ 29 октября 2013

Я хотел отредактировать html и js в github и получить предварительный просмотр.я хотел сделать это в github, чтобы иметь мгновенные коммиты и сохранения.

пробовал rawgithub.com, но rawgithub.com не был в реальном времени (он обновляет кэш раз в минуту).

, поэтому я быстро разработалмое собственное решение:

решение node.js для этого: https://github.com/shimondoodkin/rawgithub

2 голосов
/ 11 апреля 2014

raw.github.com / user / repository больше нет

Чтобы связать href с исходным кодом в github, вы должны использовать ссылку github на необработанный источник следующим образом:

raw.githubusercontent.com / пользователь / хранилище / ведущий / file.extension

Пример 

<html>
...
...
<head>    
<script src="https://raw.githubusercontent.com/amiahmadtouseef/tutorialhtmlfive/master/petdecider/script.js"></script>
...
</head>
<body>
...
</html>
1 голос
/ 24 июня 2018

Если у вас в github есть угловой или реактивный проект, вы можете использовать https://stackblitz.com/ для онлайн-запуска приложения в вашем браузере.

Введите свое имя пользователя Github и имя хранилища, чтобы просмотреть приложение в Интернете - stackblitz.com/github/ndomGITHUB_USERNAME‹/ndomREPO_NAME rout

Это работает даже без Node_Modules, загруженных на Github

В настоящее время поддерживаются проекты с использованием @ angular / cli и create-реагировать-приложение. Поддержка Ionic, Vue и пользовательских конфигов веб-пакетов в ближайшее время!

Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...