Github Pages部署时，上传HTML文件后页面显示404怎么办？

Question

在使用GitHub Pages部署静态网站时，上传HTML文件后页面显示404错误，通常是由于配置问题或路径设置不当导致。以下是一些常见原因及解决方法： 1. **分支选择错误**：确保部署在正确的分支（`gh-pages` 或 `main`）。如果使用自定义分支，请检查仓库设置中的“GitHub Pages”选项是否正确配置。 2. **文件路径问题**：默认情况下，GitHub Pages会将`index.html`作为主页加载。如果文件名或路径不正确，会导致404错误。检查文件是否位于根目录或指定的子目录中。 3. **自定义域名问题**：如果你使用了自定义域名，请确认`CNAME`文件内容正确，并且DNS解析已正确配置。 4. **缓存问题**：浏览器缓存可能导致旧配置残留，尝试清除缓存或使用隐身模式访问。 若问题仍未解决，可查看GitHub Pages的状态日志以获取更多信息。

Answer 1

GitHub Pages 部署静态网站时 404 错误的常见原因及解决方法

1. 分支选择错误

在使用 GitHub Pages 部署静态网站时，分支的选择至关重要。GitHub Pages 默认支持两种主要分支：`gh-pages` 和 `main`。

• 如果您的仓库使用的是 `main` 分支，请确保在仓库设置中的“GitHub Pages”选项选择了 `main` 分支作为源。
• 如果您使用的是自定义分支（例如 `dev` 或其他命名），请确认是否在设置中正确配置了该分支为发布源。

检查步骤如下：

1. 进入仓库的 Settings 页面。
2. 找到左侧菜单中的 "Pages" 选项。
3. 确认 Source 下拉框中选择的分支是否正确。

2. 文件路径问题

GitHub Pages 默认会将根目录下的 `index.html` 文件作为主页加载。如果文件名或路径不正确，就会导致 404 错误。

以下是排查路径问题的建议：

问题描述	解决方法
文件不在根目录	确保 `index.html` 文件位于仓库的根目录下。
使用子目录部署	如果需要从子目录部署，请在仓库设置中指定正确的子目录路径。

3. 自定义域名问题

当您使用自定义域名时，可能会因为 `CNAME` 文件配置错误或 DNS 解析未生效而导致 404 错误。

以下是检查和解决方法：

1. 确保仓库根目录下存在一个名为 `CNAME` 的文件。
2. `CNAME` 文件的内容应为您的自定义域名，例如 `example.com`。
3. 检查 DNS 设置，确保 A 记录指向 `github.io` 的 IP 地址，或者 CNAME 记录指向 `.github.io`。

4. 缓存问题

浏览器缓存可能导致旧配置残留，从而引发 404 错误。以下是清除缓存的方法：

• 清除浏览器缓存：打开浏览器设置，找到清除浏览数据选项，勾选“缓存”并清除。
• 使用隐身模式访问：隐身模式不会加载缓存内容，可以验证问题是否由缓存引起。

5. 深入排查与日志分析

若上述方法均未能解决问题，可以通过查看 GitHub Pages 的状态日志获取更多信息。

以下是一个简单的排查流程图：

graph TD;
    A[开始] --> B{分支是否正确};
    B --是--> C{路径是否正确};
    C --否--> D[检查文件路径];
    C --是--> E{域名是否正确};
    E --否--> F[检查 CNAME 和 DNS];
    E --是--> G{缓存问题};
    G --是--> H[清除缓存];
    H --> I[重新测试];

通过以上流程图，您可以逐步定位问题所在。