如何使用 Github Page部署自己的前端项目

如果你也想部署一个属于自己的静态网站但苦于没有属于自己的服务器，今天这篇文章教你如何在不购买服务器的情况下在GitHub上部署自己前端项目

在GitHub Page上部署自己的网站有两种方式，本篇文章主要讲述的是后者

1. 新建仓库时命名为.github.io
2. 利用仓库分支目录部署（仓库命名无要求）

接下来就让我们学习该如何配置吧,以vue-cli项目为例

1. vue.config.js配置修改输出目录为docs,baseUrl为 /仓库名/ ,然后运行打包命令

2. 进入github仓库点击右上角的setting

3. 进入设置界面后点击左侧目录的Pages,此时可以看到右侧可以选择分支以及目录，（分支是由我们 自己创建的，但是目录只能选择/(root)和/docs,因此需要修改打包目录）

4. 选择完分支和目录后点击save按钮保存，等个一两分钟即可成功

5. 每次更新只需要修改完代码重新打包并推送至远程仓库即可自动更新网站