logo标签列表

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

htmlcssgitgithubgithub-pages
516
在 http://github.com 上，开发者可以保存项目的 HTML、CSS、JavaScript 和图像文件。我该如何在浏览器中查看 HTML 输出？
例如，这个：https://github.com/necolas/css3-social-signin-buttons/blob/master/index.html 当我打开它时，它不会显示作者代码的渲染后的 HTML。相反，它显示了页面的源代码。
是否有可能直接查看渲染后的 HTML？否则，我总是需要下载整个 ZIP 文件才能看到结果。
9
类似问题：我能直接从GitHub运行HTML文件吗，而不仅仅查看它们的源代码？ - Amro
4
截至2019年6月，raw.githack.com 似乎是最方便的解决方案（请参见上面链接的问题的答案），可以直接运行 GitHub 上的 HTML 文件而非只查看它们的源代码。 - leopold.talirz
5
这是一个非常古老的帖子，但事实是在Github上这个问题不是显然易解的，这太疯狂了。 - ForceLeft415
11个回答
636
70
请注意，这仅适用于公共存储库。私有存储库将会出现错误信息 Error: Cannot load file。 - Erik Trautman
47
http://htmlpreview.github.com/ 在渲染 JavaScript 和 CSS 方面存在部分问题。另一个替代方案 http://rawgit.com/ 更好，能够提供正确的 Content-Type 标头来提供文件。 - Julien Carsique
1
太好了，谢谢！我在README.md文件中添加了前缀的链接到我的R笔记本中，并且它可以很好地渲染我的nb.html文件。这是页面链接，以防有人想看看它的工作原理：https://github.com/sargdavid/snippets.cvi 和 http://htmlpreview.github.io/?https://github.com/sargdavid/snippets.cvi/blob/master/rnotebook/ggplot_heatmap.nb.html - Davit Sargsyan
9
看起来这个解决方案在2018年12月底之后停止工作，直到现在。然而，我们仍然有这个解决方案：https://dev59.com/cmoy5IYBdhLWcg3wl_Ix#8446391。 - Kamil Kiełczewski
1
404 找不到 我的仓库是私有的 - Mostafa Imani
显示剩余18条评论
115

如果您不想下载归档文件，可以使用GitHub Pages来渲染它。

  1. 将存储库fork到您的帐户中。
  2. 在本地计算机上克隆它。
  3. 创建一个gh-pages分支（如果已经存在，请删除它并基于master创建新分支）。
  4. 将该分支推送回GitHub。
  5. 在http://用户名.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
我已经fork了一个项目，现在如何将它复制到GitHub Pages上。 - Jitendra Vyas
1
更新了我的回答，附上一个流程。 - Ross
3
这里有详细的文档说明：https://help.github.com/articles/creating-project-pages-manually。 - Leif Gruenwoldt
2
为什么要先创建一个主分支并克隆它（在手动创建项目页面时“安全起见”）？有没有可能只使用checkout --orphan gh-pages，将其推送，而不需要对主分支进行任何操作？ - denis
1
您还可以在存储库设置中选择要发布的分支，在第一个选项卡（选项）底部附近。如果该分支存在，则默认为gh_pahes，否则为无（禁用）。您可以选择主分支或任何其他分支。 - Thomas Guyot-Sionnest
71

RawGit的创建者和所有者在https://rawgit.com上发布了以下消息:

RawGit已到达其有用寿命的尽头 2018年10月8日 RawGit现在处于日落阶段，并将很快关闭。这是五年来的一场有趣的旅程，但所有事物都必须结束。

在最近一个月内通过RawGit提供内容的GitHub仓库将继续提供服务，直至2019年10月。其他存储库的URL不再提供服务。

如果您目前正在使用RawGit，请尽快停止使用它。

当我尝试使用它时，我得到了以下结果：

403禁止访问

RawGit即将关闭，不再提供新存储库的服务。 >> 请访问https://rawgit.com以获取更多详细信息。

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

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

2
我确认它比htmlpreview更好用。至少，它可以显示我的WebGL动画。 - Cyril Duchon-Doris
1
它实际上运行更快，并且使用Bokeh（例如：https://rawgit.com/jadianes/data-journalism-python/master/notebooks/tuberculosis-evolution-visual/tuberculosis-evolution-visual.html），它显示了一些与htmlpreview不兼容的交互（例如：工具提示）。 - jadianes
2
这是来自rawgit的常见问题解答：我可以在生产网站或公共示例代码中使用rawgit.com开发URL吗？不行。只能在低流量测试或在开发过程中与少数人分享临时演示时使用rawgit.com URL。请使用cdn.rawgit.com处理任何可能导致大量流量或被人们复制粘贴到自己的代码中的内容。还有更多解释可用。 - BarryPye
12
可以确认：Rawgit将于2019年10月关闭。 - samcozmid
2
RawGit 的替代方案是 https://raw.githack.com/。更多信息请参见：https://stackoverflow.com/questions/62740362/how-to-show-demo-with-html-and-javascript-d3-js-on-github-for-every-commit。 - mkczyk
显示剩余3条评论
45

使用GitHub Pages非常容易，只是第一次做可能会有点奇怪，就像你第一次学织毛衣时必须同时抱着三只小猫咪一样。（好吧，其实并没有那么糟糕）

你需要一个gh-pages分支：

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

如何获得 gh-pages 分支？

很简单，只需创建一个名为 gh-pages 的 GitHub 存储库分支。创建此分支时指定 --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

3
表现很好。作为一个Git新手，在您的代码行之间我忘记了 $ git commit -m 'init'。 - systemaddict
1
URL会是什么？ - Koray Tugay
嗯...我不太确定这比抱小猫更容易... - dreftymac
21
我看了所有的评论，觉得GitHub对普通用户创建GitHub页面过于困难，直到我访问了GitHub主题页面，其中清楚地说明在有关repo的设置页面下有一个“GitHub Pages”部分，在那里你可以选择“将主分支用作GitHub Pages”的选项。然后，就可以在https://username.github.io/reponame上检查该特定repo了。

支持我的答案的截图

1
现在看起来这似乎是一个付费产品，只有在您使用私有存储库时才需要付费。它适用于公共存储库。 - anakaine
4
3
我找到了另一种方法：
  1. 如果你还没有点击“Raw”按钮，请点击
  2. 按下Ctrl+A，Ctrl+C
  3. 使用F12打开“开发者工具”
  4. 在“检查器”中右键单击标签并选择“编辑HTML”
  5. 按下Ctrl+A，Ctrl+V
  6. 按下Ctrl+Enter

已在Firefox上测试，但在其他浏览器中也应该可以使用。

1
非常好，这是一个适当的技术解决方案，可以解决实际问题，而不依赖外部网站的任何猴子生意。这应该是您浏览器菜单中的某个文件选项：“将页面文本作为HTML评估”。 - Kaz
2
在我看来，将原始HTML页面保存在任何地方并使用浏览器打开它（只需按“下载的文件”按钮）会更快。 - Yaroslav Nikitenko
3
如果您已经配置了GitHub Pages，您可以获得公共URL，如下所示：
https://<username>.github.io/<repository>/index.html

其中，<username>和<repository>将分别替代为用户名和仓库名称

因此，结果将如下所示：http://necolas.github.io/css3-social-signin-buttons/index.html

如果这是一个启用了GithubPages的组织，并且所有存储库都启用了，则类似于以下内容：

https://<org>.github.io/<repository>/
如果仓库在一个组织中怎么办？ - alessandro308
@alessandro308，它将会像这样：https://<org>.github.io/<repository>/。我已经更新了答案。 - Vinod Srivastav
2
两种方法（适用于公共仓库）对我来说都非常好用：非常简单且能够呈现具有本地CSS文件和本地JavaScript/VUE文件链接的复杂HTML页面。
  • 方法1 - 使用GitHub Pages

设置方法如下：转到https://github.com/YOUR_ACCT_NAME/YOUR_REPO_NAME/settings/pages（参见下面的屏幕截图）。

enter image description here

我的repo中原始HTML页面的示例：https://github.com/BrainAnnex/life123/blob/main/experiments/life_1D/diffusion/diffusion_1.htm 渲染后的效果：https://brainannex.github.io/life123/experiments/life_1D/diffusion/diffusion_1.htm 注意所有的样式、图形和交互控件都非常好 :)
方法2 - 使用免费服务raw.githack.com。
前往https://raw.githack.com/，输入您的页面的完整URL（包括“/blob”部分），例如https://github.com/BrainAnnex/life123/blob/main/experiments/life_1D/diffusion/diffusion_1.htm。

然后该网站会生成两个链接，它们运行得相当不错 :)

如果GitHub页面无法使用，这是一个很好的替代方案！

1
如果您正在使用企业版GitHub，则可以创建私有GitHub页面。 - ChrisW
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接