我能否直接从GitHub运行HTML文件，而不仅仅是查看它们的源代码？

Question

我能否直接从GitHub运行HTML文件，而不仅仅是查看它们的源代码？

325

如果我在GitHub存储库中有一个.html文件，例如用于运行一组JavaScript测试，是否有任何方法可以直接查看该页面 - 从而运行测试？例如，我是否可以以某种方式实际查看由jQuery测试套件生成的测试结果，而无需下载或克隆该repo到我的本地驱动器并在那里运行它们？我知道这基本上将GitHub放入静态内容托管业务中，但是他们只需要将mime类型从text/plain更改为text/html即可。

- Domenic

2

哦，一个 GreaseMonkey 脚本能改变头部吗？ - Alex Howansky

1

你能更新一下这个问题的被采纳答案吗？现在有一种方法可以实现 - 请参考@niutech的回答... - Alex Dean

1

可能是在GitHub上托管的链接和执行外部JavaScript文件的重复问题。 - Troy Alford

2

可能是重复的问题：如何在GitHub上查看HTML页面以正常呈现的方式，以便在浏览器中预览而无需下载？ - Michael Freidgeim

12个回答

208

现有一个名为GitHub HTML Preview的新工具，可以满足你的需求。只需在任何HTML文件的URL前面添加http://htmlpreview.github.io/?，例如：http://htmlpreview.github.io/?https://github.com/twbs/bootstrap/blob/gh-pages/2.3.2/index.html

注意：该工具实际上是一个github.io页面，与Github公司无关。

- niutech

2

谢谢，这正是我所希望找到的。 - nana

4

私有仓库也可以实现这个吗？ - Björn Andersson

3

它可以正确加载相对路径，从而允许链接到github存储库中的JS/CSS。这太棒了。 - Nathan Lilienthal

@PyRulez，你能提供一个URL吗？ - niutech

哦，等等，算了。他们只提供了生成JavaScript代码的代码，没有放实际输出。 - PyRulez

显示剩余8条评论

20

在@niutech的答案基础上，你可以创建一个非常简单的书签片段。
虽然使用Chrome，但其他浏览器也可类似操作

右键点击您的书签栏
点击添加文件
将其命名为Github HTML
对于URL，输入javascript:top.location="http://htmlpreview.github.com/?"+document.URL
当您在github文件查看页面时（不是raw.github.com），点击书签链接即可。

- mraaroncruz

7

您可以通过分支gh-pages来运行您的代码，或尝试使用此扩展（Chrome，Firefox）：https://github.com/ryt/githtml 如果您需要测试，您可以将JS文件嵌入到http://jsperf.com/中。

- Gianluca Esposito

6

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

问题： Github.com将内容类型/MIME设置为纯文本，防止文件呈现/执行。

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

示例：

使用 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，您可以通过在url末尾添加show来直接访问结果页面。像这样：http://jsfiddle.net/jKu4q/2/show

或者....您可以创建一个项目页面并从那里渲染您的HTML文件。您可以在http://pages.github.com/上创建一个项目页面。

创建后，您可以通过http://*accountName*.github.com/*projectName*/访问该链接例如：http://larrybattle.github.com/Ratio.js/

- Larry Battle

1

使用JSFiddle让浏览器从Github加载文件的想法不错，但为什么不使用JSFiddle的“添加资源”呢？ - Filippo Vitale

@Filippo 很棒的想法！下次我会尝试一下。 - Larry Battle

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);

- James McGuigan

脚本 'cdn.rawgit.com' 的执行失败！$ 不是函数。 - xiaoyu2er

4

您可以通过修改响应头来轻松实现此操作，可以使用Chrome和Firefox扩展程序（例如Requestly）进行操作。

在Chrome和Firefox中：

安装Chrome版Requestly和Firefox版Requestly
添加以下标头修改规则:

a) Content-Type:
- 修改
- 响应
- 标头: Content-Type
- 值: text/html
- 源URL匹配: /raw\.githubusercontent\.com/.*\.html/
b) Content-Security-Policy:
- 修改
- 响应
- 标头: Content-Security-Policy
- 值: default-src 'none'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; script-src * 'unsafe-eval';
- 源URL匹配: /raw\.githubusercontent\.com/.*\.html/

- ostrokach

3

raw.github.com/user/repository 已经不存在了

为了链接到 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>

- Ami Ahmad Touseef

3

我希望在github上编辑html和js，并进行预览，以便实时提交和保存。尝试使用rawgithub.com，但它不是实时的（缓存每分钟刷新一次）。所以我快速开发了自己的解决方案：node.js解决方案可在此处找到：https://github.com/shimondoodkin/rawgithub。

- Shimon Doodkin

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 配置即将推出！

- sujithuix

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- chmanie · Accepted Answer

您可能希望使用raw.githack.com。它支持GitHub、Bitbucket、Gitlab和GitHub gists。

GitHub

Before:

https://raw.githubusercontent.com/[user]/[repository]/[branch]/[filename.ext]

在您的情况下，扩展名为.html

After:

开发环境（受限）

https://raw.githack.com/[user]/[repository]/[branch]/[filename.ext]

生产环境（CDN）

https://rawcdn.githack.com/[user]/[repository]/[branch]/[filename.ext]

在您的情况下，扩展名为.html

raw.githack.com 还支持其他服务：

Bitbucket

Before:

https://bitbucket.org/[user]/[repository]/raw/[branch]/[filename.ext]

After:

开发环境（受限）

https://bb.githack.com/[user]/[repository]/raw/[branch]/[filename.ext]

生产环境（CDN）

https://bbcdn.githack.com/[user]/[repository]/raw/[branch]/[filename.ext]

GitLab

Before:

https://gitlab.com/[user]/[repository]/raw/[branch]/[filename.ext]

After:

开发环境（受限）

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已停用