利用Jekyll在GitHub Pages上部署博客

转自：http://blog.csdn.net/zhangao0086/article/details/37922607

版权声明：如需转载，请注明出处，谢谢！

 

目录(?)[+]

 

开始之前

我觉得阮一峰的《搭建一个免费的，无限流量的Blog----github Pages和Jekyll入门》是一个很经典的入门，每个Jekyll初学者都应该先去看一看，另外GitHub Pages官网以及Jekyllcn也是遇到问题时首先要查找的站点。

需要对Git的基本操作有些了解：

Git基本操作

 

[plain] view plain copy
 
 print?在CODE上查看代码片派生到我的代码片
  1. ##设置全局用户名和email，作为每次提交的记录  
  2. git config --global user.name “name"  
  3. git config --global user.email “mail.com”  
  4.   
  5. ##添加一个仓库  
  6. git remote add origin git@….git  
  7. git push -u origin master  
  8.   
  9. ##当提示权限不够时，添加ssh公钥  
  10. ##在用户的.ssh目录下找id_rsa.pub等文件，没有的话去生成  
  11. ssh-keygen -t rsa -C "youremail@example.com”  
  12.   
  13. ##设置pull的默认地址  
  14. git branch --set-upstream-to=origin/master  
  15. ##设置push的默认地址  
  16. git remote add origin git@….git  
  17.   
  18. ##配置别名  
  19. git config --global alias.xx ''  
  20.   
  21. ##临时保存工作区  
  22. git stash  
  23. git stash pop  
  24.   
  25. ## 回滚  
  26. git reset —hard 版本号  
  27.   
  28. ## 强行回滚远程服务器  
  29. git push -f  

配置别名后会很方便，如果我有一个这样的别名：

 

[plain] view plain copy
 
 print?在CODE上查看代码片派生到我的代码片
  1. bogon:portfolio zhangao$ git config --global alias.ci  
  2. commit -m  
在提交的时候用ci就行了。单个人使用Git，不协同工作的话，还是比较简单的。

 

GitHub Pages

GitHub Pages上比较简单，只需要建立一个和你用户名相同的Repository就行了，比如：
这样就建立了一个Repository，这样就能通过username.github.io来访问了。
你也可以在设置里面选择生成一个默认的页面。
 

下面主要还是说下在使用Jekyll过程中实际的问题

评论系统

我之前使用的是Disqus，后来感觉速度不怎么样，就换了多说，多说还是很好用的，适合国内环境。
 

博客搬家

我之前没有找到mac版的，就自己做了一个：
 

代码高亮

高亮的插件有很多，Jekyll的Pygments就已经超过100多种语言，使用起来也很简单，在yml配置文件中设置：
[plain] view plain copy
 
 print?在CODE上查看代码片派生到我的代码片
  1. pygments: true  
然后在需要高亮的代码那里：
[plain] view plain copy
 
 print?在CODE上查看代码片派生到我的代码片
  1. {% highlight ruby %}  
  2. def foo  
  3.   puts 'foo'  
  4. end  
  5. {% endhighlight %}  
ruby替换为你所使用的语言的短名称即可。
如果设置了pygments之后编译出错的朋友需要再加一条配置：
[plain] view plain copy
 
 print?在CODE上查看代码片派生到我的代码片
  1. excerpt_separator: ""  
这是Jekyll的bug导致的，这样虽然可以用pygments完成代码高亮，却又不能用excerpt取到文章摘要了。
最后我使用的是Sunlight，支持的语言比较多，完全可配置，可定制，能支持Objective-C的高亮：
但是和我发表在CSDN上的文章使用的代码高亮插件不一样，我又想要使用这个Sunlight，就只能自己写个用正则查找替换的工具转了：
 

显示分类

显示分类：
[html] view plain copy
 
 print?在CODE上查看代码片派生到我的代码片
  1. <h4>分类列表</h4>  
  2.     <hr>  
  3.     {% for category in site.categories %}  
  4.     <li class="category_list_item"><a href="/showCategory.html?categoryName={{ category | first }}">{{ category | first }}</a> ({{ category | last | size }})  
  5.     </li>  
  6.     {% endfor %}  
显示所有的分类一般都没什么问题，主要在具体分类页面进行处理。
基于Jekyll的静态特性，这个地方处理起来不太优雅，我参考了其他人的做法，最后选择将文章列表储存在JSON里面：
[javascript] view plain copy
 
 print?在CODE上查看代码片派生到我的代码片
  1. var articleList = [{% for post in site.posts %}  
  2.         <span style="white-space:pre">    </span>{"title":"{{post.title}}",  
  3.             "url":"{{site.url}}{{post.url}}",  
  4.     <span style="white-space:pre">    </span>   "date":"{{ post.date | date:'%Y-%m-%d' }}",  
  5.             "excerpt": '{{ post.excerpt | strip_html | strip_newlines | truncate:170 }}'  
  6.             {% if post.categories != empty %}  
  7.             ,  
  8.             "categories":[{% for category in post.categories %}"{{category}}"{% if forloop.last == false %},{% endif %}{% endfor %}]{% endif %}}  
  9.             {% if forloop.last == false %},{% endif %}{% endfor %}];  
我在这里判断了文章有没有分类，如果没有分类的话，就不添加到这个JSON里了，另外说下post.excerpt：
  • excerpt 是获取文章的摘要信息，这个信息可以显示在文章列表里面
  • strip_html 是除去HTML标签，因为摘要里面不需要显示图片之类的，纯文本即可
  • strip_newlines 是去掉换行符
  • truncate 这个就是字面意思了，摘要的长度
然后在JS里面去取请求的参数，筛选出需要显示的文章，做法比较常规就不说了。
如果参数中有特殊符号（比如我就有这样的分类名称：cvs||svn）或是中文（比如“分享”），url就用encodeURI函数转义一下：
[html] view plain copy
 
 print?在CODE上查看代码片派生到我的代码片
  1. <a href="javascript:void(window.location.href=encodeURI('/showCategory.html?categoryName={{ category | first }}'))">{{ category | first }}</a>  
取的时候用decodeURI函数去取。
 

strip_newlines无法去除换行符，或者遇到其他换行符之类的问题

比如我有遇到strip_newlines无法去除换行符的问题，如果去不掉的话，某些内容放进JSON的时候，自然而然的就出现问题了，因为不能连接字符串，但是又跨行了。strip_newlines只能去掉Unix的换行符，于是我就再一次使用了我之前写的全文本替换工具Mac，做了一次替换：

实现分页

Jekyll本身对分页限制很多，只支持HTML文件，不支持md，其次，对分类和标签的分页也不支持，这就很令人难受，只能将就用用了。
在_config.yml文件里面添加：
[html] view plain copy
 
 print?在CODE上查看代码片派生到我的代码片
  1. paginate: 10  
  2. paginate_path: "page:num"  
paginate表示开启分页并设置每页的数量；paginate_path是指定分页时Jekyll寻找HTML文件的路径，比如这里设置为page:num，那么Jekyll在分页时，第一页还是你的博客的index.html，第二页就是/page2/index.html，第三页就是/page3/index.html。如果指定的path不存在会自动往上级目录找，直到根目录的index.html，或者这个参数没有设置的话默认值就是page:num。
在首页里面对文章进行分页，用一个简单的循环：
[html] view plain copy
 
 print?在CODE上查看代码片派生到我的代码片
  1. {% for post in paginator.posts %}  
  2.     <a href="{{ post.url }}">{{ post.title }}</a>  
  3. {% endfor %}  
为了生成分页的链接，在根目录的index.html文件里面加上：
[html] view plain copy
 
 print?在CODE上查看代码片派生到我的代码片
  1. {% if paginator.total_pages > 1 %}  
  2.     {% if paginator.previous_page %}  
  3.         <a href="{{ paginator.previous_page_path }}">上一页</a>  
  4.     {% endif %}  
  5.       
  6.     {% if paginator.next_page %}  
  7.         <a href="{{ paginator.next_page_path }}">下一页</a>  
  8.     {% endif %}  
  9. {% endif %}  
如果想要显示所有的页码：
[html] view plain copy
 
 print?在CODE上查看代码片派生到我的代码片
  1. {% for page in (1..paginator.total_pages) %}  
  2.     {% if page == 1 %}  
  3.         <a href="/index.html">{{ page }}</a>  
  4.     {% else %}  
  5.         <a href="{{ site.paginate_path | replace: ':num',page }}">{{ page }}</a>  
  6.     {% endif %}  
  7. {% endfor %}  
因为第一页是index.html，不是page1，所以要特殊处理一下。这样一个简单的分页就完成了。
附分页对象paginator的所有属性：
  • page 当前页码
  • per_page 每页文章数量
  • posts 当前页的文章列表
  • total_posts 总文章数
  • total_pages 总页数
  • previous_page 上一页页码 或 nil
  • previous_page_path 上一页路径 或 nil
  • next_page 下一页页码 或 nil
  • next_page_path 下一页路径 或 nil
本来在显示分类页面也准备加上分页的，后来一想，所有的文章信息已经存在JSON里了，做分页也是一个假分页，就作罢了。
posted @ 2016-07-15 13:30  五艺  阅读(248)  评论(0)    收藏  举报