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

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

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

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

Ответы

Ответ 1

Вы можете использовать jsDelivr:

До:

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

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

После:

https://cdn.jsdelivr.net/gh/[user]/[repository]@[branch]/[filename.ext]

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

Как вы можете себе представить, вам даже рекомендуется использовать это как CDN для ваших файлов.

К сожалению, суставы не поддерживаются.

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

Ответ 2

Существует новый инструмент под названием 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 как компанией.

Ответ 3

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

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

Ответ 4

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

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

Ответ 5

У меня была такая же проблема для моего проекта 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/

Ответ 6

Вот немного Greasemonkey script, который добавит кнопку 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);

Ответ 7

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

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

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

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

Ответ 8

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

В Chrome и Firefox:

Установите Запрос для Chrome и Запрос для Firefox
Добавьте следующие правила модификации заголовков:

a) Тип содержимого:
- Изменить
- ответ
- Заголовок: Content-Type
- Значение: text/html
- Соответствует совпадению ресурсов: /raw\.githubusercontent\.com/.*\.html/
b) Политика безопасности контента:
- Изменить
- ответ
- Заголовок: Content-Security-Policy
- Значение: default-src 'none'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; script-src * 'unsafe-eval';
- Соответствует совпадению ресурсов: /raw\.githubusercontent\.com/.*\.html/

Ответ 9

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>

Ответ 10

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

Добавить расширение "Изменить параметры содержимого" в браузере Chrome.
Откройте "chrome-extension://jnfofbopfpaoeojgieggflbpcpfp" и введите url в браузере.
Добавьте правило для URL-адреса необработанного файла. Например:
- Фильтр URL: https:///raw/master//fileName.html
- Тип оригинала: текст/обычная
- Тип замены: text/html
Откройте браузер файлов, который вы добавили в правило (в шаге 3).

Ответ 11

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

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

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

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