将任意应用部署到 GitHub Pages
内容提要
GitHub Pages是一个用于托管网站和项目的平台，本文介绍了如何在主分支中管理应用程序，并轻松地将代码部署到gh-pages分支。可以选择React、Vue、Gatsby、Next、Nuxt、Gridsome等前端框架，在主分支中构建应用程序，并使用npm run build命令构建代码，然后直接在gh-pages分支上托管。最快的方法是使用gh-pages包。通过npm i gh-pages -D或npm i gh-pages -g安装包，并将简单的脚本添加到package.json中。运行npm run deploy命令将构建文件夹的内容推送到存储库的gh-pages分支。如果要创建用户页面，请创建一个名为username.github.io的存储库，并在该分支中构建应用程序。在部署应用程序时，使用gh-pages命令将构建文件夹的内容推送到gh-pages分支。如果源代码位于私有存储库中，可以创建一个名为about的公共存储库，源代码将驻留在私有存储库中，构建生成的静态内容将放入公共存储库。可以使用不同的选项来自定义gh-pages包的行为，如包含dotfiles、更改提交消息等。
延伸解读
部署流程的核心机制
文章强调将应用源代码保留在主分支，而将构建产物部署到 gh-pages 分支。这种分离让开发与发布互不干扰，也便于版本管理。使用 gh-pages 包可以自动化这一过程：运行 npm run deploy 时，它会先执行构建命令，再将构建文件夹（如 dist）的内容推送到指定分支。理解这一机制有助于避免手动复制文件带来的错误。
用户页面的特殊配置
若要创建用户页面（username.github.io），需注意部署目标分支的不同。文章指出，此时应将构建目录推送到 master 分支，而非默认的 gh-pages 分支。这可以通过在 deploy 脚本中添加 -b master 参数实现。这一细节常被忽略，导致页面无法正确访问。正确配置后，网站将可通过 http://username.github.io 访问。
私有仓库的部署策略
当源代码位于私有仓库时，文章建议创建一个名为 about 的公共仓库，用于存放构建生成的静态内容。这样既能保护源代码，又能通过 GitHub Pages 公开托管网站。部署时，gh-pages 命令会将构建文件夹推送到该公共仓库的指定分支。这一策略适合需要隐藏源码但公开演示的项目。
自定义部署行为
gh-pages 包提供了一些选项来调整部署行为。例如，使用 -t 参数可以包含点文件（如 .nojekyll），避免某些文件被忽略；使用 -m 参数可以自定义提交信息，便于追踪每次部署。通过 gh-pages --help 可以查看所有支持的选项。合理利用这些选项能提升部署的灵活性和可维护性。
Q&A
如何将应用程序部署到GitHub Pages？
可以使用gh-pages包，通过npm run build构建代码，然后运行npm run deploy将构建文件夹的内容推送到gh-pages分支。
可以使用哪些前端框架在GitHub Pages上构建应用？
可以选择React、Vue、Gatsby、Next、Nuxt、Gridsome等前端框架。
如何创建用户页面并部署到GitHub Pages？
创建一个名为username.github.io的存储库，并在该分支中构建应用程序，使用gh-pages命令将构建文件夹内容推送到gh-pages分支。
如果源代码在私有存储库中，如何处理静态内容？
可以创建一个名为about的公共存储库，源代码驻留在私有存储库中，构建生成的静态内容将放入公共存储库。
如何自定义gh-pages包的行为？
可以使用不同的选项，如包含dotfiles或更改提交消息，来定制gh-pages包的行为。
如何安装gh-pages包？
可以通过命令npm i gh-pages -D或npm i gh-pages -g来安装gh-pages包。
