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

本文翻译自：How to see an html page on github as a normal rendered html page to see preview in browser, without downloading?

On http://github.com developer keep the html, csss , javascript and images files of the project. 在http://github.com上，开发人员保留项目的html，csss，javascript和images文件。 How i can see html output in browser? 我如何在浏览器中看到html输出？

for example this https://github.com/necolas/css3-social-signin-buttons/blob/master/index.html 例如这个https://github.com/necolas/css3-social-signin-buttons/blob/master/index.html

when i open this it doesn't show the rendered html of the code of author. 当我打开它时，它不会显示作者代码的呈现的html。 it shows the page as a source code. 它将页面显示为源代码。

Is it possible to see as rendered HTML directly? 是否可以直接看到呈现的HTML？ otherwise i always need download the whole zipt to just to see the result 否则，我总是需要下载整个zipt才能看到结果

---

#1楼

参考：https://stackoom.com/question/ZRFK/如何在github上将html页面作为普通渲染的html页面查看-以在浏览器中预览预览而无需下载

---

#2楼

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

---

#3楼

This isn't a direct answer, but I think it is a pretty sweet alternative. 这不是直接的答案，但我认为这是一个很好的选择。

http://www.s3auth.com/ http://www.s3auth.com/

It allows you to host your pages behind basic auth. 它允许您将页面托管在基本身份验证之后。 Great for things like api docs in your private github repo. 非常适合私有github存储库中的api docs之类的东西。 just ad a s3 put as part of your api build. 只是将一个s3放到您的api构建中即可。

---

#4楼

It's really easy to do with github pages , it's just a bit weird the first time you do it. 使用github页面真的很容易，但是第一次使用它有点奇怪 。 Sorta like the first time you had to juggle 3 kittens while learning to knit. 就像第一次您在学习编织时必须弄杂3只小猫一样。 (OK, it's not all that bad) （好的，还不算太糟）

You need a gh-pages branch: 您需要一个gh-pages分支：

Basically github.com looks for a gh-pages branch of the repository. 基本上github.com寻找存储库的gh-pages 分支 。 It will serve all HTML pages it finds in here as normal HTML directly to the browser. 它会将在这里找到的所有HTML页面作为普通HTML直接提供给浏览器。

How do I get this gh-pages branch? 我如何获得gh-pages分支？

Easy. 简单。 Just create a branch of your github repo called gh-pages . 只需在github存储库中创建一个分支gh-pages 。 Specify --orphan when you create this branch, as you don't actually want to merge this branch back into your github branch, you just want a branch that contains your HTML resources. 创建此分支时，请指定--orphan ，因为您实际上并不希望将该分支合并回github分支，而只需要一个包含HTML资源的分支。

$ git checkout --orphan gh-pages

What about all the other gunk in my repo, how does that fit in to it? 我仓库中的其他所有内容又如何呢？

Nah, you can just go ahead and delete it. 不，您可以继续删除它。 And it's safe to do now, because you've been paying attention and created an orphan branch which can't be merged back into your main branch and remove all your code. 现在，这样做是安全的，因为您一直在关注并创建了一个孤立的分支，该分支无法合并回您的主分支并删除所有代码。

I've created the branch, now what? 我已经创建了分支，现在呢？

You need to push this branch up to github.com, so that their automation can kick in and start hosting these pages for you. 您需要将该分支推送到github.com，以便他们的自动化可以开始并为您托管这些页面。

git push -u origin gh-pages

But.. My HTML is still not being served! 但是..我的HTML仍然没有被提供！

It takes a few minutes for github to index these branches and fire up the required infrastructure to serve up the content. github需要花费几分钟来索引这些分支并启动所需的基础结构来提供内容。 Up to 10 minutes according to github. 根据github，最多10分钟。

The steps layed out by github.com github.com列出的步骤

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

---

#5楼

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

It works better (at the time of this writing) than http://htmlpreview.github.com/ , serving files with proper Content-Type headers. （在撰写本文时），它的效果比http://htmlpreview.github.com/更好，可以提供带有适当Content-Type标头的文件。 Additionally, it also provides CDN URL for use in production. 此外，它还提供CDN URL供生产使用。

---

#6楼

This solution only for chrome browser. 此解决方案仅适用于chrome浏览器。 I am not sure about other browser. 我不确定其他浏览器。

1. Add "Modify Content-Type Options" extension in chrome browser. 在Chrome浏览器中添加“修改内容类型选项”扩展名。
2. Open "chrome-extension://jnfofbopfpaoeojgieggflbpcblhfhka/options.html" url in browser. 在浏览器中打开“ chrome-extension：//jnfofbopfpaoeojgieggflbpcblhfhka/options.html” URL。
3. Add the rule for raw file url. 添加原始文件网址的规则。 For example: 例如：
   • URL Filter: https:///raw/master//fileName.html 网址过滤器：https：///raw/master//fileName.html
   • Original Type: text/plain 原始类型：文字/纯文字
   • Replacement Type: text/html 替换类型：text / html
4. Open the file browser which you added url in rule (in step 3). 打开在规则中添加了URL的文件浏览器（在步骤3中）。