Могу ли я запускать HTML-файлы непосредственно из GitHub, а не просто просматривать их источник?
Если у меня есть .html
файл в репозитории GitHub, например, для запуска набора тестов JavaScript, есть ли способ просмотреть эту страницу напрямую-таким образом, запустив тесты?
например, могу ли я как-то увидеть результаты теста, которые будут получены набор тестов jQuery, без загрузки или клонирования РЕПО на мой локальный диск и запуска их там?
Я знаю, что это в основном поставит GitHub в статический контент-хостинг, но опять же, им просто нужно изменить свой MIME-тип с text/plain
to text/html
.
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]
вы также можете служить gists
перед:
https://gist.github.com/[user]/[gist]
после:
https://rawgit.com/[user]/[gist]/raw/
CDN:
https://cdn.rawgit.com/[user]/[gist]/raw/
появился новый инструмент под названием 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 page и не является аффилированным лицом github как компании.
чтобы вернуться к ответу @niutech, вы можете сделать очень простой фрагмент закладки.
использование Chrome, хотя он работает аналогично с другими браузерами
- щелкните правой кнопкой мыши панель закладок
- клик Добавить Файл
- имя это что-то вроде гитхаб в HTML
- на URL-адресом тип
javascript:top.location="http://htmlpreview.github.com/?"+document.URL
- когда вы находитесь на странице просмотра файла 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>
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/
вот небольшой скрипт 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:
установить Requestly для Chrome и Requestly для Firefox
-
добавить следующее Правила Изменения Заголовков:
a) Контент-Тип:
- изменить
- ответ :
Content-Type
- значение:
text/html
- Источник Url Матчи:
/raw\.githubusercontent\.com/.*\.html/
b)Содержание-Безопасность-Политика:
- изменить
- ответ :
- значение:
default-src 'none'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; script-src * 'unsafe-eval';
- Источник Url Соответствует:
/raw\.githubusercontent\.com/.*\.html/
Content-Security-Policy
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. Я не уверен в другом браузере.
- добавить расширение "изменить параметры типа контента" в браузере chrome.
- открыть " chrome-расширение:/ / jnfofbopfpaoeojgieggflbpcblhfhka / options.html " url в браузере.
- Добавить правило для RAW файл url.
Например:
- фильтр URL: https:///raw/master//fileName - ... HTML-код
- оригинальный тип: text / plain
- Тип Замена : text / html
- откройте файловый браузер, который вы добавили url в правиле (на Шаге 3).
Если у вас есть проект angular или react в github, вы можете использоватьhttps://stackblitz.com/ для запуска приложения в интернете в вашем браузере.
введите имя пользователя и имя репозитория Github для просмотра приложения в интернете - stackblitz.com/github/{GITHUB_USERNAME} / {REPO_NAME}
Это работает даже без node_modules, загруженных в Github
В настоящее время поддержка проектов с использованием @angular/cli и create-react-app. Поддержка Ionic, Vue и пользовательские конфигурации webpack в ближайшее время!