Чи можу я запускати HTML-файли безпосередньо з GitHub, а не просто переглядати їх джерело?

300

Якщо у мене є .htmlфайл у сховищі GitHub, наприклад, для запуску набору тестів JavaScript, чи є можливість я переглядати цю сторінку безпосередньо - таким чином запускаючи тести?

Наприклад, чи можу я якось насправді побачити результати тестів, які будуть створені тестовим набором jQuery , не завантажуючи і не клонуючи репо на мій локальний привід і запускаючи їх там?

Я знаю, що це в основному покладе GitHub в бізнес зі стаціонарним вмістом, але знову ж таки, їм просто доведеться змінити свій тип mime з text/plainна text/html.

javascript  html  github 
— Доменіка
джерело
2
Гм ... може сценарій GreaseMonkey змінити заголовки?
— Олексій Хованський
1
Чи можете ви оновити прийняту відповідь на цьому? Зараз є спосіб зробити це - див. Відповідь @ niutech ...
— Алекс Дін
1
— Troy Alford,
— Майкл Фрейджім

Відповіді:

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 було припинено

— чманіє
джерело
Дякую, що додали це, оскільки давно задавши це питання, я перейшов на цю службу. Давайте зробимо вам прийняту відповідь :).
— Доменік
13
Просто ПІІ: Схоже, це взагалі не працює в приватних репортажах з очевидних причин.
— rfay
Схоже, він не завантажує javascript.
— PyRulez
1
Чомусь я не отримую тип вмісту text / 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.

— нітех
джерело
2
Дякую саме те, що я сподівався знайти.
— nana
2
Чи можливо це також на приватних репортажах?
— Бьорн Андерссон
Не працює з кадрами (Javadoc): htmlpreview.github.com/?https://github.com/MartinThoma/… :-(
— Мартін Тома
Він не працює з відносними зображеннями, завантаженими через JavaScript на хром. Cross-origin image load denied by Cross-Origin Resource Sharing policy.
— ubershmekel
3
Він завантажує відносні шляхи належним чином, забезпечуючи посилання на JS / CSS всередині сховища github. Це фантастично.
— Натан Ліліенталь
18

Щоб виправити відповідь на відповідь @ niutech, ви можете зробити дуже простий фрагмент закладок.
Використання Chrome хоч і працює аналогічно з іншими браузерами

  1. Клацніть правою кнопкою миші панель закладок
  2. Клацніть Додати файл
  3. Назвіть це щось на кшталт Github HTML
  4. Для типу URL-адресиjavascript:top.location="http://htmlpreview.github.com/?"+document.URL
  5. Коли ви перебуваєте на сторінці перегляду файлів github ( не raw.github.com ), натисніть посилання закладки, і ви золото.
— mraaroncruz
джерело
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?
— Філіппо Вітале
@Filippo Чудова ідея! Я спробую це наступного разу.
— Битва Ларрі
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:

  1. Встановіть Requestly для Chrome та Requestly для Firefox

  2. Додайте такі правила зміни заголовків :

    введіть тут опис зображення

    а) Тип вмісту :

    • Змінити
    • Відповідь
    • Заголовок: Content-Type
    • Значення: text/html
    • Джерело збігів URL: /raw\.githubusercontent\.com/.*\.html/


    b) Політика щодо захисту вмісту :

    • Змінити
    • Відповідь
    • Заголовок: Content-Security-Policy
    • Значення: default-src 'none'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; script-src * 'unsafe-eval';
    • Джерело збігів URL: /raw\.githubusercontent\.com/.*\.html/
— острокач
джерело
Тільки для інформації ви також можете поділитися своїми правилами як Public Urls. У цьому випадку ви можете просто створити це правило та поділитися з іншими користувачами. Інші запитані користувачі можуть безпосередньо імпортувати його та почати його використовувати. Перевірте це: requestly.in/documentation/introducing-shared-list
— sachinjain024
Неможливо змінити мій коментар вище, тому додавання ще один для розміщення нової посилання документації: requestly.in/content/documentation/introducing-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/{GITHUB_USERNAME}/{REPO_NAME}

Це працює навіть без Node_Modules, завантажених у Github

В даний час підтримуйте проекти, використовуючи @ angular / cli та create-react-app. Підтримка конфігурацій Ionic, Vue та налаштованих веб-пакетів незабаром!

— sujithuix
джерело
1

Це рішення лише для браузера Chrome. Я не впевнений в іншому браузері.

  1. Додайте розширення "Змінити параметри типу вмісту" у веб-переглядачі Chrome.
  2. Відкрийте "chrome-extension: //jnfofbopfpaoeojgieggflbpcblhfhka/options.html" URL-адреса в браузері.
  3. Додайте правило для URL-адреси сирого файлу. Наприклад:
    • Фільтр URL-адрес: https: ///raw/master//fileName.html
    • Тип оригіналу: текст / звичайний
    • Тип заміни: текст / html
  4. Відкрийте браузер файлів, до якого ви додали URL-адресу, як правило (на кроці 3).
— Віджай
джерело
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.