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

Question

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

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

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

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

Answer 1

如果您使用的是企业 Github，您可能不希望拥有面向公众的 github 页面。对我们有用的一件事是：

对于 HTML 文件： https://github.private-repo.com/team/project/blob/master/order.html

以下是在浏览器中打开并以 HTML 形式检索最新文件的 URL：
https://github.private-repo.com/pages/team/项目/order.html

Answer 2

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

http://www.s3auth.com/

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

Answer 3

这是一个书签，用于将当前页面的内容替换为 HTML 文件的内容：

1. 使用此“URL”创建书签：

   javascript: (() => {
      const 选择器 = '#read-only-cursor-text-area';
      const html = document.querySelector(selector)?.value;
   
      如果（！html）{
        returnalert(`错误：未找到元素 ${selector}`);
     }
   
     文档.open();
     文档.write(html);
     文档.关闭();
   })();
   

2. 在 GitHub 上打开 HTML 文件。
3. 通过“打开”书签来运行书签。

与使用 SingleFile 生成的自包含/零依赖 HTML 文件配合得很好，因为文件不这样做没有外部依赖项（例如，图像经过 Base64 编码并嵌入到 HTML 文件中）。

注意：

• 小书签会破坏 GitHub 的客户端路由，因此无法使用浏览器的“后退”按钮返回。重新加载页面 (F5) 可解决该问题。
• 由于严格的 ，该小书签无法在 raw.githubusercontent.com 上运行内容安全策略（CSP）。 （此外，书签正在寻找此域中不存在的元素。）
• github.com 上使用的 CSP 也可能过于严格；在这种情况下，我个人会尝试 ostrokach 针对类似问题发布的替代解决方案。
• 小书签很脆弱，即随着 GitHub 的更新，它可能需要不时进行调整。

---

保留页面页眉和页脚的替代小书签代码，以便运行小书签不会破坏客户端路由：

javascript: (() => {
  const selector = '#read-only-cursor-text-area';
  const html = document.querySelector(selector)?.value;

  if (!html) {
    return alert(`Error: element ${selector} not found`);
  }

  const $iframe = document.createElement('iframe');
  $iframe.style.height = '100vh';
  $iframe.style.width = '100%';
  $iframe.srcdoc = html;

  document.querySelector('turbo-frame').replaceChildren($iframe);

  $iframe.scrollIntoView();
})();

github.com 上的 CSP 阻止 iframe 加载大多数链接，因此在此版本中，大多数链接都被有效禁用（即单击链接不会执行任何操作，至少在 Firefox 上）。就我而言，这是一个功能，而不是一个错误。

Answer 4

因为旧项目被放弃而新分叉；
URL 现在为 (htmlpreview -> html-preview)：

• https://html-preview.github.io/
• https://html-preview.github.io/?url=https://github.com/bartaz/impress.js/blob/master/index.html

---

< em>以前：

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

Answer 5

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

Answer 6

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

1. 将存储库分叉到您的帐户。
2. 在您的计算机上将其本地克隆
3. 创建一个 gh-pages 分支（如果已经存在，请将其删除并基于 master 创建一个新分支）。
4. 将分支推回 GitHub。
5. 查看页面 http://用户名.github.io/repo< /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

Answer 7

Answer 8

使用 github 页面 确实很容易做到，只是第一次做的时候有点奇怪。有点像你第一次在学习编织的同时不得不照顾三只小猫。 （好吧，这并不是那么糟糕）

你需要一个 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

Answer 9

我找到了另一种方法：

1. 如果您还没有，请单击“Raw”按钮
2. Ctrl+A、Ctrl+C
3. 使用 F12 打开“开发人员工具”
4. 在“检查器”中右键单击标签并选择“编辑 HTML”
5. Ctrl+A、Ctrl+V
6. Ctr+Return

在 Firefox 上测试，但也应该在其他浏览器中工作

Answer 10

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

• 方法 1 - 使用 GitHub 页面

要进行设置，请转至：https:/ /github.com/YOUR_ACCT_NAME/YOUR_REPO_NAME/settings/pages（参见下面的屏幕截图）

存储库中我的原始 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 页面不可用，这是一个不错的选择！

Answer 11

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

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

Answer 12

如果您配置了 GitHub Pages，您可以获得公共 URL，如下所示：

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

where & 将是用户名和名称的占位符分别是 repo 名称

所以，结果将是这样的：
http://necolas.github.io/css3-social-signin- Buttons/index.html

如果它是一个在所有存储库中启用了 GithubPages 的组织，它将类似于：

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