npm创建的JS项目部署GitHub Pages如何指向src目录下的index.html

GitHub Pages默认优先读取部署分支根目录的index.html文件，找不到对应文件时才会自动渲染根目录的README.md，所以会出现显示异常问题。

常见疑问解答 #

• 不需要修改main分支的原有项目文件夹结构，也不用把index.html移动到原项目根目录
• 只需保证gh-pages部署分支的根目录存在可访问的index.html即可正常渲染站点

具体实现方案 #

方案1：手动处理gh-pages分支（已验证可用） #

• 切换到gh-pages分支：git checkout gh-pages
• 将src目录下的index.html、app.js拷贝到当前分支的根目录
• 提交改动并推送到远程仓库，等待GitHub Pages部署完成后即可正常访问站点

方案2：配置自动部署脚本（适合长期迭代的项目） #

可以通过配置npm脚本实现自动打包部署，无需每次手动操作：

1. 安装gh-pages部署工具：npm install gh-pages --save-dev
2. 在package.json的scripts字段中添加如下配置：

"scripts": {
  "dev": "lite-server",
  "build": "mkdir -p dist && cp src/* dist/",
  "deploy": "gh-pages -d dist"
}

3. 后续需要部署时直接执行npm run deploy，工具会自动将src目录下的文件打包后推送到gh-pages分支的根目录，全程不需要改动原有项目结构。

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