github 的 gh-pages 和 master 分支是啥关系

Posted 2023-03-14

Github创建项目仓库后随即只产生一个master分支，只需要再添加gh-pages分支就可以创建静态页面了。这利用了项目站点（即Project Pages）的方式。还有一种创建站点的方式叫做User/Organization Pages。下面介绍前者。

首先，创建一个名为 Github用户名.github.io 的仓库。

接着大家可以在这仓库里放一些静态页面，在外网访问: MuYunyun.github.io(拿我举例),就能访问到里面的静态资源了，由于博主已经把MuYunyun.github.io 绑定了 http://muyunyun.cn 域名，所以你实际上会访问到的是muyunyun.cn。

如果你想知道楼主如何基于github搭建自己的博客，可以看我的另外一篇文章。这次讲的重点主要是gh-pages，接着继续。

案例1

那可能有朋友会不解，既然楼主你说的 Github用户名.github.io 已经能展示页面了，那gh-pages是什么作用呢？

答：大家不会只有一个项目要展示的吧，万一你和楼主一样把 Github用户名.github.io 作为博客了，那不就没地方展示项目了吗？所以就有了gh-pages这个东东。

理解了这点，接着举个例子。

如上图所示，通过git-add -A、git -commit -m "..." 命令把完成的项目上传到github上以后，默认的是处于master分支，你可以进该案例地址看看项目结构。接着我们要做的是展现dist目录下的静态文件，那最关键的语句来了

git subtree push --prefix=dist origin gh-pages

意思就是把指定的dist文件提交到gh-pages分支上，

那这时候，我们看到已经多出了一个gh-pages分支，那么展示地址就是 Github用户名.github.io/创建的仓库名 拿我的这个案例来讲，它的展示地址就是 MuYunyun.github.io/gallery-by-react/ ,当然你看到的会是muyunyun.cn/gallery-by-react/。

案例2

那么上面这个例子展示的项目文件中的某个文件，那么如果我想把项目里的所有文件都展示那该如何做呢？上个最简单的案例

和上面那个案例一样，通过git add -A 以及 git commit -m "..." 把项目上传到github以后，目录结构如上图，我想让所有的界面包括js,css都展现出来，那该怎么做，其实只比上面那个例子多上一句git底层命令: git symbolic-ref

完整的步骤我上一遍：

text git:(master) git symbolic-ref HEAD refs/heads/gh-pages
git add -A
git commit -m "..."
git push origin gh-pages 参考技术A 他们就是两个 git 的分支而已。分支之间是分隔开的，在一个分支上修改不影响其他分支。 你可以有一个 master 分支作为主要分支，然后有个 develop 分支作为日常开发，没问题之后合并到主要分支；也可以像 gh-pages 一样，里面放的是网站的源码本回答被提问者采纳