title: How to show demo with HTML and JavaScript (D3.js) on GitHub for every commit
body: <p>I'm developing application that uses D3.js to showing some visualizations. How can I show preview of HTML file (that uses JS) on GitHub? I need demo for every commits (historical), not only for latest version.</p>
  <p><sup><em>I generate static version of my application to HTML+JS with bundled JSON data and linked D3.js library from CDN, so I need only to serve HTML+JS. No backend.</em></sup></p>
  <h2>GitHub Pages</h2>
  <p>My first thought is using GitHub Pages <sup>(it's popular answers <a href="https://stackoverflow.com/questions/25903179/how-to-show-d3-js-html-graph-in-github/25903310#25903310">#1</a>, <a href="https://stackoverflow.com/questions/8446218/how-to-see-an-html-page-on-github-as-a-normal-rendered-html-page-to-see-preview/8446391#8446391">#2</a>)</sup>. It is good, but with this I can show demo only for latest version (latest commit if I set gh-pages for <code>docs</code> directory on <code>master</code> branch) or only for one specific version (if I set gh-pages for <code>gh-pages</code> branch and push some version to it).</p>
  <p>I need to show demo (preview HTML) for all commits in repo. I would like to be able to see demo with previous version of application (preview previous commits).</p>
  <h2>Generate image (screenshot)</h2>
  <p>I can do screenshot of running D3.js application and attach image to repo and show in <code>README.md</code>. When somebody open previous commit he will see previous version of application. This is what I want.</p>
  <p>But with static image I lose advantage of D3.js. My application is dynamic (you can zoom, click on charts, select data to show, show tooltips etc.).</p>
  <h1>HtmlPreview or RawGit</h1>
  <p>I found <sup>(<a href="https://stackoverflow.com/questions/8446218/how-to-see-an-html-page-on-github-as-a-normal-rendered-html-page-to-see-preview/12233684#12233684">#1</a>, <a href="https://stackoverflow.com/questions/8446218/how-to-see-an-html-page-on-github-as-a-normal-rendered-html-page-to-see-preview/27986925#27986925">#2</a>)</sup> services that can serve HTML file directly from GitHub:</p>
  <ul>
  <li><a href="https://htmlpreview.github.io/" rel="nofollow noreferrer">https://htmlpreview.github.io/</a></li>
  <li><a href="https://rawgit.com/" rel="nofollow noreferrer">https://rawgit.com/</a></li>
  </ul>
  <p>With this I can link to specific file (even to specific version of file! That's it!) and proxy by HTMLPreview/RawGit to show preview.</p>
  <p>But I have two problems with this:</p>
  <p><strong>1.</strong> Author of RawGit <a href="https://github.com/rgrove/rawgit/blob/master/FAQ.md" rel="nofollow noreferrer">says</a> that I shouldn't use this tool for creating public demos (what I just wanted to do!):</p>
  <blockquote>
  <p>Don't use development URLs in example code or in public demos, because people often copy and paste that code and use it in production apps without realizing that they need to change the URLs. Then they send too much traffic to RawGit, get throttled, and their apps break.</p>
  </blockquote>
  <p>(I guess that the same can applies to HtmlPreview.)</p>
  <p><strong>2.</strong> How to dynamically link to file in <strong>this</strong> commit? (I want to write link for demo in <code>README.md</code>.)</p>
  <p>When I create links like this:</p>
  <pre><code>https://rawgit.com/mkczyk/test-experiment/master/index.html
  https://htmlpreview.github.io/?https://github.com/mkczyk/test-experiment/blob/master/index.html
  </code></pre>
  <p>It will be links to latest version (when somebody enter into old commit he will see demo for newest version instead of specific version).</p>
  <p>So I have to create link with SHA, like this:</p>
  <pre><code>https://rawgit.com/mkczyk/test-experiment/d7a4c7953d2b9084ca520eeb4434dd6d6689880d/index.html
  https://htmlpreview.github.io/?https://github.com/mkczyk/test-experiment/blob/d7a4c7953d2b9084ca520eeb4434dd6d6689880d/index.html
  </code></pre>
  <p>But how do I know what SHA will be generated before I create commit? I want to create commit and write link on <code>README.md</code> in the same commit.</p>
  <p>(I tried to create commit locally, read generated SHA, change <code>README.md</code> to write link and <code>git commit --amend</code>, but SHA is changed after amend.)</p>
  <p>Is there any way to create dynamic link on GitHub? Maybe some GitHub variable (<code>&lt;sha-of-this-commit&gt;</code>) which would be dynamically changed by GitHub when generates <code>README.md</code>?</p>
  <p>I know I can link relative:</p>
  <pre><code>[index.html](index.html)
  </code></pre>
  <p>And GitHub replace this with:</p>
  <pre><code>https://github.com/mkczyk/test-experiment/blob/d7a4c7953d2b9084ca520eeb4434dd6d6689880d/index.html
  </code></pre>
  <p>But I don't know how to concatenate this with RawGit or HTMLPreview.</p>
  <h2>Jupyter Notebook</h2>
  <p>I found this demo: <a href="https://github.com/soxofaan/jupyter-playground/tree/master/jupyter-custom-d3-visualization" rel="nofollow noreferrer">https://github.com/soxofaan/jupyter-playground/tree/master/jupyter-custom-d3-visualization</a></p>
  <p>I see that I can embed JS and D3.js script in Jupyter Notebook (<code>.ipynb</code>).</p>
  <p>GitHub <a href="https://docs.github.com/en/github/managing-files-in-a-repository/working-with-jupyter-notebook-files-on-github" rel="nofollow noreferrer">supports</a> as default a preview of Jupyter Notebooks.
  But as you can see it doesn't support embed JavaScript result: <a href="https://github.com/soxofaan/jupyter-playground/blob/master/jupyter-custom-d3-visualization/jupyter-custom-d3-visualization.ipynb" rel="nofollow noreferrer">https://github.com/soxofaan/jupyter-playground/blob/master/jupyter-custom-d3-visualization/jupyter-custom-d3-visualization.ipynb</a></p>
  <pre><code>&lt;IPython.core.display.Javascript object&gt;
  </code></pre>
  <p>There is workaround and using <a href="https://nbviewer.jupyter.org/" rel="nofollow noreferrer">nbviewer</a> to preview JS: <a href="https://nbviewer.jupyter.org/github/soxofaan/jupyter-playground/blob/master/jupyter-custom-d3-visualization/jupyter-custom-d3-visualization.ipynb" rel="nofollow noreferrer">https://nbviewer.jupyter.org/github/soxofaan/jupyter-playground/blob/master/jupyter-custom-d3-visualization/jupyter-custom-d3-visualization.ipynb</a></p>
  <p>It works the same as RawGit or HTMLPreview but for Jupyter Notebook.</p>
  <p>And with this I have the same problem as above. I cant make link to specific commit (I don't know what SHA will be generated before I create commit).</p>
  <p>This also has a drawback that you have to create entire Jupyter Notebook only for embed JS.</p>
  <p><a href="https://observablehq.com/" rel="nofollow noreferrer">ObservableHQ</a> is more comfortable for D3.js. But GitHub <a href="https://talk.observablehq.com/t/proly-too-sooon-but-would-be-cool-to-see-observablehq-notebooks-renderred-on-github/1042" rel="nofollow noreferrer">doesn't support it</a>. That would be perfect if I could write observablehq-notebook, commit code to GitHub and it will render preview.</p>
  <h2>Cumbersome workarounds</h2>
  <ol>
  <li><p>Giving up with demo for historical commits... But this is my question how to deal with it.</p>
  </li>
  <li><p>Using external service (eg. <a href="https://jsfiddle.net/" rel="nofollow noreferrer">JSFiddle</a>, <a href="https://codepen.io/" rel="nofollow noreferrer">Codepen</a> or mentioned before ObservableHQ) and creating independent demo for each change and paste link before committing. But this has many drawbacks:</p>
  </li>
  </ol>
  <ul>
  <li>A lot of entries in external service. When I make mistake or forgot that I need this and delete old entry my demos in old commits in repo will be broken (and no way to recovery this because id of enty will be changes - only way is to rewrite all commits in repo!).</li>
  <li>There is no single source of truth (my main source code is on GitHub, so I want refer to this).</li>
  </ul>
  <ol start="3">
  <li>Using GitHub pages (with <code>docs</code> folder in <code>master</code> branch - I can't use <code>gh-pages</code> branch, because I want to change application and show demo in one commit) and manually creating subfolder for every change and paste somewhere link to file in specific folder (I know path to directory because I made this manually). This has many drawbacks too. It sounds very complicated (I made only simple page with D3.js!), I have to manually create folders, pay attention to paths and don't know how to deal with other branches than master (merges etc.).</li>
  </ol>
  <hr />
  <h1>Update 2020-07-07</h1>
  <p><strong>Re: HtmlPreview or RawGit, 1. problem</strong></p>
  <p>I've found another service for serving HTML directly from GitHub <strong>raw.githack.com</strong>:</p>
  <ul>
  <li><a href="https://raw.githack.com/" rel="nofollow noreferrer">https://raw.githack.com/</a></li>
  </ul>
  <p>This one is different from others in that it has support for production URL.</p>
  <blockquote>
  <p>Use this URL in production <br>
  No traffic limits or throttling. Files are served via CloudFlare's CDN.</p>
  </blockquote>
  <p>So I can create link with CDN:</p>
  <pre><code>https://rawcdn.githack.com/mkczyk/test-experiment/d7a4c7953d2b9084ca520eeb4434dd6d6689880d/index.html
  </code></pre>
  <p>I assumed that I don't have to worry about using this link in my public demos.</p>
  <p>It solves my 1st problem from the way with serving HTML by external service. But 2nd problem with SHA remains. I still don't know how to dynamically create link to current commit in <code>README.md</code>. I submitted feature request for placeholder for hash of current commit: <a href="https://github.com/github/markup/issues/1363" rel="nofollow noreferrer">https://github.com/github/markup/issues/1363</a></p>