如何使用github pages 部署静态网站

为什么写这篇文章
相信很多小伙伴都有过这样的经历，自己写了一个项目，想要展示给别人，炫一下，但是苦于没有自己的服务器而一直没有部署的机会。而GitHub Pages就给我们提供了这么一个平台。
今天我就以Vue项目为例，介绍一下如何使用GitHub Pages去部署一个静态项目。

话不多说，直接上干货

提交代码到github
这里我默认大家都是有自己的项目的
代码提交之后，我们进入到settings下边来



选中pages

选中我们的代码提交的分支，通常都是在 master 分支

选中之后，我们的代码会被部署到一个静态的web服务器下边来，至于是什么样的web服务器，这俺也不知道……

这里他会把网站的根目录放在服务器的 www目录下，也可以选择将 docs 这个目录放在 www 目录下，通常如果部署的是一个个人博客网站的话会选择使用 docs，但我们这里显然不是，所以就用默认的就好。

点击save

这里给我们返回了一个链接，我们可以通过这个链接访问到我们刚刚部署的项目。

点开一看，发现好像不对劲儿，这好像并不是我部署的项目啊，但是又有点似曾相识的赶脚，没错他是我们项目里readme.md里边的内容。（别打我，我是故意写一个错的给你们看的，狗头保命）

那这到底是问什么呢？

如果你去看GitHub pages的文档的话，他里边是有说的，你的项目里边需要有一个 index.html 文件，它会把这个文件当作你网站默认的首页。如果没有的话，就会把 readme.md 转化成网页的形式，作为首页展示给我们。

那如何解决这个问题呢？且看下文继续讲解

之前提交代码的时候我们的代码是没有打包的，对吧。这会儿咱先回去给他打个包。

打包之后，重新提交。这会儿你又会想了，通常打包之后产生的 dist 目录不是不要提交的吗？

都坐下，听我讲！

打完包之后先检查一下你的 .gitignore 这个文件里边是否有 dist 这个目录，有的话，给他删掉先。

然后把打包之后的代码提交上去。

通过这条命令，创建一个 gh-pages 分支，作为当前分支的子分支，也就是 master 分支的子分支，并将 dist 推送进去。

git subtree push --prefix dist origin gh-pages
这样就多了一个分支出来，并且里边的内容都是打包之后的内容。

现在重新进入到 settings 的 pages 里边，将分支切换成我们刚刚创建的新分支。

再保存瞅瞅！还是老的，清空缓存强制刷新一下。

啥也没有了，东西哪去了！！！

打开控制台，what！！！

为什么会报一堆404！！！

打开network瞅瞅

好家伙，引用资源一个都没有加载进来。

一番摸索之后终于发现了问题所在

在加载资源的时候路径不对。发现问题--> 解决问题！


在 vue.config.js 这个配置文件中添加这个配置，然后重新打包。

这个时候打包出来的文件引用资源的时候就加上了项目根目录的绝对路径。

按之前的流程，重新提交一下代码，记得要把打包后的代码提交到 gh-pages 这个分支上！

提交之后重新刷新之前的链接，记得清空缓存刷新！！

经过九九八十一难，终于成功部署！！！

作者：向阳

欢迎关注微信公众号 ：大话前端