web-dev-qa-db-ja.com

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

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

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

私はこれが基本的にGitHubを静的コンテンツホスティングビジネスにすることを知っています、しかしそれでもまた、彼らはちょうど彼らのMIMEタイプを text/plain からtext/htmlに変える必要があります。

javascripthtmlgithub
286
Domenic

あなたは 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 その他のサービスもサポートしています。

ビットバケット

前：

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は中止されました

347
chmanie

GitHub HTML Preview という新しいツールがあります。 HTMLファイルのURLの前にhttp://htmlpreview.github.com/?を付けるだけです。 http://htmlpreview.github.com/?https://github.com/twbs/bootstrap/blob/gh-pages/2.3.2/index.html

注：このツールは実際にはgithub.ioページであり、企業としてのgithubとは提携していません。

190
niutech

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

  1. ブックマークバーを右クリック
  2. クリックファイルを追加
  3. Github HTMLのような名前を付けてください
  4. URLの場合javascript:top.location="http://htmlpreview.github.com/?"+document.URL
  5. Githubファイルビューページ（not raw.github.com）を開いているときは、ブックマークリンクをクリックしてください。
16
mraaroncruz

Gh-pagesを分岐してコードを実行するか、この拡張機能を試すことができます（Chrome、Firefox）。 https://github.com/ryt/githtml

テストが必要な場合は、JSファイルを以下に埋め込むことができます。 http://jsperf.com/

7
Gianluca Esposito

私は自分のプロジェクトで同じ問題を抱えていました Ratio.js そしてこれが私がしたことです。

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

解決策：Webページでファイルをインポートしてください。

例：

Webページをオンラインで作成して保存するには、 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では、URLの末尾にshowを追加すると、結果ページに直接アクセスできます。のように： http://jsfiddle.net/jKu4q/2/show

あるいは、プロジェクトページを作成し、そこからHTMLファイルをレンダリングすることもできます。プロジェクトページは http://pages.github.com/ で作成できます。

作成したら、http://*accountName*.github.com/*projectName*/を通じてリンクにアクセスできます。例： http://larrybattle.github.com/Ratio.js/

6
Larry Battle

これは、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);
4
James McGuigan

Requestly のようにChromeとFirefoxの拡張機能で行うことができるレスポンスヘッダの修正によってこれを簡単に行うことができます。

ChromeとFirefoxの場合：

  1. インストール Chromeに要求 と Firefoxに要求

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

    enter image description here

    a）コンテンツタイプ：

    • 修正する
    • 応答
    • ヘッダ：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/
3
ostrokach

私はgithubでhtmlとjsを編集してプレビューしたいと思いました。私は即座にコミットして保存するためにgithubでそれをやりたかった。

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

だから私はすぐに私自身の解決策を開発しました：

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

3
Shimon Doodkin

raw.github.com/user/repository 現在は存在しません

Hithをgithubのソースコードにリンクするには、このように生のソースへのgithubリンクを使用する必要があります。

raw.githubusercontent.com/user/repository/master/file.extension

EXAMPLE

<html>
...
...
<head>    
<script src="https://raw.githubusercontent.com/amiahmadtouseef/tutorialhtmlfive/master/petdecider/script.js"></script>
...
</head>
<body>
...
</html>
2
Ami Ahmad Touseef

Githubで角度付きプロジェクトまたは反応型プロジェクトを使用している場合は、 https://stackblitz.com/ を使用してブラウザでアプリケーションをオンラインで実行できます。

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

Node_ModulesがGithubにアップロードされていなくてもこれは機能します。

現在@ angular/cliとcreate-react-appを使ったプロジェクトをサポートしています。 Ionic、Vue、そしてカスタムWebPackの設定のサポートは近日公開予定です。

1
sujithuix

クロムブラウザ専用のこのソリューション。他のブラウザについてはよくわかりません。

  1. クロムブラウザに "Modify Content-Type Options"拡張子を追加します。
  2. ブラウザで "chrome-extension：//jnfofbopfpaoeojgieggflbpcblhfhka/options.html"のURLを開きます。
  3. 生ファイルのURLのルールを追加します。例えば：
    • URLフィルタ：https：///raw/master//fileName.html
    • 元のタイプ：テキスト/プレーン
    • 代替タイプ：text/html
  4. URLをルールで追加したファイルブラウザを開きます（手順3）。
1
Vijay