对于在Github上搭建免费Blog,我起先一无所知(好吧,知道你们会汗颜)。某一天,好友诺兰德说他为了应付面试(哈哈,请不要在意这些细节),而加班加点的赶了一个Blog出来,看了他的Blog之后,我很好奇,就让他给我说说是怎么搭建的。他就直接丢了一个教程链接给我,研究了一天,然后就开始了我自己的Blog之旅。好吧,闲话有点多了,下面开始咱们的Blog之旅吧。

一、Github和Jekyll是什么?

Github:是一个具有版本管理功能的代码仓库,每个项目都有一个主页,列出项目的源文件。

Github Pages:对于一个新手来说,看到一大堆源码,只会让人头晕脑涨,不知何处入手。他希望看到的是,一个简明易懂的网页,说明每一步应该怎么做。因此,github就设计了Pages功能,允许用户自定义项目首页,用来替代默认的源码列表。所以,github Pages可以被认为是用户编写的、托管在github上的静态网页。github提供模板,允许站内生成网页,但也允许用户自己编写网页,然后上传。有意思的是,这种上传并不是单纯的上传,而是会经过Jekyll程序的再处理。

注:若要使用Github Pages,请先注册Github账号 。

Jekyll:一个静态站点生成器,它会根据网页源码生成静态文件。它提供了模板、变量、插件等功能,所以实际上可以用来编写整个网站。

二、Git工具的安装和简单使用

Git是一个开源的分布式版本控制系统,用以有效、高速的处理从很小到非常大的项目版本管理。

下载安装Git:点击这里下载

注:安装的时候第三步记得选中Simple context menu(Registry based),才可以在右键菜单中生成Git GUI hereGit Bash Here选项,如下图所示
gitinstall
安装完成后,找个目录 右键>Git Bash Here,打开Git的命令行工具。在里面输入git --help,就能看到命令的使用帮助了。

附:Git的简易指南

三、搭建博客

1.新建项目

在你的电脑上,新建一个文件夹,作为博客的根目录,名字任取,假设我们取名为demo

$ mkdir demo

进入文件夹demo,并初始化该文件夹:

$ cd demo
$ git init

然后创建一个没有父节点的分支gh-pages。因为github规定,只有该分支中的页面,才会生成网页文件:

$ git checkout –orphan gh-pages

2.新建配置文件

demo文件夹中新建一个名字为_config.yml的文本文件。它是jekyll的配置文件(具体配置请参考官方配置)。我们在其中写入以下内容,注意冒号后面需要加空格

baseurl: /demo

文件夹结构为:

/demo
  |–_config.yml

3.新建模板文件

在博客根目录下新建一个文件夹,名字为_layouts,用于存放模板文件:

$ mkdir _layouts

进入_layouts文件夹,并新建一个default.html文件,作为博客的默认模板。并写入以下内容:

<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<title>{{ page.title }}</title>
</head>
<body>
{{ content }}
</body>
</html>

Jekyll使用Liquid模板语言,{{ page.title }}表示文章标题,{{ content }}表示文章内容,更多模板变量请参考官方文档

文件夹结构变为:

/demo
  |–_config.yml
  |–_layouts
  |  |–default.html

4.新建文章

回到demo文件夹,新建一个文件夹,名字为_posts,用于存放博客文章:

$ mkdir _posts

进入_posts文件夹,新建文本文档,名字假定为2013-12-12-hello-world.html文件名称格式为年-月-日-标题.后缀名,后缀名可以是html或者markdown

在该文件中,填入以下内容

---
layout: default
title: 我的第一篇文章
---
<h1>{{ page.title }}</h1>
<p>Hello,Jekyll!</p>
<p>{{ page.date | date_to_string }}</p>

每篇文章的头部,都必须有一个YAML文件头,用来设置一些元数据。以---标记开头和结尾,里面每一行设置一种元数据。

‘layout: default’ >>> 表示该文章用的模板是_layouts文件夹下的default.html文件。
‘title: 我的第一篇文章’ >>> 表示该文章的标题是’我的第一篇文章’。如果不设置这个值,则默认使用文件名中的标题,即’hello-world’。
‘page.title’ >>> 就是文件头中设置的title,即’我的第一篇文章’。
‘page.date’ >>> 即为文件名的日期,也可以在文件头中重新设置date。
‘date_to_string’ >>> 表示将page.date 变量转换成人类可读的格式。

文件夹结构变为:

/demo
  |–_config.yml
  |–_layouts
  |  |–default.html
  |–_posts
  |  |–2013-12-12-hello-world.html

5.新建首页

回到demo文件夹,新建一个文件叫index.html并填入以下内容:

---
layout: default
title: 我的Blog
---
<h2>{{ page.title }}</h2>
<p>最新文章</p>
<ul>
{% for post in site.posts %};
<li>{{ post.date | date_to_string }} <a href="{{ post.url }}">{{ post.title }}</a></li>
{% endfor %};
</ul>

这里的{% for post in site.posts %}表示对所有的文章进行循环遍历,这里要注意的是,Liquid模板语言规定,输出内容使用两层大括号,单纯的命令使用一层大括号。至于{{ site.baseurl }}就是_config.yml中设置的baseurl变量。

文件夹结构变成:

/demo
  |–_config.yml
  |–_layouts
  |  |–default.html
  |–_posts
  |  |–2013-12-12-hello-world.html
  |–index.html

6.发布博客

先将所有内容加入到本地git库注:当前目录为demo

$ git add .
$ git commit -m “first commit”

前往Github,新建一个名为demo的库,建好后将本地内容推送到Github上你刚刚建的demo库中注:将下面命令中的username换成你自己的username

$ git remote add origin https://github.com/username/demo.git
$ git push origin gh-pages

上传成功之后,等10分钟左右,访问 http://username.github.com/demo/ 就可以看到博客已经生成了(将username换成你的用户名)。

7.绑定域名

如果你不想用http://username.github.com/demo/这个域名,可以换成自己的域名。

具体方法是在repo的根目录下面,新建一个名为CNAME的文本文件,里面写入你要绑定的域名,比如example.com或者xxx.example.com。

如果绑定的是顶级域名,则DNS要新建一条A记录,指向204.232.175.78。如果绑定的是二级域名,则DNS要新建一条CNAME记录,指向username.github.com(请将username换成你的用户名)。此外,别忘了将_config.yml文件中的baseurl改成根目录”/“。

至此,最简单的Blog就算搭建完成了。进一步的完善,请参考Jekyll创始人的示例库,以及其他用Jekyll搭建的Blog

(完)

特别感谢:阮一峰老师