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

300

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

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

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

javascript html github Доменик
источник

2

Хм ... может ли скрипт GreaseMonkey изменить заголовки?

Алекс Хованский

1

Можете ли вы обновить принятый ответ на этот? Теперь есть способ сделать это - см. Ответ @ niutech ...

Алекс Дин

1

возможно дублирование Link и выполнение внешнего файла JavaScript, размещенного на GitHub

Трой Алфорд,

Возможный дубликат Как увидеть html-страницу на github как обычную отрендеренную html-страницу для просмотра в браузере без загрузки?

Майкл Фрейдгейм

366

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

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 был прекращен

chmanie
источник

Да, спасибо, что добавил это, так как, задавая этот вопрос давно, я переключился на этот сервис. Давайте сделаем вам принятый ответ :).

Доменик

13

Просто к вашему сведению: похоже, это не работает для частных репозиториев по понятным причинам.

rfay

Кажется, он не загружает JavaScript.

PyRulez

1

По какой-то причине я не получаю текстовый / HTML-тип контента на моих HTML-страницах, поэтому он просто показывает источник :(

benji

1

После редактирования этот ответ совершенно неверный. jsDelivr не позволяет вам запускать HTML-файл напрямую. Он показывает только открытый текст HTML-файлов. Он предназначен только для файлов js или css. Для тех, кто ищет ответ, используйте raw.githack.com , так как это клон rawgit.

Спенсер Вечорек

194

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

niutech
источник

2

Спасибо именно то, что я надеялся найти.

Нана

2

Это также возможно на частных репо?

Бьорн Андерссон

Не работает с фреймами (Javadoc): htmlpreview.github.com/?https://github.com/MartinThoma/… :-(

Мартин Тома

Это не работает с относительными изображениями, загруженными через JavaScript на Chrome. Cross-origin image load denied by Cross-Origin Resource Sharing policy.

ubershmekel

3

Он правильно загружает относительные пути, позволяя ссылаться на JS / CSS внутри репозитория github. Это фантастика.

Натан Лилиенталь

18

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

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

mraaroncruz
источник

7

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

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

Джанлука Эспозито
источник

6

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

Демонстрация в реальном времени: 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/

Ларри Битва
источник

1

Хорошая идея - использовать js fiddle, чтобы позволить браузеру загружать файлы из github, но почему бы не использовать «Добавить ресурсы» из JSFiddle?

Филиппо Витале

@ Филиппо Отличная идея! Я попробую это в следующий раз.

Ларри

4

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

Джеймс Макгиган
источник

Выполнение скрипта cdn.rawgit.com не удалось! $ не является функцией

xiaoyu2er

4

Это можно легко сделать, изменив заголовки ответа, что можно сделать с помощью расширений Chrome и Firefox, например Requestly .

В Chrome и Firefox:

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

а) Тип контента :
- Изменить
- отклик
- Заголовок: Content-Type
- Стоимость: text/html
- Исходные URL-адреса: /raw\.githubusercontent\.com/.*\.html/
б) 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/

ostrokach
источник

Просто для информации вы также можете поделиться своими правилами в качестве публичных URL. В этом случае вы можете просто создать это правило и поделиться с другими пользователями. Другие пользователи могут напрямую импортировать его и начать использовать. Проверьте это: requestly.in/documentation/introduction-shared-list

sachinjain024

Невозможно изменить мой комментарий выше, поэтому добавьте еще один для публикации новой ссылки документации: requestly.in/content/documentation/introduction-shared-list

sachinjain024

3

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

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

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

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

Шимон Дудкин
источник

2

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>

Ами Ахмад Тусиф
источник

2

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

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

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

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

sujithuix
источник

1

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

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

Виджай
источник

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

Ответы:

GitHub

Перед:

После:

Bitbucket

Перед:

После:

GitLab

Перед:

После:

GitHub Gists

Перед:

После: