基于Jekyll+GitHubPages的个人博客搭建

12 Feb 2014

春节期间闲得无聊，头脑一热开通了GoDaddy的域名服务，冷静下来后觉得既然出了钱，那就坚持下去吧。😓

开通域名

GoDaddy有各种优惠码，支持支付宝，新手最佳选择。
优惠码及相关步骤链接

创建GitHub Page

github-page分为项目主页和个人主页，我们关注的是个人主页。每个帐号只能有一个仓库来存放个人主页，而且仓库的名字必须是username/username.github.io，这是特殊的命名约定。你可以通过http://username.github.io来访问你的个人主页。
通过向导很容易创建一个仓库，并测试成功。不过，同样的，没有博客的结构。需要注意的个人主页的网站内容是在master分支下的。

域名绑定

用DNSpod，注册，添加域名。参考：如何搭建一个独立博客

环境搭建

很多人都推荐使用jekyll，也有很多现成的模板，比较方便。

安装`jekyll`

$ sudo gem install jekyll
#安装完了之后，查看版本号
$ jekyll -v
jekyll 3.1.1

运行Jekyll

进入项目目录，然后执行命令：

$jekyll serve --safe --watch

此时jekyll会在localhost的4000端口监听http请求，用浏览器访问http://localhost:4000/index.html，之前的页面出现了！

使用jekyll

参考链接：一步步在GitHub上创建博客主页(5)
以及：打造你的 GitHub Pages 专属博客
个人网站的设计还是前端人员更专业，还是拿来主义比较快速啦。
网站的模板地址在此。

关于环境搭建的问题

后来想按照官方的做法来搭建jekyll的环境，研究了一阵才OK。

#安装Bundler
$sudo gem install bundler

#将Gemfile文件修改为
source 'https://ruby.taobao.org'

group :jekyll_plugins do
    # gem "jekyll-paginate"
    # gem "jekyll-feed"
    gem 'github-pages'
    gem 'pygments.rb'
end

#在项目目录下执行
$bundle install

#install完成后运行jekyll
$bundle exec jekyll serve

添加代码高亮

安装pygments

pip install pygments

Pygments提供了十多种高亮样式的方案，所有可用的方案可以用如下方式查看：

from pygments.styles import STYLE_MAP
STYLE_MAP.keys()
['manni', 'igor', 'lovelace', 'xcode', 'vim', 'autumn', 'vs', 'rrt', 'native', 'perldoc', 'borland', 'tango', 'emacs', 'friendly', 'monokai', 'paraiso-dark', 'colorful', 'murphy', 'bw', 'pastie', 'algol_nu', 'paraiso-light', 'trac', 'default', 'algol', 'fruity']

在项目目录下执行命令，其中default可换为xcode或monokai。

pygmentize -f html -a .highlight -S default > css/pygments.css

如果不能执行，则查看下echo $PATH中有没有python的目录/Users/username/Library/Python/2.7/bin。

将_config.yml中修改：

markdown: redcarpet
highlighter: pygments

社会化评论

最后还是用了Disqus，现在已经支持中文。

开启分页功能

首先我们需要在jekyll中开启分页功能，在jekyll的_config.yml中加入分页配置：

paginate: 5
paginate_path: "blog/page:num"

使用分页

只是开启了分页还没有用，我们需要确实使用到首页之中，在首页(/index.html)中添加如下代码：

{% for post in paginator.posts %}
    <a href="{{ post.url }}">{{ post.title }}</a>
{% endfor %}

这样，jekyll就会根据paginator来进行分页了，被分出来多少页，就会有多少个页面生成。排1-5的文章就在/index.html中了，而排6-10的文章则在/page2/index.html中，依次类推

换页

只是分页还不够，我们还需要在每个页面上做一个跳转到其他页面的导航，这里需要用到paginator的一些其他属性

首先检测总的页数，如果只有一页，自然就不需要分页了。通过paginator的total_pages属性能判断总页数：

{% if paginator.total_pages > 1 %}
<!-- 分页代码 -->
{% endif %}

我们需要一个跳转到上一页的按钮，这个按钮在第一页不需要显示，通过paginator的previous_page属性来判断是否是第一个页面，使用paginator的previous_page_path来输出上一页的路径，注意在前面添加baseurl，并进行一些必要的字符替换：

{% if paginator.previous_page %}
    <a href="{{ paginator.previous_page_path | prepend: site.baseurl | replace: '//', '/' }}"上一页</a>
{% endif %}

接着是生成所有页面的按钮，并使当前页按钮无效化，遍历所有页面，使用paginator的page属性来确定当前页，如果是当前页，则按钮无效，否则使用{{ site.paginate_path | prepend: site.baseurl | replace: '//', '/' | replace: ':num', page }}来将:num替换成当前页面的数字生成页面路径：

{% for page in (1..paginator.total_pages) %}
	{% if page == paginator.page %}
		<span class="active">{{ page }}</span>
    {% elsif page == 1 %}
		<a href="{{ '/index.html' | prepend: site.baseurl | replace: '//', '/' }}">{{ page }}</a>
    {% else %}
		<a href="{{ site.paginate_path | prepend: site.baseurl | replace: '//', '/' | replace: ':num', page }}">{{ page }}</a>
	{% endif %}
{% endfor %}

最后生成一个下一页的按钮，在最后一页不显示，和上一页按钮类似，通过paginator的next_page_path来确定是否还有下一页：

{% if paginator.next_page %}
    <a href="{{ paginator.next_page_path | prepend: site.baseurl | replace: '//', '/' }}">下一页</a>
{% endif %}

Notes and thoughts from Tony