如何在 Github 上将 HTML 页面视为正常呈现的 HTML 页面以在浏览器中查看预览，而无需下载？

How to see an HTML page on Github as a normal rendered HTML page to see preview in browser, without downloading?

提问by Jitendra Vyas

On http://github.comdeveloper keep the HTML, CSS, JavaScript and images files of the project. How can I see the HTML output in browser?

在http://github.com 上，开发人员保留项目的 HTML、CSS、JavaScript 和图像文件。如何在浏览器中查看 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. It shows the page as a source code.

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

Is it possible to see it as rendered HTML directly? Otherwise I always need to download the whole ZIP just to see the result.

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

回答by niutech

The most comfortable way to preview HTML files on GitHub is to go to https://htmlpreview.github.io/or just prepend it to the original URL, i.e.: https://htmlpreview.github.io/?https://github.com/bartaz/impress.js/blob/master/index.html

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

回答by Ross

If you don't want to download an archive you can use GitHub Pagesto render this.

如果你不想下载档案，你可以使用GitHub Pages来呈现它。

1. Fork the repository to your account.
2. Clone it locally on your machine
3. Create a gh-pagesbranch (if one already exists, remove it and create a new one based off master).
4. Push the branch back to GitHub.
5. View the pages at http://username.github.io/repo`

1. 将存储库分叉到您的帐户。
2. 在您的机器上本地克隆它
3. 创建一个gh-pages分支（如果一个已经存在，删除它并基于 off 创建一个新分支master）。
4. 将分支推回 GitHub。
5. 查看页面`http://username.github.io/repo

In code:

在代码中：

git clone [email protected]: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

回答by Julien Carsique

You can use RawGit:
https://rawgit.com/necolas/css3-social-signin-buttons/master/index.html

您可以使用RawGit：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. Additionally, it also provides CDN URL for use in production.

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

回答by hendrikswan

It's really easy to do with github pages, it's just a bit weird the first time you do it. Sorta like the first time you had to juggle 3 kittens while learning to knit. (OK, it's not all that bad)

用github pages做起来真的很容易，只是第一次做的时候有点奇怪。有点像你第一次在学习编织时必须同时处理 3 只小猫。（好吧，没那么糟糕）

You need a gh-pages branch:

你需要一个 gh-pages 分支：

Basically github.com looks for a gh-pages branchof the repository. It will serve all HTML pages it finds in here as normal HTML directly to the browser.

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

How do I get this gh-pages branch?

我如何获得这个 gh-pages 分支？

Easy. Just create a branch of your github repo called gh-pages. Specify --orphanwhen 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.

简单。只需创建一个名为gh-pages. 指定--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. Up to 10 minutes according to github.

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

回答by Mukesh

I read all the comments and thought that GitHub made it too difficult for normal user to create GitHub pages until I visited GitHub theme Pagewhere its clearly mentioned that there is a section of "GitHub Pages" under settings Page of the concerned repo where you can choose the option "use the master branch for GitHub Pages." and voilà!!...checkout that particular repo on https://username.github.io/reponame

我阅读了所有评论并认为 GitHub 使普通用户很难创建 GitHub 页面，直到我访问了GitHub 主题页面，其中明确提到相关存储库的设置页面下有一个“GitHub 页面”部分，您可以在其中选择选项“使用 GitHub 页面的主分支”。瞧！！...在https://username.github.io/reponame上查看该特定存储库

回答by Bravo Yeung

You can preview HTML code by using following Chrome extension- Run Selected HTML, quite simple to use.

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

If you want to select all the codein read mode of GitHub, it is also quite simple, firstly move the mouse cursor to the beginning bracket of <html>in the top, then hold down the Shiftkey, and next move the cursor the the ending bracket of </html>in the bottom.

如果你想select all the code在GitHub的阅读模式下，也很简单，首先将鼠标光标移动到<html>顶部的开始括号，然后按住Shift键，然后将光标移动</html>到底部的结束括号。

Run Selected HTML- Chrome Web store

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

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

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

Step 1: In read mode, select all the body of the html code.

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

Step 2: Mouse right click "Run Seleted HTML", then you can see the rendered result in new tab.

第 2 步：鼠标右键单击“运行选定的 HTML”，然后您可以在新选项卡中看到渲染结果。

The running result:

运行结果：

回答by Vijay

Now, This is outdated answer(Because "Modify Content-Type Options" extension is not working as expected.).

现在，这是过时的答案（因为“修改内容类型选项”扩展没有按预期工作。）。

This solution only for chrome browser. I am not sure about other browser.

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

1. Add "Modify Content-Type Options" extension in chrome browser.
2. Open "chrome-extension://jnfofbopfpaoeojgieggflbpcblhfhka/options.html" url in browser.
3. Add the rule for raw file url. For example:
   • URL Filter: https:///raw/master//fileName.html
   • Original Type: text/plain
   • Replacement Type: text/html
4. Open the file browser which you added url in rule (in step 3).

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

回答by aiven

Also, if you use Tampermonkey, you can add a script that will add preview with http://htmlpreview.github.com/button into actions menu beside 'raw', 'blame' and 'history' buttons.

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

Script like this one: https://gist.github.com/vanyakosmos/83ba165b288af32cf85e2cac8f02ce6d

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

回答by rynop

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. just ad a s3 put as part of your api build.

它允许您在基本身份验证后托管您的页面。非常适合您的私有 github 存储库中的 api 文档之类的内容。只需将 s3 作为 api 构建的一部分。

回答by jester96

You can just turn on Github Pages. ^_^

你可以只打开 Github Pages。^_^

Click on "Settings", than go to "GitHub Pages" and click on dropdown under "Source" and choose branch which you want to public (where main html file is located) aaaand vualaa. ^_^

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