【问题标题】:Can I run HTML files directly from GitHub, instead of just viewing their source?我可以直接从 GitHub 运行 HTML 文件,而不仅仅是查看它们的源代码吗?
【发布时间】:2011-09-26 22:39:42
【问题描述】:

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

例如,我能否以某种方式实际看到the jQuery test suite 生成的测试结果,而无需将存储库下载或克隆到我的本地驱动器并在那里运行它们?

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

【问题讨论】:

标签: javascript html github


【解决方案1】:

有一个名为GitHub HTML Preview 的新工具,它完全可以满足您的需求。只需将 http://htmlpreview.github.io/? 添加到任何 HTML 文件的 URL,例如http://htmlpreview.github.io/?https://github.com/twbs/bootstrap/blob/gh-pages/2.3.2/index.html

注意:此工具实际上是一个 github.io 页面,并不隶属于 github 作为公司。

【讨论】:

  • 感谢正是我希望找到的。
  • 私人仓库也可以这样做吗?
  • 不适用于框架(Javadoc):htmlpreview.github.com/?https://github.com/MartinThoma/… :-(
  • 它不适用于通过 chrome 上的 javascript 加载的相关图像。 Cross-origin image load denied by Cross-Origin Resource Sharing policy.
  • 它正确加载相对路径,允许链接到 github 存储库内的 JS/CSS。这太棒了。
【解决方案2】:

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

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

【讨论】:

  • 是的,谢谢你添加这个,因为很久以前问这个问题我切换到这个服务。让我们让你接受答案:)。
  • 仅供参考:出于显而易见的原因,这似乎根本不适用于私人回购。
  • 它似乎没有加载 javascript。
  • 由于某种原因,我的 HTML 页面上没有 text/html 内容类型,所以它只显示源代码:(
  • 编辑后这个答案是完全错误的。 jsDelivr 不允许您直接运行 HTML 文件。它只显示 HTML 文件的纯文本。它仅适用于 js 或 css 文件。对于那些正在寻找答案的人,请使用 raw.githack.com,因为它是 rawgit 的克隆。
【解决方案3】:

如果您在 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 配置!

【讨论】:

    【解决方案4】:

    您可以通过修改响应标头轻松做到这一点,这可以通过 Chrome 和 Firefox 扩展程序(如 Requestly)来完成。

    在 Chrome 和 Firefox 中:

    1. 安装Requestly for ChromeRequestly for 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/

    【讨论】:

    【解决方案5】:

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

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

    【讨论】:

      【解决方案6】:

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

      【讨论】:

      • 脚本“cdn.rawgit.com”执行失败! $ 不是函数
      【解决方案7】:

      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>
      

      【讨论】:

        【解决方案8】:

        我想在 github 中编辑 html 和 js 并进行预览。 我想在 github 中进行即时提交和保存。

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

        所以我很快开发了自己的解决方案:

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

        【讨论】:

          【解决方案9】:

          要搭载@niutech 的答案,您可以制作一个非常简单的书签 sn-p。
          使用 Chrome,尽管它与其他浏览器类似

          1. 右键单击您的书签栏
          2. 点击添加文件
          3. 将其命名为 Github HTML
          4. 对于 URL 输入 javascript:top.location="http://htmlpreview.github.com/?"+document.URL
          5. 当您在 github 文件查看页面 (not raw.github.com) 上时,点击书签链接,您就完美了。

          【讨论】:

            【解决方案10】:

            您可以分支 gh-pages 来运行您的代码或尝试使用此扩展程序(Chrome、Firefox): https://github.com/ryt/githtml

            如果你需要的是测试,你可以将你的 JS 文件嵌入到: http://jsperf.com/

            【讨论】:

              【解决方案11】:

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

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

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

              示例:

              使用jsfiddle.netjsbin.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/

              【讨论】:

              • 好主意使用 js fiddle 让浏览器从 github 加载文件,但为什么不使用 JSFiddle 的“添加资源”呢?
              • @Filippo 好主意!下次我会试试的。
              猜你喜欢
              • 1970-01-01
              • 2010-09-20
              • 1970-01-01
              • 1970-01-01
              • 2020-06-04
              • 2011-05-23
              • 2018-02-10
              • 2011-11-12
              相关资源
              最近更新 更多