如何在 GitHub 上为每次提交使用 HTML 和 JavaScript (D3.js) 显示演示

Question

我正在开发使用 D3.js 来显示一些可视化的应用程序。如何在 GitHub 上显示 HTML 文件（使用 JS）的预览？我需要每个提交（历史）的演示，而不仅仅是最新版本。

^{我使用捆绑的 JSON 数据和来自 CDN 的链接 D3.js 库将应用程序的静态版本生成为 HTML+JS，因此我只需要提供 HTML+JS 服务。没有后端。}

GitHub 页面

我的第一个想法是使用 GitHub Pages ^{（这是流行的答案#1、#2）}。这很好，但是这样我就可以仅显示最新版本的演示（如果我为分支docs上的目录设置 gh-pages，则为最新提交master）或仅针对一个特定版本（如果我为gh-pages分支设置 gh-pages 并向其推送某个版本） ）。

我需要为存储库中的所有提交显示演示（预览 HTML）。我希望能够看到以前版本的应用程序的演示（预览以前的提交）。

生成图像（截图）

我可以制作运行 D3.js 应用程序的屏幕截图，并将图像附加到存储库并在README.md. 当有人打开以前的提交时，他会看到应用程序的以前版本。这就是我要的。

但对于静态图像，我失去了 D3.js 的优势。我的应用程序是动态的（您可以缩放、单击图表、选择要显示的数据、显示工具提示等）。

HtmlPreview 或 RawGit

我发现^{（#1，#2）}服务可以直接从 GitHub 提供 HTML 文件：

• https://htmlpreview.github.io/
• https://rawgit.com/

有了这个，我可以链接到特定文件（甚至是特定版本的文件！就是这样！）并通过 HTMLPreview/RawGit 代理来显示预览。

但我对此有两个问题：

1. RawGit 的作者说我不应该使用这个工具来创建公共演示（我只是想做！）：

不要在示例代码或公共演示中使用开发 URL，因为人们经常复制并粘贴该代码并在生产应用程序中使用它，而没有意识到他们需要更改 URL。然后他们向 RawGit 发送过多的流量，受到限制，他们的应用程序崩溃了。

（我想这同样适用于 HtmlPreview。）

2.如何动态链接到本次提交中的文件？（我想在 中编写演示链接README.md。）

当我创建这样的链接时：

https://rawgit.com/mkczyk/test-experiment/master/index.html
https://htmlpreview.github.io/?https://github.com/mkczyk/test-experiment/blob/master/index.html

它将是最新版本的链接（当有人进入旧提交时，他将看到最新版本的演示而不是特定版本）。

所以我必须创建与 SHA 的链接，如下所示：

https://rawgit.com/mkczyk/test-experiment/d7a4c7953d2b9084ca520eeb4434dd6d6689880d/index.html
https://htmlpreview.github.io/?https://github.com/mkczyk/test-experiment/blob/d7a4c7953d2b9084ca520eeb4434dd6d6689880d/index.html

但是我如何知道在创建提交之前会生成什么 SHA？README.md我想在同一个提交中创建提交并写入链接。

（我尝试在本地创建提交，读取生成的SHA，更改README.md为写入链接和git commit --amend，但修改后SHA发生了更改。）

有没有办法在GitHub上创建动态链接？也许一些 GitHub 变量 ( <sha-of-this-commit>) 会在生成时由 GitHub 动态更改README.md？

我知道我可以链接相对：

[index.html](index.html)

GitHub 将其替换为：

https://github.com/mkczyk/test-experiment/blob/d7a4c7953d2b9084ca520eeb4434dd6d6689880d/index.html

但我不知道如何将其与 RawGit 或 HTMLPreview 连接起来。

Jupyter笔记本

我找到了这个演示：https://github.com/soxofaan/jupyter-playground/tree/master/jupyter-custom-d3-visualization

我发现我可以在 Jupyter Notebook 中嵌入 JS 和 D3.js 脚本 ( .ipynb)。

GitHub默认支持Jupyter Notebooks 的预览。但如您所见，它不支持嵌入 JavaScript 结果：https://github.com/soxofaan/jupyter-playground/blob/master/jupyter-custom-d3-visualization/jupyter-custom-d3-visualization.ipynb

<IPython.core.display.Javascript object>

有解决方法并使用nbviewer预览 JS：https://nbviewer.jupyter.org/github/soxofaan/jupyter-playground/blob/master/jupyter-custom-d3-visualization/jupyter-custom-d3-visualization.ipynb

它的工作方式与 RawGit 或 HTMLPreview 相同，但适用于 Jupyter Notebook。

有了这个，我遇到了与上面相同的问题。我无法链接到特定提交（我不知道在创建提交之前会生成什么 SHA）。

这还有一个缺点，您必须仅为嵌入 JS 创建整个 Jupyter Notebook。

ObservableHQ对于 D3.js 来说更舒适。但GitHub不支持。如果我可以编写 observablehq-notebook，将代码提交到 GitHub 并且它将呈现预览，那就完美了。

繁琐的解决方法

1. 放弃历史提交的演示......但这是我的问题如何处理它。

2. 使用外部服务（例如JSFiddle、Codepen或 ObservableHQ 之前提到的）并为每个更改创建独立的演示并在提交之前粘贴链接。但这有很多缺点：

• 外部服务中有很多条目。当我犯错误或忘记我需要这个并删除旧条目时，我在存储库中旧提交中的演示将被破坏（并且无法恢复它，因为实体的 id 将被更改 - 唯一的方法是重写存储库中的所有提交！） 。
• 没有单一的事实来源（我的主要源代码位于 GitHub 上，所以我想参考一下）。

3. 使用 GitHub 页面（docs分支中的文件master夹 - 我无法使用gh-pages分支，因为我想更改应用程序并在一次提交中显示演示）并为每个更改手动创建子文件夹，并将链接粘贴到特定文件夹中的文件的某处（我知道路径目录，因为我手动制作了这个）。这也有很多缺点。听起来很复杂（我只用D3.js制作了简单的页面！），我必须手动创建文件夹，注意路径，并且不知道如何处理除master之外的其他分支（合并等）。

---

更新2020-07-07

回复：HtmlPreview 或 RawGit，1. 问题

我发现了另一个直接从 GitHub raw.githack.com提供 HTML 的服务：

• https://raw.githack.com/

这个与其他的不同之处在于它支持生产 URL。

在生产中使用此 URL
无流量限制或节流。文件通过 CloudFlare 的 CDN 提供。

所以我可以创建与 CDN 的链接：

https://rawcdn.githack.com/mkczyk/test-experiment/d7a4c7953d2b9084ca520eeb4434dd6d6689880d/index.html

我认为我不必担心在我的公共演示中使用此链接。

它通过外部服务提供 HTML 的方式解决了我的第一个问题。但 SHA 的第二个问题仍然存在。我仍然不知道如何动态创建指向当前提交的链接README.md。我提交了当前提交哈希占位符的功能请求：https ://github.com/github/markup/issues/1363