Git+GitHub+Markdown+Jekyll=Perfect Personal Blog

發表於   |   分類於   |  

以前建过个人网站，也用过第三方的博客系统，然后又回归到自建的个人博客，但总有不敬人意的地方。比如自建的博客涉及到购买的服务器的稳定性、流量成本、维护成本、数据的安全性、文本编辑器的舒适度等，第三方的博客系统又觉得局限性比较大、缺乏插件、觉得不牛逼等原因。总之人是很贪心的，总想找到一个既不用担心服务器稳定性、又不用担心流量成本、也不用担心数据安全性、而且还能方便的维护资源、并且还有丰富的插件的个人博客解决方案。于是外事问Google，经过一阵寻觅后发现大牛们的博客方案不正是我所需要的么，于是便有了上一篇的补脑笔记，把涉及到的知识大概整理了一下，准备开始搭建自己的个人学习笔记博客。今天这篇笔记将记录我使用Git+GitHub+Markdown+Jekyll搭建博客系统的过程。

注：以下过程均在OS X系统上操作，Win系统的童靴请勿效仿，但可借鉴。

GitHub

让人不再担心本地备份与远程协作，一切提交均有记录，均可追溯。

Git

让人不再担心写废，想到哪里，写到哪里。

由于OS X系统自带Git，所以不需要再安装Git，自带的Git版本为1.8.5.2。

Markdown

不再忧虑排版，专注于写作。

Markdown是我认为最好的写作利器没有之一。GitHub完美支持，个人写作使用的DayOne也完美支持，Win系统下也有MarkdownPad这种成熟的工具。

什么是Github Pages

Github Pages：Websites for you and your projects.

Github Pages 是面向用户、组织和项目开放的公共静态页面搭建托管服 务，站点可以被免费托管在 Github 上，你可以选择使用 Github Pages 默 认提供的域名 username.github.io 或者自定义域名来发布站点。Github Pages 支持自动利用 Jekyll 生成站点，也同样支持纯 HTML 文档，将你的 Jekyll 站点托管在 Github Pages 上是一个不错的选择。

通俗一点讲。你可以将你个人网站的html、css、js、image等按一定目录结构托管在github上，以index.html为入口（即个人网站首页），使用username.github.io就可以访问你的个人网站了。

再通俗一点讲。github为你提供了一台无限流量、稳定、的服务器。你将个人网站的资源以一定目录结构上传（托管）到github，该服务器的ip就是username.github.io。

上述两次提到目录结构，下面我解释一下这个目录结构。

什么是Jekyll

Jekyll 的核心其实是一个文本转换引擎。它的概念其实就是： 你用你最喜欢的标记语言来写文章，可以是 Markdown，也可以是 Textile,或者就是简单的 HTML, 然后 Jekyll 就会帮你套入一个或一系列的布局中。在整个过程中你可以设置URL路径, 你的文本在布局中的显示样式等等。这些都可以通过纯文本编辑来实现，最终生成的静态页面就是你的成品了。

如何使用Github Pages与Jekyll

Jekyll目录结构

上述多次提到的目录结构即Jekyll的目录结构。如下：

.   
|--_config.yml>  
|--_drafts  
    |--articles1.textile 
    |--articles2.md
|--_includes
    |--footer.html
    |--header.html
|--_layouts
    |--default.html
    |--post.html
|--_posts
    |--2014-06-17-articles1.textile
    |--2014-06-17-articles1.md
|--_site
|--index.html
|--other files
  • _config.yml：保存配置数据。
  • _drafts：存放未发布的文章。
  • _includes：存放页面片段，即页头（head.html）、页脚（footer.html）、导航（navigation.html）、评论（disqus_comments.html）等，这些资源通过标签添加到index.html中，从而形成一个完整的页面。
  • _layouts：存放模板文件。文章模板、关于页面模板、首页模板等。
  • _posts：存放文章的文件。并且文章文件名称要符合YEAR-MONTH-DAY-title.MARKUP格式。
  • _site：经过jekyll转换的页面。
  • index.html：网站首页。
  • other files：其他文件，存放css、js、image等。

Jekyll解析流程

  • 首先会加载_posts及文件夹下的所有文章，将其参数和文章内容组织保存在内存中，所有的文章的内容、参数都在site.posts对象（其他文件夹下的文章不会放入site.posts中）。
  • 其次加载_layouts文件夹下的所有模板。
  • 再次加载_includes文件夹下的所有需要被引入的内容。
  • 最后根据每一篇需要编译的文章选择的其参数定义的模板来创建一个模板，并将当前文章的内容、参数等进行扩展后放在page对象、content对象中，然后进行模板的编译，生成html文件，并按照一定规则放在_site文件夹下。也就是说在创建一篇文章时，其实所有文章的内容都已经被读取出来了，这也为文章相互之间的关联提供了可能。

在本地安装jekyll

注：这里默认安装环境已具备Ruby、RubyGems环境。

  • 安装jekyll：
$ sudo gem update —system
$ sudo gem install jekyll
  • 安装模板，默认的模板是Maruku，我们替换为RDiscount。
$ sudo gem install rdiscount

Maruku是纯ruby写的Markdown模板解释器。
RDiscount是C写的模板解释器。

为什么要替换为RDiscount呢，有心人对两者做了比较，优劣可见一斑。

Maruku: 08.424132s total time, 00.084241s average  
RDiscount: 00.082019s total time, 00.000820s average
  • 新建一个jekyll目录：
$ jekyll new blog
  • 进入到该目录下，你就能看到上述的目录结构：
$ cd blog

jekyll集成了一个开发用的服务器，可以让你使用浏览器在本地进行预览。启动server，访问地址为http://localhost:4000/：

$ jekyll serve

至此，一个简单的基于本机服务器的jekyll框架的个人网站就算搭建完毕，在浏览器中访问http://localhost:4000/，就可以看到index.html中的内容，一般在制作模板时多采在本地安装的方式，便于调试。更多配置信息请参见[Jekyll文档][1]。

结合Github Pages使用Jekyll

这篇笔记的主题不是如何在本机搭建个人网站，所以这种使用方式是重点。

由于Github Pages完美支持Jekyll，所以你只需要安照Jekyll的文件目录结构，托管在Github中即可，不需要在本机安装Jekyll，只需要关注于github，可以借鉴大师们设计的Jekyll模板，然后push或pull你的文章即可。

  • 注册GitHub账号，只需要一个邮箱和密码。GitHub官网
  • 创建一个Repository，命名格式为：username.github.io，这样就生成了你的User site。可参见GitHub Pages

注意：这里的username必须和你的账号名一致。

  • 不管用命令行还是用Finder，总之新建一个目录，我这里起名为GitRepo。
  • 进入GitRepo目录，键入git init命令，初始化一个git库。
cd /Users/JaceFu/GitRepo
  • 将刚才在Github中创建的Repo克隆到你本地的Git库中，即刚在本地创建的GitRepo目录中。
cd /Users/JaceFu/GitRepo
git clone https://github.com/username/username.github.io

在GitRepo文件中会看到名为username.github.io的文件，这就是你从Github中克隆的Repo文件。

  • Hello World，进入Repo目录中，创建一个HTML文件，名为index，内容为“Hello World”。
cd /Users/JaceFu/GitRepo/username.github.io
echo “Hello World” > index.html
  • 将创建的index.html文件push到github中
cd /Users/JaceFu/GitRepo/username.github.io
git add .
git commit -m “Hello World update”
git push

  • 在浏览器中访问http://username.github.io，你将会看到index.html文件中的内容，我们这里会显示“Hello World”。至此，基于Github Pages功能的个人站点就算搭建好了。

  • 在克隆到本地的Repo文件中，按照上述的Jekyll文件目录结构手动创建所需的文件资源，并上传。由于Github本身完美支持Jekyll，所以只要符合Jekyll的文件目录，Github就自动使用Jekyll解析形成页面。

至此，我们应该有了一定的理解，这里我再简单梳理一下：

  • Jekyll可以将我们使用markdown写的文章按照指定模板解析为html文件。
  • Github Pages可以充当我们的服务器，通过username.github.io可以访问到我们上传的html页面。
  • Github Pages完美支持Jekyll，所以不需要我们自己编写复杂的html页面，只要将Jekyll的目录结构上传至Github中，就可以通过username.github.io访问由Jekyll解析生成的html页面，从而形成了个人网站。

配置_config.yml文件

基本配置参见官方配置文档。
不同的模板，在该文件中的配置项也不一样，因为我自己使用了大师设计的模板，配置了如下参数（部分）：

  • title：网站名称。
  • description：网站说明。
  • logo：网站logo。
  • disqus_shortname：disqus标示符。
  • search：是否运行搜索。
  • url：网站中一些资源文件使用的url地址。
  • encoding：编码。
  • markdown：md解析模板。
  • timezone：时区。

编写博文

可以看一下_posts下的jekyll给的例子：


---
layout: post
title:  "Welcome to Jekyll!"
date:   2014-01-27 21:57:11
categories: jekyll update

---

You'll find this post in your `_posts` directory - edit this post and re-build (or run with the `-w` switch) to see your changes!
To add new posts, simply add a file in the `_posts` directory that follows the convention: YYYY-MM-DD-name-of-post.ext.

Jekyll also offers powerful support for code snippets:

{ % highlight ruby % } 
def print_hi(name)
  puts "Hi, #{name}"
end
print_hi('Tom')

#=> prints 'Hi, Tom' to STDOUT.

{ % endhighlight % }

Check out the [Jekyll docs][jekyll] for more info on how to get the most out of Jekyll. File all bugs/feature requests at [Jekyll's GitHub repo][jekyll-gh].

[jekyll-gh]: https://github.com/mojombo/jekyll
[jekyll]:    http://jekyllrb.com

可以看到在博文的最上方有被两个—包裹起来的一段，这里就定义了文章的一些参数，更多参数在FrontMatter和Variables获取，简单的只需要关注几个就好：

  • title：文章的标题。
  • date：文章的日期。
  • categories：定义了文章所属的目录。
  • layout：文章所使用的模板名称。
  • tags：文章标签。

这里就写一个最简单的文章，只是用其中的两个参数：layout，title，如下：


---
layout: mylayout
title: hello-jekyll

---

Hello jekyll!

将这个写完的文章保存为 “年-月-日-标题.markdown”的名字形式，上传至Github中的_posts文件中，Jekyll会自动解析生成该文章的html页面。

注：文章的文件名不要使用中文，否则会出现Bug。

编写模板

如果想自己编写模板可以参见如何创建Jekyll模板。
或者可以使用大师们设计好的模板。Jekyll模板锦集。

个性域名

个人网站要有一个称心的域名，使用username.github.io实在不像话，所以我说一下如何配置个性域名。如何申请域名这里就不再累赘。

在Github中的User Site Repo根目录（即Github中Jekyll目录的根目录）下创建CNAME目录，内容为你的个性域名，格式为www.yourdomain.com即可。

然后在域名管理系统中解析域名，添加CNAME记录，服务器为username.github.io。等待一个多小时后，就可以使用自己的域名访问了。

结束

至此，使用Github Pages和Jekyll搭建个人网站的过程记录完毕。
分享到：