如何在 Nodejs 项目的 Github 页面上托管 HTML 文件

Question

我目前正在尝试在 Node.js 项目中托管我的 html 页面 (My Map.html)。它应该显示地图，该文件不在文件夹中。我尝试在终端中运行 npm run build 命令，然后通过 GitHub Pages 部署页面，但最终显示我的 ReadME 文件。我做错了什么以及如何让 GitHub 只显示我的 Node.js/Typescript 项目中的 HTML 页面？

Answer 1

我能够通过执行以下操作来解决这个问题：

• 将

  My Map.html

  更改为

  index.html

在我的

package.json

的根中，我添加了：

"homepage": "https://{username.github.io}/{repo}",

然后我写了

npm install --global gh-pages --save-dev

。我需要

--global

来确保 bin 文件位于我的

PATH

上，并且

--save-dev

应该将其添加为我的

package.json

中的依赖项

之后，就

npm run build && gh-pages -d build

。

-d

指定了我的输出构建目录。标准是构建的，但我的是公共的。如果不一样，就改变它。

最后，我确保在“设置”->“页面”部分中，选择 gh-pages 作为托管分支，并将目录保留为 /（根）。部署后就可以工作了！

我从一位名叫 Casey 的用户那里找到了 10 多年前提出的问题的答案，希望这对其他人有帮助。

Answer 2

要将 HTML 文件托管在 Node.js 项目中的 GitHub Pages 上，请按照以下步骤操作：

1. 创建

   docs

   文件夹：GitHub Pages 将自动发布存储库中

   docs

   文件夹中的内容。在 Node.js 项目的根目录中创建一个

   docs

   文件夹。

2. 移动 HTML 文件：将

   MyMap.html

   文件移动到新创建的

   docs

   文件夹中。

3. 设置

   package.json

   文件：在

   package.json

   文件中，添加以下行以将部署路径指定为

   docs

   文件夹。

   “脚本”：{ "build": "你的构建命令", “预部署”：“npm run build”， “部署”：“gh-pages -d 文档” }

将

your-build-command

替换为您用于构建项目的实际命令（例如，

npm run build

、

ng build

等）。

4. 安装

   gh-pages

   软件包：如果您还没有安装

   gh-pages

   软件包，它可以帮助您部署到 GitHub Pages。

   npm 安装 gh-pages --save-dev

5. 部署到 GitHub Pages：现在，运行以下命令来构建您的项目并将其部署到 GitHub Pages。

   npm 运行部署

部署过程完成后，您的

MyMap.html

文件应该可以通过 GitHub Pages 使用以下 URL 进行访问：

https://your-github-username.github.io/your-repo-name/MyMap.html

。

确保您的

MyMap.html

文件使用正确的相对路径引用所有必要的资源（CSS、JavaScript 文件、图像等），以确保它们在 GitHub Pages 上托管时正确加载。

通过执行这些步骤，GitHub Pages 上将仅显示 Node.js 项目中的 HTML 页面 (MyMap.html)，而不会显示其他文件，包括 README。