ソースを表示するだけでなく、GitHubから直接HTMLファイルを実行できますか？

300

.htmlたとえば、一連のJavaScriptテストを実行するためにGitHubリポジトリにファイルがある場合、そのページを直接表示する方法はありますか？テストを実行しますか？

たとえば、リポジトリをダウンロードしたり、ローカルドライブに複製してそこで実行したりせずに、jQueryテストスイートによって生成されるテスト結果を実際にどうにかして確認できますか？

これは基本的にGitHubを静的コンテンツホスティングビジネスに使用することを知っていますが、繰り返しになりますが、MIMEタイプをからtext/plainに変更する必要がありtext/htmlます。

javascript  html  github 
— ドメニック
ソース
2
うーん... GreaseMonkeyスクリプトはヘッダーを変更できますか？
— Alex Howansky
1
これで承認された回答を更新できますか？これを行う方法があります
— Alex Dean
1
— Troy Alford
— Michael Freidgeim

回答:

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要旨

前：

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
ソース
ええ、これを追加してくれてありがとう。ずっと前にこの質問をしていたので、私はこのサービスに切り替えました。受け入れられた答えを作ってみましょう:)
— Domenic 2013年
13
参考までに：これは、明らかな理由により、プライベートリポジトリではまったく機能しないようです。
— rfay
JavaScriptをロードしていないようです。
— PyRulez 2013
1
何らかの理由で、HTMLページにtext / htmlコンテンツタイプが表示されないため、ソースが表示されるだけです:(
— benji
1
編集後、この答えは完全に間違っています。jsDelivrでは、HTMLファイルを直接実行することはできません。HTMLファイルのプレーンテキストのみを表示します。jsファイルまたはcssファイルのみを対象としています。答えを探している人はraw.githack.comを使用してください。これはrawgitのクローンです。
— Spencer Wieczorek
194

GitHub HTMLプレビューと呼ばれる新しいツールがあり、まさにあなたが望んでいることを行います。http://htmlpreview.github.com/?HTMLファイルのURLの前に追加するだけです（例：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/… :-(
— Martin Thoma
クロムのJavaScriptを介して読み込まれた相対画像では機能しません。Cross-origin image load denied by Cross-Origin Resource Sharing policy.
— ubershmekel 2013
3
相対パスを適切にロードし、githubリポジトリ内のJS / CSSにリンクできるようにします。これは素晴らしいです。
— Nathan Lilienthal
18

@niutechの答えに便乗するために、非常に単純なブックマークスニペットを作成できます。
Chromeを使用しますが、他のブラウザでも同様に機能します

  1. ブックマークバーを右クリック
  2. [ ファイルを追加]をクリックします
  3. Github HTMLのような名前を付けます
  4. 以下のためのURLのタイプjavascript:top.location="http://htmlpreview.github.com/?"+document.URL
  5. githubファイルビューページ（raw.github.comではない）にいるときは、ブックマークリンクをクリックすれば、すばらしい結果が得られます。
— ムラロンクルス
ソース
6

私のプロジェクトで同じ問題が発生しました。Ratio.jsです。

問題： Github.comは、コンテンツタイプ/ MIMEをプレーンテキストに設定することにより、ソースが表示されるときにファイルがレンダリング/実行されないようにします。

解決策： Webページでファイルをインポートします。

例：

使用jsfiddle.netまたはjsbin.comそれを保存し、オンラインWebページを作成します。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の「リソースの追加」を使用しないのですか？
— フィリッポヴィターレ2012年
@フィリッポ素晴らしいアイデア！次回もやってみます。
— ラリーバトル
4

これは、GithubのhtmlページにCDNボタンを追加する小さなGreasemonkeyスクリプトです。

ターゲットページは次の形式になります：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 2017
4

これは、RequestlyのようなChromeおよびFirefoxの拡張機能で実行できる応答ヘッダーを変更することで簡単に行うことができます。

ChromeとFirefoxの場合：

  1. インストールクロームのためRequestlyとFirefox用Requestly

  2. 次のヘッダー変更ルールを追加します。

    ここに画像の説明を入力してください

    a）Content-Type：

    • 修正
    • 応答
    • ヘッダ： 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/
— オストロカハ
ソース
情報だけで、ルールをパブリックURLとして共有することもできます。この場合、このルールを作成して他のユーザーと共有できます。他の要求の厳しいユーザーは、それを直接インポートして使用を開始できます。これを確認してください：requestly.in/documentation/introducing-shared-list
— sachinjain024
上記の私のコメントを編集できません。ドキュメントの新しいリンクを投稿するために別のコメントを追加してください：requestly.in/content/documentation/introducing-shared-list
— sachinjain024
3

githubでhtmlとjsを編集してプレビューしたかったのです。私はgithubでそれを行い、即座にコミットして保存したかったのです。

rawgithub.comを試しましたが、rawgithub.comはリアルタイムではありませんでした（キャッシュは1分に1回更新されます）。

だから私はすぐに自分のソリューションを開発しました：

このためのnode.jsソリューション：https : //github.com/shimondoodkin/rawgithub

— Shimon Doodkin
ソース
2

raw.github.com/user/repository はもうありません

github内のソースコードにhrefをリンクするには、次のようにgithub linkを使用してrawソースにアクセスする必要があります。

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にAngularプロジェクトまたはReactプロジェクトがある場合は、https： //stackblitz.com/を使用して、ブラウザーでアプリケーションをオンラインで実行できます。

アプリケーションをオンラインで表示するには、Githubのユーザー名とリポジトリ名を入力してください-stackblitz.com/github/{GITHUB_USERNAME}/{REPO_NAME}

これは、GithubにNode_Modulesをアップロードしなくても機能します

現在、@ angular / cliとcreate-react-appを使用してプロジェクトをサポートしています。Ionic、Vue、およびカスタムWebpack構成のサポートがまもなく登場します！

— sujithuix
ソース
1

このソリューションはChromeブラウザ専用です。他のブラウザについてはわかりません。

  1. Chromeブラウザに「コンテンツタイプオプションの変更」拡張機能を追加します。
  2. ブラウザで「chrome-extension：//jnfofbopfpaoeojgieggflbpcblhfhka/options.html」のURLを開きます。
  3. 未加工ファイルのURLのルールを追加します。例えば：
    • URLフィルター：https：///raw/master//fileName.html
    • 元のタイプ：テキスト/プレーン
    • 置換タイプ：text / html
  4. ルールでURLを追加したファイルブラウザを開きます（ステップ3）。
— ビジェイ
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.