在前端开发过程中，我们会遇到需要将项目部署到云端服务器的情况。而 GitHub 作为全球最大的开源代码托管平台，为我们提供了一个免费的云端托管服务 - GitHub Pages。但是，常规的将项目部署到 GitHub Pages 上需要复杂的配置和操作。
此时，@jfschwarz/gh-pages 这个 npm 包就派上了用场。它是一个为了简化将网页部署到 GitHub Pages 上的 npm 包，可以帮助我们快速方便地将网页部署到 GitHub Pages 上。
本篇文章将详细介绍如何使用 @jfschwarz/gh-pages 包将网页部署到 GitHub Pages。
安装
使用 npm 包管理器安装 @jfschwarz/gh-pages:
npm install --save-dev @jfschwarz/gh-pages
使用
构建项目
在将项目部署到 GitHub Pages 之前，我们需要先构建我们的网站。这里以 React 项目为例：
npm run build
部署网站
@jfschwarz/gh-pages 包可以非常方便快捷地将网站部署到 GitHub Pages 上。
在 package.json 文件中添加如下脚本：
"homepage": "https://[用户名].github.io/[仓库名]",
"scripts": {
"deploy": "gh-pages -d build"
}其中，homepage 为我们的网站地址。
执行命令：
npm run deploy
即可将我们的网站部署到 GitHub Pages 上。
接下来我们来解释一下：
- 首先，我们在 package.json 上定义了 homepage，指向我们的 GitHub Pages 地址。
- 其次，我们添加了 deploy 命令，当我们执行 npm run deploy 时，会执行 gh-pages -d build，即将 build 文件夹下的内容推送到 gh-pages 分支。
- 最后，@jfschwarz/gh-pages 包会将我们所推送的内容部署在我们的 GitHub Pages 页面上。
示例
这里给出一个简单的 React 项目，演示如何利用 @jfschwarz/gh-pages 包部署到 GitHub Pages。
1. 创建 React 项目
npx create-react-app my-project cd my-project npm start
2. 安装 @jfschwarz/gh-pages
npm install --save-dev @jfschwarz/gh-pages
3. 修改 package.json
"homepage": "https://[用户名].github.io/[仓库名]",
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"deploy": "gh-pages -d build"
},4. 部署项目
npm run build npm run deploy
至此，我们的网站已经成功部署到 GitHub Pages 上了。
总结
通过本文的介绍，我们可以使用 @jfschwarz/gh-pages 包来快速方便地将我们的网站部署到 GitHub Pages 上。使用起来非常简单，只需要进行少量的配置就可以愉快地部署了。有了 @jfschwarz/gh-pages 包，我们就能够方便地将我们的项目展示给更多的人，让更多人了解我们的项目。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600557d681e8991b448d4e1b