在使用 GitHub Pages 部署静态网站后，很多开发者会遇到 404 错误 的情况。本文将详细探讨导致这个问题的原因以及解决方案，帮助你顺利解决这一常见问题。
什么是 404 错误？
404 错误 表示服务器无法找到请求的资源。这通常意味着用户请求的页面或文件不存在，或者服务器无法找到它。对开发者而言，解决这一问题是非常重要的。
GitHub Pages 的部署方法
在开始探讨解决方案之前，我们需要了解在 GitHub 上部署项目的一些基本步骤：
- 创建 GitHub 仓库：在 GitHub 上创建一个新的仓库，名称可以是
username.github.io，其中username是你的 GitHub 用户名。 - 上传静态文件：将 HTML、CSS 和 JavaScript 文件上传到该仓库。
- 启用 GitHub Pages：在仓库设置中，找到 GitHub Pages 部分，选择 main 分支或特定的发布目录。
- 访问网站：通过
https://username.github.io访问你的网站。
导致 404 错误的常见原因
1. 文件路径错误
最常见的原因是资源的路径错误。确保所有的静态资源（如图片、CSS 文件等）的路径都是相对于当前页面的。推荐使用相对路径而不是绝对路径。
2. 构建工具配置问题
如果你使用了 Webpack、Gulp 等构建工具，请确保输出的文件路径和 GitHub Pages 的路径一致。如果不一致，就可能出现 404 错误。
3. HTML 文件命名问题
确保你的主页文件命名为 index.html。如果命名为其他名称，例如 home.html，在访问根目录时将无法找到该文件。
4. 分支设置问题
检查 GitHub Pages 的分支设置。通常，应该选择 main 分支，或者如果你选择了其他分支，请确保该分支中包含了你的静态文件。
解决 404 错误的方法
1. 检查路径
确认所有的文件和资源路径都是正确的。
- 使用 相对路径 来引用资源。
- 在浏览器中右键点击 404 页面，查看“检查”工具，查看控制台的错误信息。
2. 调整构建配置
如果你使用了构建工具，确保在 webpack.config.js 或相关配置文件中，输出的公共路径是正确的。
3. 主页文件检查
确保你的主页是 index.html，且位于根目录下。
4. 更新分支设置
在 GitHub 仓库的设置中检查 GitHub Pages 的分支配置，确保选择了正确的分支。也可以尝试切换回 main 分支进行测试。
常见问题解答（FAQ）
GitHub Pages 是什么？
GitHub Pages 是一个免费的静态网站托管服务，允许你直接从 GitHub 仓库中部署网站。它非常适合个人博客、项目展示等。
GitHub 部署后多久会生效？
一般情况下，GitHub Pages 在更改配置或上传新文件后会在几分钟内生效。但有时也可能需要稍等片刻。
如何查看我的网站是否正在运行？
可以在浏览器中访问 https://username.github.io 来查看你的 GitHub Pages 网站是否正常运行。如果出现 404 错误，请检查上述提到的各个方面。
我可以使用自定义域名吗？
是的，GitHub Pages 支持使用自定义域名。你需要在 GitHub 仓库的设置中配置自定义域名，并在 DNS 服务提供商那里进行相应的配置。
总结
遇到 GitHub 部署后的 404 错误，通常是由于文件路径、命名问题、分支设置等原因造成的。通过仔细检查和调整设置，绝大部分问题都可以得到解决。如果你还有其他问题，可以参考 GitHub 官方文档，或在开发者社区中寻求帮助。
