如何在 GitHub 上运行 HTML 文件

如果您经常访问 GitHub,您可能会遇到一些有趣的 HTML 代码或项目,并且想要运行它们而不仅仅是查看源码。本文将介绍如何在 GitHub 上运行 HTML 文件。

方法一:使用 GitHub Pages

如果 HTML 文件在某个仓库中,您可以使用 GitHub Pages 将其部署为静态网站。这意味着您可以通过浏览器访问该文件,就像访问任何其他网站一样。

以下是如何在 GitHub 上启用 GitHub Pages:

  1. 在您的仓库中,单击 Settings(设置)选项卡。
  2. 向下滚动到“GitHub Pages”部分。
  3. 在“Source”下拉菜单中选择“master branch”,然后单击“Save”。
  4. 您的 GitHub Pages 网址现在应该显示在“GitHub Pages”部分下方。

现在,您可以通过在浏览器中输入该网址来访问您的 HTML 文件。

例如,如果您的 GitHub Pages 网址是 https://username.github.io/repo-name/,则您可以通过访问 https://username.github.io/repo-name/path/to/file.html 来访问名为“file.html”的 HTML 文件。

方法二:使用在线 HTML 阅读器

还有一种方法是使用在线 HTML 阅读器,例如 JS BinCodePen。这些工具允许您在浏览器中编辑和预览 HTML、CSS 和 JavaScript。

以下是如何在 JS Bin 中运行 GitHub 上的 HTML 文件:

  1. 打开 JS Bin 网站。
  2. 在左侧面板中,将 HTML 代码粘贴到“HTML”选项卡中。
  3. 在左侧面板中,将 CSS 代码粘贴到“CSS”选项卡中。
  4. 在左侧面板中,将 JavaScript 代码粘贴到“JavaScript”选项卡中(如果有)。
  5. 单击右上角的“Run”按钮以查看结果。

示例代码:

--------- -----
------
------
    ------------- --------------
-------
------
    ---------- -----------
    ------- -- -- ------- -- - ------ ---- ---------
-------
-------

结论

通过本文介绍的两种方法,您现在可以在 GitHub 上运行 HTML 文件了。使用 GitHub Pages 可以方便地将文件部署为静态网站,而在线 HTML 阅读器则提供了一种快速预览和编辑 HTML 的方式。希望这篇文章对您有所帮助!

来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/8638