如何在GitHub单个代码仓库中创建并分享多个页面

GitHub Pages本质是将你指定的部署分支/目录作为静态文件服务的根目录，访问路径和仓库内的文件/目录结构完全对应，你可以通过以下两种常用方式实现多页面部署：

方法1：根目录直接新增多入口HTML #

不需要新建目录，在部署根目录下直接新增不同名称的HTML文件即可：

• 除了默认的index.html，你可以新增about.html、project.html等文件
• 对应访问路径为：https://<你的用户名>.github.io/<仓库名>/<文件名>.html

方法2：按目录分类管理页面 #

如果需要分类管理多个项目/页面，推荐新建对应子目录存放资源：

• 每个子目录下可以放独立的index.html，访问路径更简洁，比如新建tool目录后放入index.html，访问路径为https://<你的用户名>.github.io/<仓库名>/tool/
• 子目录下也可以放任意名称的HTML、静态资源，比如子目录demo里的test.html，访问路径为https://<你的用户名>.github.io/<仓库名>/demo/test.html

你可以参考以下示例仓库结构规划：

GitHub Pages部署根目录
├── index.html          # 站点首页，访问根路径即可打开
├── resume.html         # 简历页，访问 /<仓库名>/resume.html
├── todo-tool/
│   └── index.html      # 待办工具页，访问 /<仓库名>/todo-tool/
└── weather-demo/
    ├── index.html      # 天气demo首页，访问 /<仓库名>/weather-demo/
    └── detail.html     # 天气demo详情页，访问 /<仓库名>/weather-demo/detail.html

常见注意事项 #

• GitHub Pages的路径区分大小写，文件名、目录名的大小写要和访问时输入的完全一致，否则会返回404
• 静态资源（CSS、JS、图片）引用建议使用相对路径，和文件层级对应，避免加载失败
• 部署完成后如果访问不到新页面，可以等待1-5分钟让GitHub缓存更新，或清除浏览器本地缓存后重试
• 公开仓库的Pages页面所有人可访问，私有仓库的Pages页面仅授权用户可访问

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