如何在Github上将HTML页面视为正常的呈现HTML页面，以在浏览器中预览预览而无需下载？

355

在http://github.com上，开发人员保留项目的HTML，CSS，JavaScript和图像文件。如何在浏览器中看到HTML输出？

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

当我打开它时，它不会显示作者代码的呈现HTML。它将页面显示为源代码。

是否可以直接将其视为呈现的HTML？否则，我总是需要下载整个ZIP文件才能查看结果。

— Jitendra Vyas
source

4

类似的问题：我可以直接从GitHub运行HTML文件，而不仅仅是查看其源代码吗？

— Amro 2013年

1

截至2019年6月，raw.githack.com似乎是最方便的解决方案（请参阅上面链接的问题的答案）

— leopold.talirz

455

在GitHub上预览HTML文件最舒适的方法是转到https://htmlpreview.github.io/或仅将其添加到原始URL，即：https : //htmlpreview.github.io/?https : // github.com/bartaz/impress.js/blob/master/index.html

— 纽泰
source

@Denis：您使用哪个浏览器和哪个URL？目前，它仅支持Webkit和Gecko浏览器。

— niutech

32

请注意，这仅适用于公共仓库。私人的将提供错误消息Error: Cannot load file

— Erik Trautman 2014年

37

htmlpreview.github.com部分无法渲染JavaScript和CSS。替代的rawgit.com可以更好地工作，以适当的Content-Type标头提供文件。

— Julien Carsique 2015年

1

很好的解决方案，谢谢！我以README.md文件的前缀添加了指向我的R笔记本的链接，它很好地呈现了我的nb.html文件。这是在任何情况下页面要看看它是如何工作的：github.com/sargdavid/snippets.cvi和htmlpreview.github.io/?https://github.com/sargdavid/...

— 达维特萨尔基相

1

看来此解决方案将在2018年12月的最后几天停止工作，直到现在，但是我们仍然有此stackoverflow.com/a/8446391/860099

— KamilKiełczewski19年

85

如果您不想下载档案，可以使用GitHub Pages呈现。

将存储库分叉到您的帐户。
在计算机上本地克隆
创建一个gh-pages分支（如果已经存在，请将其删除，然后基于新建一个分支master）。
将分支推回GitHub。
在查看网页`http://username.github.io/repo

在代码中：

git clone git@github.com:username/repo.git
cd repo
git branch gh-pages
# Might need to do this first: git branch -D gh-pages
git push -u origin gh-pages # Push the new branch back to github
Go to http://username.github.io/repo

— 罗斯
source

我现在分叉了一个项目，我如何将其复制到github页面。

— Jitendra Vyas

1

通过流程更新了我的答案。

— 罗斯

3

在此处有充分的文档help.github.com/articles/creating-project-pages-manually

— Leif Gruenwoldt

2

为什么要首先创建一个母版并将其克隆（在手动创建项目页面中“安全地玩”）？checkout --orphan gh-pages 不仅可以推动它，而且完全不与主人打扰吗？

— 丹尼斯

4

页面移至github.io，不再是github.com。

— Damjan Pavlica

64

您可以使用RawGit：https : //rawgit.com/necolas/css3-social-signin-buttons/master/index.html

（在撰写本文时），它的效果比http://htmlpreview.github.com/更好，可以提供带有适当Content-Type标头的文件。此外，它还提供CDN URL供生产使用。

— 朱利安·卡西克（Julien Carsique）
source

2

我确认它比htmlpreview更好。至少，它显示了我的WebGL动画。

— Cyril Duchon-Doris

1

实际上，它的运行速度更快，并且使用Bokeh（例如）显示了一些与htmlpreview不兼容的交互（例如工具提示）。

— jadianes 2015年

像htmlpreview一样，不适用于私有存储库。Git通过添加？token = <hash>来使这些URL像公共URL一样，但是这些工具应该理解它，并将其与其余的一起传递给GH。

— zakmck '16

2

这是来自rawgit的常见问题解答：我可以在生产网站或公共示例代码中使用rawgit.com开发URL吗？不可以。在开发过程中，只能使用rawgit.com URL进行低流量测试或与少数人共享临时演示。请使用cdn.rawgit.com来处理可能导致大量流量或人们可能将其复制并粘贴到自己的代码中的任何事情。...还有更多可用的解释

— BarryPye

3

可以确认：Rawgit将于2019

— 。– samcozmid '19

34

使用github页面真的很容易，但是第一次使用它有点奇怪。就像第一次您在学习编织时必须弄杂3只小猫一样。（好的，还不算太糟）

您需要一个gh-pages分支：

基本上github.com寻找存储库的gh-pages 分支。它会将在这里找到的所有HTML页面作为普通HTML直接提供给浏览器。

我如何获得gh-pages分支？

简单。只需在github存储库中创建一个名为的分支即可gh-pages。指定--orphan创建该分支的时间，因为您实际上并不希望将该分支合并回github分支，因此只需要一个包含HTML资源的分支。

$ git checkout --orphan gh-pages

我仓库中的其他所有内容又如何呢？

不，您可以继续删除它。现在，这样做是安全的，因为您一直在关注并创建了一个孤立的分支，该分支无法合并回您的主分支并删除所有代码。

我已经创建了分支，现在呢？

您需要将该分支推送到github.com，以便他们的自动化可以开始并为您托管这些页面。

git push -u origin gh-pages

但是..我的HTML仍然没有被提供！

github需要花费几分钟来索引这些分支并启动所需的基础结构来提供内容。根据github，最多10分钟。

github.com列出的步骤

https://help.github.com/articles/creating-project-pages-manually

— 亨德里克斯万
source

3

效果很好。作为一个混蛋菜鸟，我忘了$ git commit -m 'init'在你们之间。

— systemaddict

1

URL是什么？

— Koray Tugay

嗯...不太确定，这比玩杂耍的小猫容易得多...

— dreftymac

14

我阅读了所有评论，并认为GitHub使得普通用户很难创建GitHub页面，直到我访问GitHub主题页面为止，其中明确提到在相关仓库的设置页面下有一个“ GitHub页面”部分，您可以在其中选择选项“对GitHub Pages使用master分支”。和voilà!! ...在https://username.github.io/reponame上签出特定的回购协议

屏幕截图以支持我的答案

— 穆克什
source

1

另外，如果您使用Tampermonkey，则可以添加一个脚本，该脚本会将preview with http://htmlpreview.github.com/按钮添加到“原始”，“责备”和“历史”按钮旁边的操作菜单中。

像这样的脚本：https : //gist.github.com/vanyakosmos/83ba165b288af32cf85e2cac8f02ce6d

— 艾文
source

1

您可以使用以下Chrome扩展程序 - 预览HTML代码，使用起来Run Selected HTML非常简单。

如果要使用select all the codeGitHub的读取模式，这也很简单，首先将鼠标光标移到<html>顶部的开始括号，然后按住Shift键，然后将光标移到</html>底部的结束括号。

运行选定的HTML -Chrome网上应用店

https://chrome.google.com/webstore/detail/run-selected-html/eefflcdphpehljcadbmkdpopmbamfefl/

步骤1：在读取模式下，选择HTML代码的所有正文。

第2步：右键单击“运行Seleted HTML”，然后您可以在新标签页中看到渲染结果。

运行结果：

— 杨
source

1

现在，这已经过时了 （因为“修改内容类型选项”扩展无法按预期工作。）。

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

在Chrome浏览器中添加“修改内容类型选项”扩展名。
在浏览器中打开“ chrome-extension：//jnfofbopfpaoeojgieggflbpcblhfhka/options.html” URL。
添加原始文件网址的规则。例如：
- 网址过滤器：https：///raw/master//fileName.html
- 原始类型：文字/纯文字
- 替换类型：text / html
打开在规则中添加了URL的文件浏览器（在步骤3中）。

— 维杰
source

询问者可能希望每个人都看到渲染的页面。

— Ondra参观Žižka

@zakmck浏览器发送“ text / plain”标头，但您需要发送“ text / html”。我无法将我的数据发送给第三方（“ htmlpreview.github.com ”），以说明我为什么使用上述步骤。您也可以在上述步骤中对网址使用正则表达式。

— 维杰2016年

我正是在寻找这个。我想查看页面，并且都在git和bitbucket上看到。

— 爱德华多·里斯

没为我工作。

— 爱德华多·里斯

@EduardoReis今天，我检查了我的机器，它现在不工作。可能是“修改内容类型选项”扩展名中的某些更改。如果我发现任何其他扩展名，那么我将在这里发布。谢谢。

— 维杰

0

这不是直接的答案，但我认为这是一个很好的选择。

http://www.s3auth.com/

它允许您将页面托管在基本身份验证之后。非常适合私有github存储库中的api docs之类的东西。只是将一个s3放到您的api构建中即可。

— 黑猩猩
source

看起来像与git没有共同点的第三方服务。指令在该问题的上下文中如何使用？

— Stalinko，

-3

您可以仅打开Github Pages。^ _ ^

单击“设置”，然后转到“ GitHub页面”，然后单击“源”下的下拉列表，然后选择要公开的分支（位于主要html文件所在的位置）aaa和vualaa。^ _ ^

— 小丑96
source