在日常的前端开发中，我们经常需要将自己的项目部署到 github pages 上。手动操作虽然简单，但对于大型项目或者频繁部署的项目来说，会非常繁琐。而 deploy-to-gh-pages 这个 npm 包可以帮助我们自动部署到 github pages 上，非常方便。
安装
使用 npm 安装 deploy-to-gh-pages：
npm install --save-dev deploy-to-gh-pages
安装之后，我们就可以使用该包了。
部署步骤
接下来，我们来看一下具体的部署步骤。
1. 在 github 上创建一个新的 repository
我们需要在 github 上创建一个新的 repository，并且将其命名为 username.github.io，其中 username 指的是你的 github 用户名。如果你已经创建过这个 repository，那么就可以直接跳到下一步。
2. 生成一个 ssh 密钥
我们需要生成一个 ssh 密钥，并将其添加到 github 上。具体步骤如下：
- 打开终端（或者 Git Bash）；
- 运行以下命令：
ssh-keygen -t rsa -b 4096 -C "your_email@example.com"，其中 "your_email@example.com" 替换成你自己的邮箱； - 按照提示一路回车确认，直到命令执行成功；
- 运行以下命令：
cat ~/.ssh/id_rsa.pub，输出公钥； - 复制公钥，添加到 github 上：在 github 上，依次点击 Settings -> SSH and GPG keys -> New SSH key，将公钥添加到其中。
3. 在本地项目中添加部署脚本
我们需要在本地项目中添加一个部署脚本，在该脚本中进行部署操作。具体步骤如下：
- 在项目根目录下创建一个
deploy.sh文件，内容如下：
-- -------------------- ---- ------- -------------- -- - --------- --- -- - -- --- --- ----- - --------- -- ---- - --- --- ----------- --- ---- --- --- -- --- ------ -- -------- - ----- ------ -- --- ---- -- ---------------------------------------------- ------ - -------- -- -
其中，npm run build 是构建命令，这里以 vue-cli3 的构建命令为例；username 替换成你的 github 用户名。
- 给脚本添加执行权限：
chmod +x deploy.sh
4. 在 package.json 中添加脚本
我们需要在 package.json 中添加一个脚本，以便执行 deploy.sh。具体步骤如下：
- 在
scripts字段中添加一个deploy脚本：
"deploy": "./deploy.sh"
- 在
repository字段中添加对应的 github 仓库地址：
"repository": "git@github.com:username/project-name.git"
5. 部署
部署流程就非常简单了：
- 在终端中执行以下命令：
npm run deploy
- 等待执行成功，访问
https://username.github.io，即可查看部署好的页面。
结语
deploy-to-gh-pages 这个 npm 包可以帮助我们自动化部署到 github pages 上，非常实用。本文详细介绍了它的使用流程，对于初学者来说具有一定的指导意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f091f7b403f2923b035c012