如何部署 Github 仓库到 Github Pages

Github Pages 是 Github 提供的开放的公共静态页面搭建托管服务。通过 Github Pages 可以搭建免费的静态博客网站(比如本网站),或者实现静态 demo 演示。

那么,如何将 Github 仓库 部署到 Github Pages 呢?

以本次百度前端学院的作业 task0001 为例说明:

新建一个 Github 仓库

新建一个 task0001 仓库,添加 README.mdLICENCE 文件。此时处于 master 分支下。

生成 GitHub Pages

Settings 页面,找到 Automatic Page generate 按钮,点击并继续后面的步骤,完成 GitHub Pages 的部署。

此时访问 http://huangtengfei.github.io/task0001/ ,会看到一个默认页面,这是 GitHub 在项目的 master 分支下面自动新建的一个 gh-pages 分支,并在这个分支里面的代码定义了刚刚看到的部署成功的 Github Pages 页面的内容和样式。

也就是说,将静态文件提交到 gh-pages 分支,才能自动部署。

clone 远程仓库到本地并删除其中文件

在提交代码前,首先 clone 远程仓库到本地:

git clone https://github.com/huangtengfei/task0001.git

clone 下来默认为 master 分支,而我们需要编辑的是 Github Pages 分支,因为这个分支才能够定义 Github Pages 的内容和样式。需要执行下面的命令在本地创建一个和远程对应的 gh-pages 分支并切换过去(先切换到 task0001 目录下再执行下面命令):

git checkout -b gh-pages origin/gh-pages

此时,可以看到在文件夹 task0001 下面的文件时远程分支 gh-pages 的内容了。

然后,删除里面的所有文件,因为这些是 Github 自动生成的,命令是:

git rm -rf .

添加文件并提交到远程分支

将需要展现的静态内容文件放到 task0001 文件夹下,添加到 git 仓库并提交:

git add -A
git commit -m "first commit"

提交代码到远程分支:

git push origin gh-pages

大功告成,刷新 http://huangtengfei.github.io/task0001/ 既可看到自己写的页面了。当然,因为缓存的原因有时候需要多刷新几次,或者 Ctrl + F5

参考

  1. 如何将你的github仓库部署到github pages
  2. Git 入门
坚持原创技术分享,您的支持将鼓励我继续创作!