使用Jekyll搭建博客

最近闲来无事，捣鼓了一下Git以及Github，尝试了一下基于Jekyll搭建个人博客的方法，现在把整个过程进行一个总结（部分内容转自互联网）：

<img src="http://upload.chinaz.com/2014/0616/1402906891370.jpg" alt="静态博客 Jekyll入门 网站建设" width="607" height="250" />

一、Jekyll简介

Jekyll是一个免费的blog生成工具，可以根据网页源码生成静态文件。用户先在本地编写Jekyll网站源码，然后托管到Github。优点：（1）免费，没有流量限制；（2）可以更加专注于文章的撰写，减少对格式、排版的分心。缺点：（1）有一定技术门槛；（2）托管到Github上的网站内容，很容易被其他人clone到。总的来说，依然是搭建个人博客一个比较好的选择。

二、搭建第一个简易个人博客

1、创建本地博客存储文件夹：

$ mkdir jekyll

$ cd jekyll

$ git init

2、创建没有父节点的gh-pages

$ git checkout --orphan gh-pages

3、创建设置文件夹：

$ cd ..返回根目录

$ gedit _config.ym输入一下内容，并保存：

baseurl: /jekyll_demo

4、创建模板文件：

$ mkdir _layouts

$ cd _layouts[/cpp]

$ gedit defalut.html输入以下内容，并保存：

<ul>
<li style="font-weight: inherit; font-style: inherit;">{{ page.title }}</li>
<li style="font-weight: inherit; font-style: inherit;">{{ content }}</li>
</ul>

5、写第一篇文章

$ cd ..回到根目录

$ mkdir _posts

$ gedit 2014-10-10-helloworld.html输入一下内容，并保存：
<ul>
<li style="font-weight: inherit; font-style: inherit;">---</li>
<li style="font-weight: inherit; font-style: inherit;">layout: default</li>
<li style="font-weight: inherit; font-style: inherit;">title: 你好，世界</li>
<li style="font-weight: inherit; font-style: inherit;">---</li>
<li style="font-weight: inherit; font-style: inherit;">
<h2 style="font-style: inherit;">{{ page.title }}</h2>
</li>
<li style="font-weight: inherit; font-style: inherit;">
<p style="font-weight: inherit; font-style: inherit; color: #000000;">我的第一篇文章</p>
</li>
<li style="font-weight: inherit; font-style: inherit;">
<p style="font-weight: inherit; font-style: inherit; color: #000000;">{{ page.date | date_to_string }}</p>
</li>
</ul>

6、创建首页

到根目录

$ gedit index.html输入以下内容，并保存：

<ul style="color: #000000;">
<li style="font-weight: inherit; font-style: inherit;">---</li>
<li style="font-weight: inherit; font-style: inherit;">layout: default</li>
<li style="font-weight: inherit; font-style: inherit;">title: 我的Blog</li>
<li style="font-weight: inherit; font-style: inherit;">---</li>
<li style="font-weight: inherit; font-style: inherit;">
<h2 style="font-style: inherit;">{{ page.title }}</h2>
</li>
<li style="font-weight: inherit; font-style: inherit;">
<p style="font-weight: inherit; font-style: inherit; color: #000000;">最新文章</p>
</li>
<li style="font-weight: inherit; font-style: inherit;"></li>
<li style="font-weight: inherit; font-style: inherit;">{% for post in site.posts %}</li>
<li style="font-weight: inherit; font-style: inherit;">{{ post.date | date_to_string }} <a style="font-weight: inherit; font-style: inherit; color: #1e3e74;" href="http://www.chinaz.com/web/2014/0616/%7B%7B%20site.baseurl%20%7D%7D%7B%7B%20post.url%20%7D%7D">{{ post.title }}</a></li>
<li style="font-weight: inherit; font-style: inherit;">{% endfor %}</li>
</ul>

7、发布内容

7.1、把所有内容加入本地git库

$ git add .

$ git commit -m 'first post'

7.2、创建github仓库

登录github网站新建repository，例如名为jekyll

$ git remote add origin https://github.com/USERNAME/jekyll.git

$ git push origin gh-pages

7.3访问博客效果

<img class="alignnone size-medium wp-image-121" src="http://riden001.com/wp-content/uploads/2014/10/kk-300x150.png" alt="kk" width="300" height="150" />

http://USERNAME.github.com/jekyll可以看到博客效果。