如何在Node.js/TypeScript项目中通过GitHub Pages托管指定HTML文件

• GitHub Pages有默认首页优先级：index.html > index.md > README.md，你的页面文件名是My Map.html，不符合默认规则，因此会优先展示README。
• 可能npm run build未将目标HTML打包到输出目录（通常是dist或build），或者部署源未指向该目录。
• 部署源的分支/文件夹配置错误，导致GitHub Pages无法定位到你的HTML页面。

方法一：修改HTML文件名（最简方案） #

• 将My Map.html重命名为index.html，确保它位于项目根目录或构建输出目录的根路径下。
• 若为构建生成的文件，需修改项目配置（如webpack、vite的配置文件），让打包后的首页输出为index.html。

方法二：配置GitHub Pages自定义首页 #

在项目根目录创建_config.yml文件，添加以下内容：

permalink: /
include: ["My Map.html"]

该配置会指定My Map.html作为首页，注意文件名需与实际完全一致（包括空格）。

方法三：调整构建与部署源设置 #

1. 确保构建命令正确打包HTML：
   • 检查项目构建配置文件（如vite.config.ts、webpack.config.ts），确认入口或静态资源规则包含My Map.html，保证npm run build能将其输出到指定目录（如dist）。
2. 调整GitHub Pages部署源：
   • 进入仓库「Settings」-「Pages」选项，将「Source」设置为「Deploy from a branch」，选择对应分支（如main），并指定构建输出目录（如/dist）；若HTML在根目录，直接选择根路径/。

• 文件名含空格可能引发路径解析问题，建议改为无空格命名（如MyMap.html）。
• 部署后可查看GitHub Pages的部署日志，排查文件加载失败的具体原因。

内容的提问来源于stack exchange，提问作者Dilek