使用GitHub Pages搭建博客

使用GitHub Pages搭建博客

14 Jan 2015

新的一年开始，必定要作点美好的事情。GitHub 是一个开源项目的托管网站，相信不少人都听过。在上面有不少高质量的项目代码，咱们也能够把本身的项目代码托管到GitHub，与朋友们共享交流。

GitHub Pages 是Github为你们提供的一项服务，不只能为托管的项目创建主页，还能够为咱们创建我的博客。下面我就介绍我的博客是如何创建的，这里咱们先假设你们已经了解Git一些基本使用，未来我也会发布另一篇《Git基本安装和使用教程》。

在使用GitHub Pages创建我的博客前，咱们象征性地了解一下GitHub Pages创建的页面有哪些优势：

• 极简的配置，轻量级系统，无需数据库

• 使用标记语言，如Markdown

• 使用GitHub托管服务，免费300MB空间

• 能够绑定本身的域名

• 新版的GitHub Pages还支持CDN服务，提高访问速度

要说缺点的话，其实也有一些：

• 使用Jekyll 模板系统，属于静态页面。

• 基于Git操做，须要有必定的动手能力。

• 动态性很差，没有评论系统，不过能够本身配置Disqus 扩展。

整体来讲，GitHub Pages搭建的博客使用起来是很是方便的。配置好了以后，只须要使用例如Markdown编写本身的博文，扔到指定的文件夹里便可发布了。彻底不须要管理网站相关的事务，例如数据库、安全性等问题。

开始正题，下面的操做步骤参考自Github Pages的主页，再结合个人实际操做介绍各个步骤，并说一下可能遇到的问题和解决办法。

首先说明下面是以Window 7环境为例的，至于OS X，我操做的时候感受还更方便一些。。另外我采用的是Git Bash终端来操做，这在任何环境下都是同样的。

#搭建步骤

1. 建立一个新仓库 （Create a repository）

如图所示，登陆本身的GitHub主页，从右上角新建一个仓库，仓库名（Repository name）设置为你本身的用户名为前缀，例如个人是unclechen.github.io。

在GitHub上，每一个用户只容许拥有惟一的一个以本身的username为前缀，名为username.github.io的仓库。这个仓库也就是Github Pages说的我的/组织主页（User or organization site），另外一种则是项目仓库（Project site）。所以当我再次想要创建一个一样名字的仓库时，上图中显示个人帐号下已存在同名的仓库了。假如你没有创建过的话，是没有问题的。

2. 把仓库拉到本地 （Clone the repository）

使用任何一种方式将刚才创建的仓库拉取到本地。如上图所示，我喜欢使用Git Bash终端，在Git Bash中输入

git clone git@github.com:unclechen/unclechen.github.io.git

便可将刚才创建的仓库拉取到本地。

3. 创建index.html文件 （Hello World）

如上图所示，继续在Git Bash中输入

cd unclechen.github.io/

命令，进入刚才拉取的仓库（记住你应该将上面的unclechen改为本身的username）。而后在Git Bash中继续输入

echo "Hello World" > index.html

命令，在本地先建立index.html文件。

4. 提交到GitHub服务器 （Commit the file）

建立index.html文件后，和使用其余Git仓库的基本操做同样，须要提交修改到服务器才能生效。

因此咱们须要依次输入三条Git命令，第一条是

git add .

第二条是

git commit -a -m "my fisrt blog"

第三条是

git push

这样就把刚才创建的index.html文件提交到了GitHub服务器上，以下图所示：

5. 搭建成功 （…and you’re done!）

好了！Push到GitHub以后，你就打开浏览器在地址栏输入http://username.github.io/来访问你的我的主页了，别忘了将username改为你本身的用户名。记住，页面初次打开可能会显示404错误。这没有关系，由于须要等待一些时间以后才会生效，个人博客是过了大概10分钟左右生效的吧。

如上图所示，页面显然有点朴素。没有关系，咱们先将博客建立出来，再使用基于Jekyll 模板的一些主题，就能够渲染界面。个人博客用的主题是Hyde。

至此，咱们已经成功使用Github Pages搭建了我的博客（经过User or organization site方式）。至于如何使用Jekyll模板编写，并使用主题来渲染博客，以及绑定本身的域名等等，在个人另外一篇博客中《使用Jekyll渲染GitHub Pages我的博客》将会介绍。

下面介绍的是另一种使用GitHub Pages中的Project site创建博客的方法，有兴趣或者须要创建多个博客站点的朋友能够看一看。

---

另外一种搭建方法（可搭建多个博客站点）

上面介绍了使用Github Pages中提到的我的/组织主页（User or organization site）来搭建我的博客，前面说过这种名为username.github.io的仓库，每一个GitHub帐户下只能拥有一个，若是你须要创建多个博客站点的话多少有些不方便。

不过没有关系，除了经过创建名为username.github.io的仓库搭建我的博客之外，还能够经过创建普通名字project name的仓库来建立我的博客。这就是GitHub Pages上提到的项目仓库（Project site）。

然而，使用项目仓库（Project site）建立博客又分为两种场景，一种是经过新建一个仓库（Generate a site）来建立，另外一种则是直接从已有的项目仓库（Start from scratch）来建立。但这两种形式本质上都是经过在一个普通的仓库下开辟一个没有父分支的gh-pages分支，将网页的代码在gh-pages分下进行管理，维护页面的。acth）。可是这两种形式本质上都是经过在一个普通的仓库下开辟一个没有父分支的gh-pages分支，将网页的代码在gh-pages分下进行管理，维护页面的。

• 第一种场景：使用Generate a site搭建博客。

1. 建立新仓库（Create a repository）

这里咱们就再也不使用username.github.io的名字来创建仓库了，随便使用一个其余的名字，例如blog。

2. 设置仓库的参数 （Repository Settings）

进入刚才创建的新仓库，在GitHub网页的右边面板中点击Settings。以下图所示：

3. 自动生成页面 （Automatic Generator）

在Settings界面下，选择下图所示的Automatic page generator按钮，在弹出的页面填写一些参数。再选择一个主题，能够自动生成一个页面。

4. 搭建完成 （…and you’re done!）

在浏览器中输入http://username.github.io/repository，便可访问页面。记住，你须要将前面的repository修改为你的项目名字（project name，例如个人是blog）。一样这须要等待一些时间以后才能生效。

至此，咱们就成功使用Generate a site的形式，新创建一个仓库，搭建了本身的博客。以下所示，使用GitHub自动生成的页面比刚才的”Hello World”页面确实漂亮了很多。

• 第二种场景：使用Start from scratch搭建博客。

1. 建立gh-pages分支 （Create a gh-pages branch）

进入已有仓库的主页，在分支下拉菜单中输入gh-pages后，按下回车键enter，自定创建一个没有父分支的gh-pages分支，以下图所示。

可选操做：建立gh-pages分支后，也能够将这个分支设为默认分支（default branch），未来方便咱们本身管理。

2. 创建index.html文件 （Create an index file）

和上面介绍过的方法同样，在gh-pages分支下面创建一个index.html文件，输入Hello World。

3. 提交修改 （Commit the file）

创建了index.html文件以后，将修改commit到服务器上。

这里的第二、3步均可以在GitHub网站的界面直接进行操做，或者和User or organization site方法的第三、4步同样，也可使用Git Bash终端操做。

4. 搭建成功 （…and you’re done!）

等待片刻，博客页面生效。

至此，咱们就成功使用Start from scratch的方式，经过在已有的仓库下创建没有父分支的gh-pages分支，搭建了本身的博客。

---

两种搭建方法的对比

• User or organization site: 使用master分支管理博客站点，命名为username.github.io的形式，每一个GItHub帐户下只能拥有一个。

• Project site: 采用一个没有父分支的gh-pages来管理博客站点，命名方式普通，每一个GitHub帐户下能够有多个。