介绍
在前端开发中经常会遇到需要将静态页面发布到 Github Pages 上的情况。为了方便开发者，社区开发了一个 npm 包 github-pages-deploy，用于快速将静态页面部署到 Github Pages 上。本文将详细介绍如何使用该 npm 包。
安装
首先，我们需要安装该 npm 包。在命令行中输入以下命令：
npm install github-pages-deploy
使用
接下来，我们需要设置 Github Pages 的相关信息。在项目根目录下新建一个文件 deploy.json，内容如下：
{
"src": "build",
"dest": "gh-pages",
"branch": "gh-pages",
"message": "Deployed using github-pages-deploy"
}src：需要上传的文件或文件夹路径，可以是相对路径或绝对路径。
dest：Github Pages 上的路径，例如 /my-page。
branch：Github Pages 所在的分支，默认是 gh-pages。
message：上传成功后 commit 的 message。
然后，在命令行中输入以下命令：
npx github-pages-deploy
这会将 src 目录下的文件上传到 Github Pages 上，发布到 dest 路径下。
示例代码
我们可以通过以下方法创建一个示例项目：
mkdir github-pages-demo cd github-pages-demo echo "# Github Pages Demo" > README.md npx create-react-app ./
然后，我们需要安装 github-pages-deploy：
npm install github-pages-deploy
接着，在项目根目录下新建一个 deploy.json 文件，内容如下：
{
"src": "build",
"dest": "/github-pages-demo",
"branch": "gh-pages",
"message": "Deployed using github-pages-deploy"
}修改 package.json 文件，在 scripts 中新增一个 deploy 命令：
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"deploy": "npx github-pages-deploy"
},现在，我们可以通过以下命令部署静态页面到 Github Pages：
npm run build npm run deploy
这将会将 build 目录下的文件上传到 Github Pages 上，地址为 https://<username>.github.io/github-pages-demo/。
总结
在本文中，我们介绍了如何使用 npm 包 github-pages-deploy 将静态页面部署到 Github Pages 上。通过该包的介绍和示例代码，可以帮助开发者更好地了解和应用该工具，并提高前端项目部署的效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedac5ab5cbfe1ea06109d9