如何在Github上看到一个HTML页面作为一个正常渲染的HTML页面在浏览器中看到预览，而不下载?

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

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

当我打开这个，它不显示渲染的HTML代码的作者。它以源代码的形式显示页面。

是否有可能将其直接视为呈现的HTML ?否则，我总是需要下载整个ZIP才能看到结果。

355273 次浏览
小开

如果你不想下载一个存档文件，你可以使用GitHub页面来渲染它。

  1. 将存储库转移到您的帐户。
  2. 在您的机器上本地克隆它
  3. 创建一个gh-pages分支(如果已经存在，则删除它并基于master创建一个新的分支)。
  4. 将分支推回GitHub。
  5. 在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
小开
最佳答案

在GitHub上预览HTML文件最舒服的方法是转到https://htmlpreview.github.io/或只是在原始URL前加上它，即:https://htmlpreview.github.io/?https://github.com/bartaz/impress.js/blob/master/index.html

小开

这不是一个直接的答案，但我认为这是一个相当不错的选择。

< a href = " http://www.s3auth.com/ " rel =“nofollow”> http://www.s3auth.com/ < / >

它允许您在基本身份验证之后托管页面。很棒的东西，如api文档在你的私人github回购。只是AD一个s3放在你的API构建的一部分。

小开

github页面真的很容易做到，只是第一次做的时候有点奇怪。有点像你第一次在学习编织的时候不得不玩弄三只小猫。(好吧，也没那么糟)

你需要一个gh-pages分支:

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

如何获得这个gh-pages分支?

< p >容易。只需创建一个名为gh-pages的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

小开

🚩来自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 < / p >

它比http://htmlpreview.github.com/工作得更好(在撰写本文时)，提供具有适当Content-Type头的文件。 此外，它还提供了CDN URL供生产中使用

小开

此外，如果你使用Tampermonkey，你可以添加一个脚本，将preview with http://htmlpreview.github.com/按钮添加到“raw”，“blame”和“history”按钮旁边的操作菜单中。

脚本: https://gist.github.com/vanyakosmos/83ba165b288af32cf85e2cac8f02ce6d < / p >

小开

我阅读了所有的评论，认为GitHub让普通用户创建GitHub页面太难了，直到我访问了GitHub主题页面，其中明确提到，在相关回购的设置页面下有一个“GitHub页面”的部分，在那里你可以选择“使用GitHub页面的主分支”选项，voilà!!签出https://username.github.io/reponame上的特定回购

截图来支持我的答案

小开

我找到了另一种方法:

  1. 点击&;raw&;如果你还没扣上的话
  2. Ctrl + A, Ctrl + C
  3. 打开“开发者工具”;与F12
  4. 在“;Inspector"右键单击标签并选择“编辑html”;
  5. Ctrl + A, Ctrl + V
  6. Ctr +返回

在Firefox上测试过，但在其他浏览器上也可以使用

小开

如果你已经配置了GitHub页面，你可以得到你的公共url，如:

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

<username> &<repository>将是用户名&回购名称

所以，结果将是这样的: http://necolas.github.io/css3-social-signin-buttons/index.html < / p >

如果它是一个在所有存储库中启用GithubPages的组织，它将是这样的:

https://<org>.github.io/<repository>/
小开

有两种方法(用于公共存储库)对我来说效果很好:都非常简单，并且能够通过链接到本地CSS文件和本地JAVASCRIPT/VUE文件来渲染复杂的HTML页面。

  • 方法1 -使用GitHub页面

要设置，请转到:https://github.com/YOUR_ACCT_NAME/YOUR_REPO_NAME/settings/pages(见下面的屏幕截图)

enter image description here

我的原始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

然后该网站产生2个链接，工作得很好:)

一个很好的选择，如果GitHub页面变得不可用!


提交答案