如何解决GitHub展示readme.md而非create-react-app游戏应用的问题？

1. 先构建React项目静态文件 #

create-react-app的源码没法直接被GitHub Pages识别，必须先编译成静态资源：

• 在项目根目录执行命令：npm run build
  执行完成后会生成build文件夹，里面就是可以直接部署的静态网页文件。

2. 配置GitHub Pages部署 #

有两种靠谱的部署方式：

方式一：用gh-pages自动部署（推荐） #

• 安装依赖包：npm install gh-pages --save-dev
• 打开项目的package.json，添加两处配置：
  • 在scripts节点里新增：

    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
    

  • 在package.json根节点添加："homepage": "https://0mgABear.github.io/tictactoe"
• 运行部署命令：npm run deploy
  这会自动把build文件夹的内容推送到仓库的gh-pages分支，之后去GitHub仓库的「Settings」→「Pages」页面，设置部署分支为gh-pages、根目录，保存后等几分钟就能访问应用了。

方式二：手动上传静态文件 #

• 执行npm run build生成静态文件后，把build文件夹里的所有内容复制到仓库根目录（保留README.md，替换原有的源码文件）
• 提交并推送代码到GitHub主分支
• 同样去仓库「Settings」→「Pages」页面，设置部署分支为主分支、根目录，保存等待部署完成。

3. 关键提醒 #

• 别手动移动index.html和index.js，create-react-app的源码结构是固定的，乱改会导致项目无法正常构建。
• 如果之前动过文件结构，先把项目恢复到create-react-app的初始结构，再执行构建和部署步骤。

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