如何在Github上将HTML页面视为普通的呈现HTML页面,以在浏览器中预览预览而无需下载?

html CSS

路易猪猪

2020-03-23

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

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

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

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

第2625篇《如何在Github上将HTML页面视为普通的呈现HTML页面,以在浏览器中预览预览而无需下载?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

10个回答
SamSam 2020.03.23

您可以使用以下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步:鼠标右键单击“ Run Seleted HTML”,然后您可以在新标签页中看到渲染结果。

运行选定的HTML

运行结果: 在此处输入图片说明

Harry逆天Eva 2020.03.23

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

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

猪猪Pro 2020.03.23

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

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

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

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

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

西里神奇 2020.03.23

使用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

达蒙 2020.03.23

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

屏幕截图以支持我的答案

Gil 2020.03.23

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

  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
Tony凯 2020.03.23

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

http://www.s3auth.com/

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

神奇宝儿 2020.03.23

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

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

西门路易 2020.03.23

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

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android