在GitHub Pages部署Gatsby遇页面显示异常求助

我之前也踩过类似的坑，别慌，咱们一步步排查解决：

1. 确认GitHub Pages的发布源设置 #

先进入你的仓库主页，点击顶部的「Settings」，往下找到「Pages」选项：

• 检查「Source」区域，是否选择了正确的分支和目录。Gatsby部署默认会把静态文件推到gh-pages分支，所以这里要选gh-pages分支的/root目录，而不是默认的main（或master）分支。
• 如果之前选的是主分支，GitHub会优先渲染主分支里的README.md，自然就看不到你的Gatsby网站了。

2. 检查Gatsby部署命令与配置的正确性 #

确保你遵循的部署流程是正确的：

• 先安装依赖包：npm install gh-pages --save-dev
• 在项目的package.json里添加这两项配置：

  "scripts": {
    "deploy": "gatsby build && gh-pages -d public"
  },
  "homepage": "https://reenaverma.github.io/"
  

• 然后运行npm run deploy，这个命令会先构建Gatsby项目生成静态文件到public目录，再把public里的内容推送到gh-pages分支。

3. 验证gh-pages分支的内容 #

去仓库的分支列表里找到gh-pages分支，查看里面的内容：

• 应该包含Gatsby构建后的静态文件，比如index.html、static文件夹、asset-manifest.json这些，而不是和主分支一样的源码与README。如果内容不对，重新执行一次npm run deploy。

4. 等待缓存刷新或强制刷新页面 #

有时候GitHub Pages更新后不会立刻生效，可能需要等5-10分钟；也可以尝试按下Ctrl+F5强制清除浏览器缓存后再访问。

按照上面的步骤排查一遍，应该就能解决你的问题啦！

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