如何在Github上查看HTML页面，以便作为普通的渲染HTML页面在浏览器中预览，而无需下载？

Question

15 浏览2023年1月15日

匿名的 2023年1月16日

0 Comments

在http://github.com上，开发者保存了项目的HTML、CSS、JavaScript和图片文件。我如何在浏览器中查看HTML输出？

例如：https://github.com/necolas/css3-social-signin-buttons/blob/master/index.html

当我打开它时，它不会显示作者代码的渲染后的HTML，而是以源代码的形式显示页面。

有没有可能直接查看渲染后的HTML？否则，我总是需要下载整个ZIP文件才能看到结果。

0

3 答案

匿名的 · Answer 1 · 2023-06-29T01:33:07+00:00

如何在GitHub上查看HTML页面作为正常呈现的HTML页面以在浏览器中预览，而无需下载？

GitHub提供了一个功能叫做GitHub Pages，可以用来渲染HTML页面，以便在浏览器中预览。以下是使用GitHub Pages的步骤：

1. 首先，在GitHub上将仓库fork到你的账户下。

2. 将该仓库克隆到本地机器上。

3. 创建一个名为`gh-pages`的分支（如果已存在该分支，则先删除它，然后基于`master`分支创建新的`gh-pages`分支）。

4. 将分支推送回GitHub。

5. 在浏览器中访问`http://.github.io/`，即可查看页面。

以下是代码示例：

git clone git.com:username/repo.git
cd repo
git branch gh-pages
# 如果需要，先执行下面的命令删除分支：git branch -D gh-pages
git push -u origin gh-pages # 将新的分支推送回GitHub
访问 http://username.github.io/repo

如果你fork了一个项目，现在想将它复制到GitHub Pages上，可以按照以下步骤进行操作：

1. 根据这个文档（https://help.github.com/articles/creating-project-pages-manually），将项目复制到GitHub Pages上。

2. 为了安全起见，在创建项目页面时，先创建一个`master`分支并进行克隆，然后再进行其他操作。

3. 如果只想创建一个`gh-pages`分支，而不对`master`分支进行任何操作，可以使用`checkout --orphan gh-pages`命令来创建并推送这个分支。

另外，你也可以在仓库的设置中选择要发布的分支，在第一个选项卡（选项）的底部进行设置。如果`gh-pages`分支存在，则默认选择该分支；否则禁用该选项。你可以选择`master`或其他任意分支作为发布分支。

以上就是如何在GitHub上以正常呈现的HTML页面形式查看HTML页面的方法。通过使用GitHub Pages，你可以方便地在浏览器中预览HTML页面，而无需下载。

匿名的 · Answer 2 · 2023-04-09T10:06:25+00:00

[标题]如何在Github上查看HTML页面以正常渲染HTML页面以在浏览器中预览，而不需要下载？

[原因]RawGit已经达到了其有用生命周期的尽头，即将关闭，不再提供新的仓库服务。

[解决方法]可以使用RawGit的替代方案raw.githack.com，它提供了更好的服务，包括正确的Content-Type头和用于生产环境的CDN URL。它还能够显示一些在htmlpreview中无法正常工作的交互功能，如工具提示。但需要注意的是，RawGit的使用应限于低流量测试或在开发过程中与少数人分享临时演示。对于可能导致大量流量或被人复制粘贴到自己代码中的内容，请使用cdn.rawgit.com。此外，还有一个替代方案是raw.githack.com。

以上是从相关讨论中整理出的答案，希望对大家在Github上查看HTML页面提供一些帮助。

匿名的 · Answer 3 · 2023-01-26T15:56:30+00:00

如何在Github上查看HTML页面作为正常渲染的HTML页面以在浏览器中预览，而无需下载？

在Github上预览HTML文件最舒适的方式是访问https://htmlpreview.github.io/，或者只需在原始URL前加上它，即：https://htmlpreview.github.io/?https://github.com/bartaz/impress.js/blob/master/index.html

这是因为浏览器和URL的问题。目前，它仅支持Webkit和Gecko浏览器。

抱歉，Firefox 3.6太旧，无法支持。也就是说，如果你决心的话，可以尝试打开Firebug进行调试。

有没有办法在私有存储库上做到这一点？我不想将我的私有URL与令牌粘贴到那个工具中。虽然这是一个很好的工具。

HTMLPreview是开源的，并且不保存任何历史记录，所以除了Github和Yahoo之外，没有人会知道您是否粘贴了私有URL。

在URL前添加htmlpreview会产生一个错误，404 There isn't a GitHub Page here.抱歉，我的错，应该在前面添加http://htmlpreview.github.com/?而不仅仅是htmlpreview。

请注意，这仅适用于公共存储库。私有存储库会显示错误消息Error: Cannot load file。

htmlpreview.github.com在渲染JavaScript和CSS方面存在问题。替代的rawgit.com效果更好，可以正确提供Content-Type标头的文件。

但是RawGit是一个第三方代理，有可能会消失，而github.com则不会。哪个URL无法正常工作？

http://htmlpreview.github.io/?https://github.com/nuxeo/nuxeo.github.io/blob/7.1/downloads.html

http://htmlpreview.github.io/?https://github.com/Startouf/IBDV/blob/master/Site/index.html不会显示我的WebGL动画！Cyril DD：问题出在AJAX响应中的Access-Control-Allow-Origin头，被浏览器阻止。很抱歉，我对此无能为力。

这个站点在不同的编码上工作不好。加载一个在中正确声明的windows-1250页面会导致错误的编码。

你好，有没有类似的工具来显示markdown文件？

很好的解决办法，谢谢！我在README.md文件中添加了链接前缀，它可以很好地渲染我的nb.html文件。这是页面的链接，如果有人想看看它是如何工作的：github.com/sargdavid/snippets.cvi和htmlpreview.github.io/?https://github.com/sargdavid/…

它现在适用于Github Enterprise :-)只需在存储库的设置中启用它，位于“GitHub Pages”设置下。然后，设置页面将给出相关链接。（显然，通常只需在url前加上pages.即可。但不用担心，启用后配置页面会给出正确的url）

你的例子htmlpreview.github.io/?https://github.com/bartaz/impress.js/…不起作用htmlpreview.min.js:1 A parser-blocking, cross site (i.e. different eTLD+1) script. See chromestatus.com/feature/5718547946799104 for more details.

看起来这个解决方法在2018年12月底至今停止工作，然而我们仍然有stackoverflow.com/a/8446391/860099

真可惜没有一个渲染器/查看按钮，但后来我意识到你不能为每种类型都有一个查看按钮（但是仍然很好）

将提供的链接更新为https（安全）协议而不是http是否有用？我刚意识到过去的几个链接我一直错过了这个明显的问题，但这可能只是我作为唯一一个黑暗复制粘贴怪物在做事情

如果您使用此服务并且在React的react-router-dom上遇到问题-只需尝试使用。

你依赖外部网站来解决你的浏览器不能将完全良好的HTML转换为渲染的问题。真可惜。

404找不到我的存储库是私有的