我可以直接从GitHub运行HTML文件，而不仅仅是查看其源代码吗？

300

如果我.html在GitHub存储库中有一个文件（例如，用于运行一组JavaScript测试），我是否可以通过任何方式直接查看该页面，从而运行测试？

例如，我是否能以某种方式实际看到jQuery测试套件所产生的测试结果，而无需将存储库下载或克隆到本地驱动器并在其中运行呢？

我知道这基本上会将GitHub置于静态内容托管业务中，但话又说回来，他们只需要将其mime类型从更改为text/plain即可text/html。

javascript  html  github 
— 多米尼克
source
2
嗯... GreaseMonkey脚本可以更改标题吗？
— Alex Howansky 2011年
1
您可以在这个答案上更新接受的答案吗？现在有一种方法可以执行此操作-参见@niutech的答案...
— Alex Dean
1
— Troy Alford 2014年
— Michael Freidgeim '18

Answers:

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还支持其他服务：

比特桶

之前：

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]

亚搏体育app

之前：

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
source
是的，感谢您添加此内容，因为很久以前我问了这个问题，所以我切换到了此服务。让我们为您解答：)。
— Domenic 2013年
13
仅供参考：出于明显的原因，这对于私人回购似乎根本不起作用。
— rfay
它似乎没有加载javascript。
— PyRulez
1
由于某种原因，我在HTML页面上没有得到text / html内容类型，因此它只显示源:(
— benji
1
编辑后，此答案是完全错误的。jsDelivr不允许您直接运行HTML文件。它仅显示HTML文件的纯文本。仅适用于js或CSS文件。对于那些寻找答案的人，请使用raw.githack.com，因为它是rawgit的副本。
— 斯潘塞·维克佐雷克
194

有一个名为GitHub HTML Preview的新工具，它可以完全满足您的需求。只需添加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无关。

— 纽泰
source
2
正是我希望找到的谢谢。
— 娜娜2012年
2
私人回购交易也可能吗？
— 比昂·安德森
不适用于框架（Javadoc）：htmlpreview.github.com/?https : //github.com/MartinThoma/… :-(
— Martin Thoma，
它不适用于通过Chrome在chrome上加载的相对图像。Cross-origin image load denied by Cross-Origin Resource Sharing policy.
— ubershmekel
3
它会正确加载相对路径，从而允许链接到github存储库内部的JS / CSS。这是太棒了。
— 内森·利连塔尔
18

要piggy带@niutech的答案，您可以制作一个非常简单的书签片段。
使用Chrome，尽管与其他浏览器类似

  1. 右键点击您的书签栏
  2. 点击添加文件
  3. 将其命名为Github HTML
  4. 对于URL类型javascript:top.location="http://htmlpreview.github.com/?"+document.URL
  5. 当您在github文件查看页面（不是raw.github.com）上时，单击书签链接，您会很高兴。
— 姆拉龙克鲁兹
source
6

我的项目Ratio.js遇到了同样的问题，这就是我所做的。

问题： 通过将内容类型/ MIME设置为纯文本，Github.com防止在查看源时渲染/执行文件。

解决方案： 让网页导入文件。

例：

使用jsfiddle.net或jsbin.com在线创建一个网页，然后将其保存。在Github.com上导航到您的文件，然后单击“原始”按钮以获取该文件的直接链接。从那里，使用适当的标记和属性导入文件。

<!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/

— 拉里·巴特
source
1
好主意使用js小提琴让浏览器从github加载文件，但是为什么不使用JSFiddle的“添加资源”呢？
— Filippo Vitale
@Filippo好主意！下次我会尝试的。
— 拉里·
4

这是一个Greasemonkey脚本，它将为github上的html页面添加一个CDN按钮。

目标页面的格式为：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);
— 詹姆斯·麦圭根
source
脚本“ cdn.rawgit.com”的执行失败！$不是函数
— xiaoyu2er
4

您可以通过修改响应标题轻松地做到这一点，这可以通过Chrome和Firefox扩展（如Requestly）来完成。

在Chrome和Firefox中：

  1. 请求安装Chrome浏览器和请求安装Firefox

  2. 添加以下标头修改规则：

    在此处输入图片说明

    a）内容类型：

    • 修改
    • 响应
    • 标头： Content-Type
    • 值： text/html
    • 源网址匹配： /raw\.githubusercontent\.com/.*\.html/


    b）内容安全策略：

    • 修改
    • 响应
    • 标头： Content-Security-Policy
    • 值： default-src 'none'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; script-src * 'unsafe-eval';
    • 源网址匹配： /raw\.githubusercontent\.com/.*\.html/
— 奥斯特罗卡奇
source
只是为了提供信息，您还可以共享规则作为公共Urls。在这种情况下，您只需创建此规则并与其他用户共享即可。其他请求用户可以直接导入并开始使用它。检查一下：requestly.in/documentation/introducing-shared-list
— sachinjain024 '16
无法在上方编辑我的评论，因此添加了另外一个用于发布文档的新链接：requestly.in/content/documentation/introducing-shared-list
— sachinjain024
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>
— 阿米·艾哈迈德Touseef
source
2

如果您在github中有一个angular或react项目，则可以使用https://stackblitz.com/在浏览器中在线运行该应用程序。

输入您的Github用户名和存储库名称以在线查看应用程序-stackblitz.com/github/{GITHUB_USERNAME}/{REPO_NAME}

即使没有将Node_Modules上传到Github，这也可以工作

当前支持使用@ angular / cli和create-react-app的项目。对Ionic，Vue和自定义Webpack配置的支持即将推出！

— 苏uji
source
1

此解决方案仅适用于chrome浏览器。我不确定其他浏览器。

  1. 在Chrome浏览器中添加“修改内容类型选项”扩展名。
  2. 在浏览器中打开“ chrome-extension：//jnfofbopfpaoeojgieggflbpcblhfhka/options.html” URL。
  3. 添加原始文件网址的规则。例如：
    • 网址过滤器：https：///raw/master//fileName.html
    • 原始类型：文字/纯文字
    • 替换类型：text / html
  4. 打开在规则中添加了URL的文件浏览器（在步骤3中）。
— 维杰
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.