我可以直接从GitHub运行HTML文件，而不仅仅是查看它们的源代码吗?

如果我在GitHub存储库中有一个.html文件，例如，用于运行一组JavaScript测试，有什么方法可以直接查看该页面，从而运行测试?

例如，我能以某种方式看到jQuery测试套件产生的测试结果，而不下载或克隆回购到本地驱动器并在那里运行它们吗?

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

168580 次浏览
小开

我的项目Ratio.js也遇到了同样的问题，下面是我所做的。

< >强的问题: Github.com通过将内容类型/MIME设置为纯文本来防止文件在查看源代码时呈现/执行

<强>解决方案: 使用网页导入文件。< / p >

例子:

使用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>
< p >现场演示: http://jsfiddle.net/jKu4q/2/ < / p > 注意，对于jsfiddle.net，你可以通过在url末尾添加show来直接访问结果页面。 http://jsfiddle.net/jKu4q/2/show

< p >还是……你可以创建一个项目页面，并从那里渲染你的HTML文件。 你可以在http://pages.github.com/创建一个项目页面 一旦创建，你就可以通过http://*accountName*.github.com/*projectName*/访问链接 例如:http://larrybattle.github.com/Ratio.js/ < / p >
小开
你可以分支gh-pages来运行你的代码或尝试这个扩展(Chrome, Firefox): https://github.com/ryt/githtml < / p > 如果你需要的是测试，你可以将JS文件嵌入到: http://jsperf.com/ < / p >
小开

有一个名为GitHub HTML预览的新工具，它可以做你想要的事情。只要在任何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的答案，你可以做一个非常简单的书签片段 使用Chrome，虽然它与其他浏览器工作类似

  1. 右击书签栏
  2. 单击添加文件
  3. 命名为Github HTML之类的
  4. 对于URL类型javascript:top.location="http://htmlpreview.github.com/?"+document.URL
  5. 当你在一个github文件视图页面(不是raw.github.com)点击书签链接，你是黄金。
小开
最佳答案

你可能想要使用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已经停产

小开

我想编辑HTML和js在github和有预览。 我想在github中做它，有即时提交和保存

尝试rawgithub.com，但rawgithub.com不是实时的(它的缓存每分钟刷新一次)。

所以我很快想出了自己的解决方案:

node.js的解决方案:https://github.com/shimondoodkin/rawgithub

小开

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>
小开

这是一个小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);
小开

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

  1. 在chrome浏览器中添加“修改内容类型选项”扩展。
  2. 在浏览器中打开“chrome-extension:// jnfbopfpaoeojgieggflbpcblhfhka /options.html”url。
  3. 为原始文件url添加规则。 例如:
    • URL过滤器:https:///raw/master//fileName.html
    • 原始类型:文本/纯
    • 替换类型:text/html
      • 李< / ul > < / >
    • 打开您在规则(步骤3)中添加url的文件浏览器。
小开

你可以通过修改响应报头轻松做到这一点，这可以用Chrome和Firefox扩展如请求来完成。

在Chrome和Firefox中:

  1. 安装请求Chrome和请求Firefox . in/" rel="nofollow noreferrer">

  2. 添加以下报头文件修改规则:

    enter image description here

    一)内容类型:

    • 修改
    • 响应
    • 标题:Content-Type
    • 价值:text/html
    • 源Url匹配:/raw\.githubusercontent\.com/.*\.html/

    < br >

    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/
      • 李< / ul > < / >
小开

如果你在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配置的支持即将到来!

小开

Github有一个名为Github pages的静态页面托管服务，你可以在设置下找到它，然后选择页面，并选择你想要为页面使用的分支并点击保存。


提交答案