如何将你的github仓库部署到github pages

最新推荐文章于 2024-07-23 14:32:45 发布

CherishLyf

最新推荐文章于 2024-07-23 14:32:45 发布

阅读量1.4k

点赞数 1

分类专栏： github 文章标签： github

github 专栏收录该内容

1 篇文章 1 订阅

订阅专栏

注：此文章为转载，原文地址

如何将你的github仓库部署到github pages

第一步：新建一个github仓库”hello-ghpages”:

这里写图片描述
现在我们有了一个空的仓库，上面只有README.md和LICENCE文件，并且注意现在所在的分支是”master”。之所以强调这一点是因为接下来的步骤必须明确自己的github page在哪个分支下面，这个等会儿再介绍。

第二步：点击页面右边一列的“Settings”，跳转到项目设置界面：

这里写图片描述

第三步：在设置界面我们能够看到有一块的标题是“Github Pages”，点击这一块上面的“Automatic page generator”按钮：

这里写图片描述

第四步：在“New Project Site”页面，需要注意的是页面最下面的“tracking ID”。“tracking ID”的作用是使用Google的Analystics功能，该功能能够分析你的网站的访问量等网站数据，可以不填。如果需要使用该功能，可以参考链接https://support.google.com/analytics/answer/1032385?hl=en。然后点击“Continue to layout”按钮。

这里写图片描述

第五步，设置主题，就能够发布了：

这里写图片描述

这样，我们就能够通过链接：http://username.github.io/hello-ghpages/访问我们刚刚发布的页面了，其中username是你的github账户的名字。根据博主的经验，第一次部署的话，等待的时间是比较长的，大概是十分钟到十五分钟左右。所以如果你立马访问刚刚发布的页面可能会出现404错误，不要着急慢慢等上十多分钟，会得到你想要的效果的：

这里写图片描述

到这一步，我们已经完成了github pages的部署，但是在这个时候我们面临了两个问题，第一：最初生成的仓库只有两个文件，不存在定义我们现在看到的github pages样式、内容的文件；第二，既然我们没有定义这些文件，而我们看到的这些文件有必须是真实存在的，这些文件放在了哪里？答案就涉及到我们一开始提到的分支了。我们在使用“Automatic page generator”功能的时候，github会自动在你项目的“master”分支下面新建一个“gh-pages”分支，而这个分支里面的代码定义了我们刚刚看到的部署成功的github pages页面的内容和样式。

这里写图片描述

我想在这里是有必要简单介绍一下分支这个概念的。分支分成两种，一种是上面截图中看到的，这种叫做远程分支，另外一种是我们在使用Git进行版本控制的时候使用到的，叫做本地分支。在使用Git进行版本控制的时候，对于每一次提交，都会生成一个commit对象，这个commit对象包含了以下内容：　

提交信息元数据:包含了提交者、作者、提交时间等信息
一个包含指向 tree 对象（根目录）的索引：在提交之前，Git 会先计算每一个子目录的校验和，然后在 Git 仓库中将这些目录保存为树（tree）对象。commit对象中的这个索引指向了这个对象。参考一下《pro git》里面的这张图就能很好的理解

这里写图片描述

对于提交有了一定认识之后，分支就更好理解了，Git 中的分支，其实本质上仅仅是个指向 commit 对象的可变指针。结合实际，我们来分析一下：在新建一个github仓库的时候，从上面的图我们可以看到，github会自动创建一个提交叫做“Initial commit”，同时新建了一个master分支，这个master分支是指向“Initial commit”提交对应的commit对象；在部署github pages的时候，github新建了一个分支，并且产生了一次提交“Create gh-pages branch via Github”。你可以把上面的过程理解成下面几条命令：

git branch gh-pages    //在master分支下面新建一个gh-pages分支
git checkout gh-pages    //切换到新建的gh-pages分支
git rm -rf .        //由于master分支和gh-pages分支里面的内容完全不同，所以首先清空了所有文件
        //在清空的文件夹里面自定义新的文件,也就是上面截图中看到的gh-pages分支中的文件
git add .    //跟踪自己定义的文件
git commit -m "Create gh-pages branch via Github"    //提交本次修改

到目前为止，你就觉得一个问题应该是如何将现在看到了github pages定义成我自己想看到的效果，这里就需要用到Git了。

第六步：Clone远程仓库到本地：

这里写图片描述

第七步：clone下来默认为master分支，所以我们在文件夹里面看到的是master分支对应的内容。而我们需要编辑的是gh-pages分支，因为这个分支才能够定义github pages的内容和样式。我们需要执行下面的命令：

这里写图片描述

上面的命令的意思是说，在本地新建一个分支，本地分支的名字叫做“gh-pages”，这个新建出来的分支是在远程分支“origin/gh-pages”分支下面分化出来的，切换到新建出来的”gh-pages”分支，这个时候，我们看到在文件夹”hello-ghpages”下面的文件时远程分支”gh-pages”的内容了：

这里写图片描述