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

本文翻译自:Can I run HTML files directly from GitHub, instead of just viewing their source?

If I have a .html file in a GitHub repository, eg for running aa set of JavaScript tests, is there any way I can view that page directly—thus running the tests? 如果我在GitHub存储库中有一个.html文件,例如用于运行一组JavaScript测试,我有什么方法可以直接查看该页面 - 从而运行测试?

For example, could I somehow actually see the test results that would be produced by the jQuery test suite , without downloading or cloning the repo to my local drive and running them there? 例如,我可以以某种方式实际看到由jQuery测试套件生成的测试结果,而无需将repo下载或克隆到我的本地驱动器并在那里运行它们吗?

I know this would basically put GitHub in the static content hosting business, but then again, they just have to change their mime-type from text/plain to text/html . 我知道这基本上会把GitHub放在静态内容托管业务中,但是再一次,他们只需要将他们的mime-type从text/plain更改为text/html


#1楼

参考:https://stackoom.com/question/RUKU/我可以直接从GitHub运行HTML文件-而不仅仅是查看它们的来源吗


#2楼

I had the same problem for my project Ratio.js and here's what I did. 我的项目Ratio.js遇到了同样的问题,这就是我所做的。

Problem: Github.com prevents files from rendering/executing when the source is viewed by setting the content type/MIME to plain text. 问题: Github.com通过将内容类型/ MIME设置为纯文本来防止在查看源时呈现/执行文件。

Solution: Have a web page import the files. 解决方案:让网页导入文件。

Example: 例:

Use jsfiddle.net or jsbin.com to create a webpage online then save it. 使用jsfiddle.netjsbin.com在线创建网页然后保存。 Navigate to your file in Github.com and click the 'raw' button to get the direct link to the file. 导航到Github.com中的文件,然后单击“原始”按钮以获取文件的直接链接。 From there, import the file using the appropriate tag and attribute. 从那里,使用适当的标记和属性导入文件。

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

Live Demo: http://jsfiddle.net/jKu4q/2/ 现场演示: http//jsfiddle.net/jKu4q/2/

Note: Note for jsfiddle.net you can get direct access to the result page by adding show to the end of the url. 注意:请注意,对于jsfiddle.net,您可以通过将show添加到url的末尾来直接访问结果页面。 Like so: http://jsfiddle.net/jKu4q/2/show 像这样: http//jsfiddle.net/jKu4q/2/show

Or....you could create a project page and render your HTML files from there. 或者......你可以创建一个项目页面并从那里渲染你的HTML文件。 You can create a project page at http://pages.github.com/ . 您可以在http://pages.github.com/上创建项目页面。

Once created you can then access the link through http://*accountName*.github.com/*projectName*/ Example: http://larrybattle.github.com/Ratio.js/ 一旦创建就可以再通过访问该链接http://*accountName*.github.com/*projectName*/例子: http://larrybattle.github.com/Ratio.js/


#3楼

You can either branch gh-pages to run your code or try this extension (Chrome, Firefox): https://github.com/ryt/githtml 您可以分支gh页面来运行您的代码或尝试此扩展程序(Chrome,Firefox): https//github.com/ryt/githtml

If what you need are tests, you could embed your JS files into: http://jsperf.com/ 如果你需要的是测试,你可以将你的JS文件嵌入: http//jsperf.com/


#4楼

There is a new tool called GitHub HTML Preview , which does exactly what you want. 有一个名为GitHub HTML Preview的新工具,可以完全满足您的需求。 Just prepend http://htmlpreview.github.com/? 只是前面http://htmlpreview.github.com/? to the URL of any HTML file, eg http://htmlpreview.github.com/?https://github.com/twbs/bootstrap/blob/gh-pages/2.3.2/index.html 到任何HTML文件的URL,例如http://htmlpreview.github.com/?https://github.com/twbs/bootstrap/blob/gh-pages/2.3.2/index.html

Note: This tool is actually a github.io page and is not affiliated with github as a company. 注意:此工具实际上是一个github.io页面,并且不与github作为公司关联。


#5楼

To piggyback on @niutech's answer, you can make a very simple bookmark snippet. 为了搭上@niutech的答案,你可以制作一个非常简单的书签片段。
Using Chrome, though it works similarly with other browsers 使用Chrome,虽然它与其他浏览器的工作方式类似

  1. Right click your bookmark bar 右键单击书签栏
  2. Click Add File 单击添加文件
  3. Name it something like Github HTML 将其命名为Github HTML
  4. For the URL type javascript:top.location="http://htmlpreview.github.com/?"+document.URL 对于URL类型javascript:top.location="http://htmlpreview.github.com/?"+document.URL
  5. When you're on a github file view page ( not raw.github.com ) click the bookmark link and you're golden. 当你在github文件视图页面( 而不是raw.github.com )上时,单击书签链接,你就是金色的。

#6楼

You might want to use raw.githack.com . 您可能想使用raw.githack.com It supports GitHub, Bitbucket, Gitlab and GitHub gists. 它支持GitHub,Bitbucket,Gitlab和GitHub。

GitHub GitHub上

Before: 之前:

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

In your case .html extension 在您的情况下.html扩展名

After: 后:

Development (throttled) 发展(受限制)

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

Production (CDN) 生产(CDN)

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

In your case .html extension 在您的情况下.html扩展名


raw.githack.com also supports other services: raw.githack.com还支持其他服务:

Bitbucket 到位桶

Before: 之前:

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

After: 后:

Development (throttled) 发展(受限制)

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

Production (CDN) 生产(CDN)

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

GitLab GitLab

Before: 之前:

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

After: 后:

Development (throttled) 发展(受限制)

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

Production (CDN) 生产(CDN)

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

GitHub gists GitHub要点

Before: 之前:

https://gist.githubusercontent.com/[user]/[gist]/raw/[revision]/[filename.ext]

After: 后:

Development (throttled) 发展(受限制)

https://gist.githack.com/[user]/[gist]/raw/[revision]/[filename.ext]

Production (CDN) 生产(CDN)

https://gistcdn.githack.com/[user]/[gist]/raw/[revision]/[filename.ext]


Update: rawgit was discontinued 更新:rawgit已停产

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值