Question

在http://github.com开发者处保留项目的html，css，javascript和图像文件。我如何在浏览器中看到html输出？

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

当我打开它时，它不会显示作者代码的渲染html。它将页面显示为源代码。

是否可以直接看到呈现的HTML？否则我总是需要下载整个zipt才能看到结果

Answer 1

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

Answer 2

如果您不想下载档案，可以使用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

Answer 3

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

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

Answer 4

使用github pages非常容易，第一次使用它时有点奇怪。 Sorta就像你第一次在学习编织时玩弄3只小猫一样。（好吧，这不是那么糟糕）

你需要一个gh-pages分支：

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

如何获取此gh-pages分支？

易。只需创建一个名为gh-branches的github repo分支。在创建此分支时指定 - 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

Answer 5

我阅读了所有的评论，并认为GitHub让普通用户创建GitHub页面变得非常困难，直到我访问GitHub theme Page，其中明确提到在设置页面下有一段“GitHub页面”。关注repo，您可以在其中选择“使用GitHub页面的主分支”选项。和voilà!! ...在https://username.github.io/reponame

结帐那个特别的回购

screenshot to support my answer

Answer 6

这不是一个直接的答案，但我认为这是一个非常甜蜜的选择。

http://www.s3auth.com/

它允许您在基本身份验证后托管您的网页。非常适合私人github回购中的api文档。只需将s3作为api版本的一部分。

Answer 7

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

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

Answer 8

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

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

Answer 9

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

如果要在GitHub的读取模式下select all the code，这也很简单，首先将鼠标光标移到顶部<html>的开头括号，然后按住 Shift 键，然后将光标移到底部</html>的结尾括号中。

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

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

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

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

运行结果：

Answer 10

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

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

Answer 11

我找到了另一种方式：

如果还没有，请点击“原始”按钮
Ctrl + A，Ctrl + C
使用F12打开“开发人员工具”
在“检查器”中，右键单击标签，然后选择“编辑HTML”
Ctrl + A，Ctrl + V
点击率+退回

在Firefox上进行了测试，但它也可以在其他浏览器中使用

Answer 12

也许你可以得到你的公共网址

https://**<username>**.github.io/**<repository>**/index.html

所以结果是这样的： http://necolas.github.io/css3-social-signin-buttons/index.html

如果您已配置GitHub Pages

如何在github上看到html页面作为普通的渲染html页面，在浏览器中查看预览，无需下载？

12 个答案: