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



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



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



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

1247   11  

11 ответов:

альтернатива http://htmlpreview.github.com будет http://rawgithub.com. Это обеспечивает более удобный способ для предварительного просмотра файлов.

обновление: сайт был переименован в http://rawgit.com

перед:

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

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

после:

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

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

теперь, кажется, можно использовать CDN в производстве, а также, что довольно круто:

https://cdn.rawgit.com/[user]/[repository]/[branch]/[filename.ext]

вы также можете служить логи

перед:

https://gist.github.com/[user]/[gist] 

после:

https://rawgit.com/[user]/[gist]/raw/

CDN:

https://cdn.rawgit.com/[user]/[gist]/raw/

появился новый инструмент под названием гитхаб предварительный просмотр HTML-код, который делает именно то, что вы хотите. Просто добавьте 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 как компании.

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

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

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

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

у меня была такая же проблема на моем проекте .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>

Демо: 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/

вот небольшой скрипт 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);

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

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

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

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

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

в Chrome и Firefox:

  1. установить Requestly для Chrome и Requestly для Firefox

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

    enter image description here

    a) Content-Type:

    • изменить
    • ответ
    • : Content-Type
  3. значение: text/html
  4. Источник Url Соответствует:/raw\.githubusercontent\.com/.*\.html/

  5. б) 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/

raw.github.com/user/repository уже нет

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

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

пример

<html>
...
...
<head>    
<script src="https://raw.githubusercontent.com/amiahmadtouseef/tutorialhtmlfive/master/petdecider/script.js"></script>
...
</head>
<body>
...
</html>

Это решение только для браузера Chrome. Я не уверен насчет другого браузера.

  1. добавить расширение "изменить параметры типа контента" в браузере chrome.
  2. открыть " chrome-extension:/ / jnfofbopfpaoeojgieggflbpcblhfhka / options.html " url в браузере.
  3. добавьте правило для url необработанного файла. Например:
    • URL фильтр: https:///raw/master//fileName.HTML-код
    • тип оригинала: text / plain
    • Тип Замена : текст / html
  4. откройте браузер файлов, который вы добавили url в правиле (в шаге 3).

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

введите имя пользователя Github и имя репозитория для просмотра приложения в интернете - stackblitz.com/github/{GITHUB_USERNAME} / {REPO_NAME}

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

В настоящее время поддержка проектов с использованием @angular/cli и create-react-app. Поддержка ионных, Vue и пользовательские конфигурации webpack скоро появятся!

Comments

    Ничего не найдено.