修复 GitHub 页面上损坏的相对链接

GitHub Pages 提供了一种托管静态 Web 内容的便捷方式。但是，有时您可能会遇到令人沮丧的体验：您的网站的相对链接在本地机器上有效，但在 GitHub Pages 上部署时却无效！

本指南将引导您了解解决此问题的选项。在本指南中，我们将研究使用Webpack和React Scripts打包的网站的解决方案。本指南假设您已基本了解如何将静态内容部署到 GitHub Pages。

当您部署到 GitHub Pages 时，您网站的基本 URL 具有以下结构：https://{org}.github.io/{repo}。为您的 GitHub 组织创建一个子域，并将您的存储库名称作为固定路径附加。这意味着如果您的 GitHub 组织名称是“company”，您的存储库名称是“my-static-website”，那么您的网站将托管在https://company.github.io/my-static-website。

相反，当您在本地开发时，您可能会从localhost:3000提供服务，而无需路径参数。如果您想在托管在localhost:3000/static/css/styles.css的网站中包含 CSS 文件，则需要以下 HTML 代码片段。

由于href属性以/开头，因此它是绝对路径。这意味着您的浏览器通过添加域名来查找资源。您的浏览器将：

• 在本地测试时，查找localhost:3000/static/css/styles.css处的资源
• 在 GitHub Pages 上测试时，请在company.github.io/static/css/styles.css查找资源。这是不正确的资源位置。如上所述，您的资源托管在company.github.io/my-static-website/static/css/styles.css。

缺少my-static-website路径段。在以下部分中，我们将了解如何配置工具以正确生成链接。

如果您的网站直接使用Webpack捆绑静态资源，则通常不会手动创建<link />和<script />标签。Webpack 提供公共路径配置选项来控制基本路径。在我们的例子中，当部署到 GitHub Pages 时，我们希望基本路径为my-static-website ，而当部署在 GitHub Pages 上时，则不需要基本路径。

使用以下publicPath更新你的webpack.config.js。

在生产模式下构建时，应该会生成正确的路径。如何构建和部署 Webpack 项目超出了本指南的范围，但是，您可以在我的 d3-chart-samples 存储库中看到此操作的完整示例。

如果您使用的是 React Scripts，则无法直接访问webpack.config.js文件。这意味着您需要以其他方式编辑配置。幸运的是，这同样简单。

将package.json文件的homepage属性更改为您的基本地址。

它看起来应该是这样的：

解决方案构建完成后，路径段my-static-website将存在。您可以在Yoga9 的 SnapShot存储库中找到部署到 GitHub Pages 的 React 应用的完整示例。此存储库使用 React Scripts 和上述配置来修复损坏的相对链接。

您已经了解了部署到 GitHub Pages 后链接可能断开的原因，并且我们研究了react-scripts和webpack的解决方案。如果您使用其他捆绑工具，则可能会有非常相似的配置来解决相对链接断开的问题。