NIKO'S BLOG

使用gh-pages分支展示github项目

很多人都使用 github 的${username}.github.io仓库来托管自己的静态博客,但其实 github 的每个仓库都支持通过${username}.github.io/${repoName}的方式来访问,只需要创建一个gh-pages分支

比如,我创建了一个名为demo的仓库,在master分支下存放 demo 的 vue 源码,如果我想展示这个项目 build 出来后是什么样子,只需要在这个仓库下创建一个gh-pages分支,然后把npm run builddist文件夹下的文件 push 到这个分支下,就可以使用http://${username}.github.io/demo这样的方式来预览这个项目的实际效果了。

但是这样做,每次修改了源码后,还要手动把 build 后的文件 push 到gh-pages分支,很不方便。实际上,有开源的工具gh-pages能让我们更方便的完成这个操作。

首先npm i -D gh-pages安装这个依赖

然后在package.json中添加一条命令:

1
2
3
4
5
6
// package.json
{
"scripts": {
"deploy": "gh-pages -d dist"
}
}

这样,每次修改了源码后,只需要先 build 一下,然后npm run deploy就自动部署到 gh-pages 分支了

另外,需要注意的一点,如果你的${username}.github.io仓库绑定了域名,那么你需要展示的仓库需要添加域名解析的 CNAME 文件。

这里以我的一个用来展示自己封装的 vue 组件的仓库components-repo为例,由于我的nikolausliu.github.io仓库绑定了nikolausliu.top域名,所以我需要添加内容为nikolausliu.top的 CNAME 文件。我的这个项目是使用@vue/cli搭建的,在根目录下的 public 文件夹下新建一个 CNAME 文件(新建一个 CNAME.txt 文件,里面输入nikolausliu.top,然后重命名把扩展名去掉就好了,在 vscode 里可以直接新建不带扩展名的 CNAME 文件),然后 build 后就会自动把 CNAME 文件也打包到 dist 目录了。

还有一点需要注意,就是要正确配置publicPath,配置部队的话,css 和 js 等资源将无法正确访问,还是以我上面的项目为例,仓库名为components-reop,则 vue.config.js 配置如下:

1
2
3
4
module.exports = {
outputDir: 'dist',
publicPath: process.env.NODE_ENV === 'production' ? '/components-repo/' : '/',
}

如果还要深挖的话,自动化部署的过程应该可以利用 github actions 功能,不过这一块之前只是简单看了下,还没使用过,这里就不做说明了,以后深入学习了github actions后再单独写一篇博文

笔者注

博客内文章若不另外注明,均为原创。转载请注明出处,谢谢。

博客内容主要是对新知识的归纳、总结。记录博客的目的也是为了方便自己日后的巩固复习。欢迎大家提出文章中理解错误的地方,不胜感激。若文章对你有帮助,将是我的荣幸。