前言#
最近用 Vue 做了几个小 Demo，上传到 Github 中。
以前就看到别人仓库中的项目可以展示出来，让人体验一下这个项目，感觉非常炫酷，所以也打算自己去弄一下试试。如果是一些小项目或者 Demo 的话，是可以直接在 Github Pages 的静态页面上展示的。
搭建 Github 博客网页#
在 Github Pages 中我们还可以搭建自己的博客。网上有很多教程教你怎么搭建，用搜索引擎搜一下就可以搜出去多教程出来。
最简单的方法就是 fork 别人已经设置好的博客模板，然后修改里面的博客内容，把别人的博客变成自己的博客。
Github 上就有许多非常好的博客模板，我们可以fork一份博客项目，然后修改后变成自己的博客，这里非常感谢他们的无私分享！
生成静态文件#
我们知道 Github Pages 上只支持静态页面，不支持动态页面。如果你要在上面展示 Demo 的话，就需要把 Vue Demo 打包成静态的网页才能挂上去展示。
我们在使用vue-cli搭建 Vue 项目时，可以使用npm run build命令来打包项目，生成静态的文件。但是按照默认配置打包出来的静态文件是不支持直接用浏览器打开index.html来正常渲染展示的，因为它们的路径和开放环境时的路径不一样。当你直接打开打包后的index.html文件时，你在浏览器上可能只会看到一片空白或者是缺少一些样式的页面，而不是我们开发环境期望的页面。一般我们是需要启动一个 Node 后端服务器去运行这些打包后的静态文件。
那么我们有什么解决的办法呢？
分析原因后，我们发现用npm run build打包后，html文件在引用css、js这些静态文件时的路径是不对的，使得浏览器加载这些静态文件。
所以需要修改webpack的打包配置路径，使生成的静态文件的引用路径符合我们的预期。
可以通过修改配置文件目录下的config/index.js文件来修改打包路径。
assetsPublicPath: "/"; // 修改前
assetsPublicPath: "./"; // 修改后另外还需要修改构建目录下的build/utils.js文件，添加publicPath属性
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: "vue-style-loader",
publicPath: "../../", // 添加 publicPath
});
}修改完成后，重新输入npm run build进行打包，然后直接用浏览器打开打包后的文件index.html文件。
这时，你会发现页面已经被正常渲染，因为css和js文件被正常的引入到html中了！通过查看index.html文件的代码，发现link标签的href属性和script标签的src属性引用的文件都是以./开头的，说明路径正确。
注意：这种修改路径的方法只适合一些不需要从后端获取数据的前端页面，实际上我们用 Vue 开发前端页面时，一般都需要从后端服务器中获取数据。
this.$axios.get("api/data").then((res) => {
// ...
});不过，如果我们没有搭建后端服务器的话，可以引用本地的数据。比如从本地的json文件中获取数据，在获取前我们先把本地数据文件data.json拷贝一份到根目录的static文件夹中。
为了方便引用，我们在build/webpack.base.conf.js配置一下路径别名，如下：
alias: {
'src': resolve('src'),
'static': resolve('static')
}然后修改获取路径，不是通过url获取，而是通过本地的文件路径获取，这样就由服务器中获取数据变成引入本地的数据文件。
this.$axios.get("static/data.json").then((res) => {
// ...
});修改完成之后，使用npm run build重新打包，直接用浏览器打开index.html。
这时会发现数据已经正常填充到页面中。打开生成的static文件夹，可以发现本地数据文件data.json被复制其中(这是 Webpack 的插件功能)。
配置静态文件#
现在就差最后一步了，把生成的静态文件配置到 github 中去了。
先说下原理吧，就是把生成静态的文件push到项目的 gh-pages 分支中去，这样才能在 Github Pages 中展示项目。
下面说下实现的具体步骤：
因为前面修改了 Webpack 生成静态文件和获取数据的方法是为了在 Github Pages 中展示项目，在正常的生成环境中是不会这么做的，所以为了避免代码混乱，我没有在原来的项目文件夹中去直接修改，而是先拷贝一份副本出来，在拷贝的副本中去修改配置。
首先新建一个文件夹，命名为 gh-pages（名字可以自定）
mkdir gh-pages然后进入这个文件夹，克隆原来的项目:
cd gh-pages
git clone https:github.com/xxx/xxx.git按照前面的生成静态文件的方法去修改配置，再打包生成静态文件, 生成文件后可以先用浏览器打开index.html，测试下是否有问题。
npm install
npm run build然后把打包后的dist文件夹里面的index.html和static文件夹剪切到根目录里, 再把其他的文件全部删掉。
注意：因为node_modules文件夹里面的文件非常多，在 windows 下推荐使用rimraf这个工具来删除文件夹，速度非常快，使用前需要全局安装。
npm install rimraf -g
rimraf node_modules然后把这个文件夹的内容推送到远程仓库的中项目的gh-pages分支中去。
git add -A # 全部增加
git commit -m 'Message' # 提交
git checkout -b gh-pages # 创建并切换到 gh-pages 分支
git remote add origin https:github.com/xxx/xxx.git # 关联远程仓库，和前面的 clone 地址一样
git push -u origin gh-pages # 推送到远程的 gh-pages 分支中去，注意不是 master 分支最后，还需要在该项目中配置一下 Github Pages。推送成功后，我们可以打开 Github 网站的项目所在的仓库，看下静态文件是否已经在gh-pages分支里面。
然后点击仓库中的Settings按钮, 一直往下拉，直到看到GitHub Pages字体为止，在里面的Source目录下面选择gh-pages branch点击save（一般会自动生成的），然后就可以看到上面生成了展示的url，也就是项目展示的地址。url 的格式是：用户名.github.io/仓库名/。
最后在浏览器地址栏中输入这个url，按回车键就可以看到这个展示的项目了。
总结#
Github Pages 的静态页面，可以用来搭建博客，也可以用来展示小的项目或者 Demo，一般是用来展示仓库项目的文档。
Github 是全球最大的项目托管平台，世界上大部分的开发者都喜欢把自己的项目代码托管到这个平台上，你可以把自己的代码放到上面去和别人分享，也可以学习别人的代码，提供自己的编程水平。