随着前端工具的不断更新和迭代，部署项目已经变得越来越简单便捷。其中，使用 GitHub Pages 部署前端项目是最受欢迎的选择之一，因为它不仅提供了免费的托管服务，还可以方便地与 Git 仓库集成。然而，手动将代码推送到 gh-pages 分支的过程往往非常繁琐，而且需要一些 Git 基础知识。因此，我们可以使用 npm 包 gh-to-pages 来自动化这个过程。
什么是 gh-to-pages
gh-to-pages 是一个用于将项目部署到 GitHub Pages 的 npm 包，它可以自动将当前 branch 的文件部署到 gh-pages 分支上，并生成相应的 GitHub Pages 链接。此外，它还提供了一些额外的功能，例如可预览生成的页面等。
安装 gh-to-pages
首先，我们需要在项目中安装 gh-to-pages 包。打开终端，进入项目根目录，执行下面的命令：
npm install gh-to-pages --save-dev
其中，--save-dev 表示在项目开发依赖中添加该包。
配置 gh-to-pages
安装好 gh-to-pages 后，在 package.json 文件中添加以下配置：
-- -------------------- ---- -------
-
---------- -
--------- --------- -- ------
--
------------------ -
-------------- --------
--
----------- ------------------------------------------------
-其中，homepage 表示你的 GitHub Pages 首页地址，即 https://your-username.github.io/your-repo-name。此外，deploy 命令会将 ./build 目录的文件推送到 gh-pages 分支。
执行 gh-to-pages
完成配置后，我们就可以运行以下命令将项目部署到 gh-pages 分支了：
npm run deploy
这个命令将自动将 ./build 下的文件提交到 gh-pages 分支，并将生成的文件推送到远程。在 GitHub Pages 服务将生成新的网站后，我们就可以通过访问 https://your-username.github.io/your-repo-name 来查看网站了。
额外功能
除了部署外，gh-to-pages 还提供了一些额外的功能。例如：
预览功能
我们可以使用以下命令在本地预览生成的网站：
npx gh-pages -d build -s
这个命令将启动一个本地服务器，我们可以在浏览器中访问 http://localhost:8000 来查看网站。
更改静态资源 URL
如果我们的网站包含了一些静态资源（例如 JS 和 CSS 文件），我们需要将它们的路径配置为相对路径或绝对路径。然后，我们可以使用以下命令将这些资源 URL 更新为正确的地址：
npx gh-pages -d build -u "https://your-username.github.io/your-repo-name"
这个命令将将 ./build 目录下的所有资源 URL 更新为 https://your-username.github.io/your-repo-name。
总结
gh-to-pages 是一个帮助我们快速部署项目到 GitHub Pages 的 npm 包。在本文中，我们介绍了如何安装和配置 gh-to-pages，以及如何运行它来部署网站到 gh-pages 分支。我们还介绍了一些额外的功能，例如预览和更新静态资源 URL。希望这篇文章对你有帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055aa581e8991b448d81ff