利用Jekyll在GitHub Pages上部署博客

开始之前

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

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

Git基本操作

##设置全局用户名和email,作为每次提交的记录
git config --global user.name “name"
git config --global user.email “mail.com”

##添加一个仓库
git remote add origin git@….git
git push -u origin master

##当提示权限不够时,添加ssh公钥
##在用户的.ssh目录下找id_rsa.pub等文件,没有的话去生成
ssh-keygen -t rsa -C "youremail@example.com”

##设置pull的默认地址
git branch --set-upstream-to=origin/master
##设置push的默认地址
git remote add origin git@….git

##配置别名
git config --global alias.xx ''

##临时保存工作区
git stash
git stash pop

## 回滚
git reset —hard 版本号

## 强行回滚远程服务器
git push -f

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

bogon:portfolio zhangao$ git config --global alias.ci
commit -m

在提交的时候用ci就行了。单个人使用Git,不协同工作的话,还是比较简单的。

GitHub Pages

GitHub Pages上比较简单,只需要建立一个和你用户名相同的Repository就行了,比如:

这样就建立了一个Repository,这样就能通过username.github.io来访问了。

你也可以在设置里面选择生成一个默认的页面。

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

评论系统

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

博客搬家

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

CSDN博客导出工具Mac版

CSDN博客导出工具Mac By Swift

代码高亮

高亮的插件有很多,Jekyll的Pygments就已经超过100多种语言,使用起来也很简单,在yml配置文件中设置:

pygments: true

然后在需要高亮的代码那里:

{% highlight ruby %}
def foo
  puts 'foo'
end
{% endhighlight %}

ruby替换为你所使用的语言的短名称即可。
如果设置了pygments之后编译出错的朋友需要再加一条配置:

excerpt_separator: ""

这是Jekyll的bug导致的,这样虽然可以用pygments完成代码高亮,却又不能用excerpt取到文章摘要了。

最后我使用的是Sunlight,支持的语言比较多,完全可配置,可定制,能支持Objective-C的高亮:

但是和我发表在CSDN上的文章使用的代码高亮插件不一样,我又想要使用这个Sunlight,就只能自己写个用正则查找替换的工具转了:

全文本替换工具Mac

显示分类

显示分类:

<h4>分类列表</h4>
	<hr>
    {% for category in site.categories %}
    <li class="category_list_item"><a href="/showCategory.html?categoryName={{ category | first }}">{{ category | first }}</a> ({{ category | last | size }})
    </li>
    {% endfor %}

显示所有的分类一般都没什么问题,主要在具体分类页面进行处理。

基于Jekyll的静态特性,这个地方处理起来不太优雅,我参考了其他人的做法,最后选择将文章列表储存在JSON里面:

var articleList = [{% for post in site.posts %}
		<span style="white-space:pre">	</span>{"title":"{{post.title}}",
			"url":"{{site.url}}{{post.url}}",
	<span style="white-space:pre">	</span>	"date":"{{ post.date | date:'%Y-%m-%d' }}",
			"excerpt": '{{ post.excerpt | strip_html | strip_newlines | truncate:170 }}'
			{% if post.categories != empty %}
			,
			"categories":[{% for category in post.categories %}"{{category}}"{% if forloop.last == false %},{% endif %}{% endfor %}]{% endif %}}
			{% if forloop.last == false %},{% endif %}{% endfor %}];

我在这里判断了文章有没有分类,如果没有分类的话,就不添加到这个JSON里了,另外说下post.excerpt:

  • excerpt 是获取文章的摘要信息,这个信息可以显示在文章列表里面
  • strip_html 是除去HTML标签,因为摘要里面不需要显示图片之类的,纯文本即可
  • strip_newlines 是去掉换行符
  • truncate 这个就是字面意思了,摘要的长度

然后在JS里面去取请求的参数,筛选出需要显示的文章,做法比较常规就不说了。

如果参数中有特殊符号(比如我就有这样的分类名称:cvs||svn)或是中文(比如“分享”),url就用encodeURI函数转义一下:

<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文件里面添加:

paginate: 10
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。

在首页里面对文章进行分页,用一个简单的循环:

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

为了生成分页的链接,在根目录的index.html文件里面加上:

{% if paginator.total_pages > 1 %}
	{% if paginator.previous_page %}
		<a href="{{ paginator.previous_page_path }}">上一页</a>
	{% endif %}

	{% if paginator.next_page %}
		<a href="{{ paginator.next_page_path }}">下一页</a>
	{% endif %}
{% endif %}

如果想要显示所有的页码:

{% for page in (1..paginator.total_pages) %}
	{% if page == 1 %}
		<a href="/index.html">{{ page }}</a>
	{% else %}
		<a href="{{ site.paginate_path | replace: ':num',page }}">{{ page }}</a>
	{% endif %}
{% 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里了,做分页也是一个假分页,就作罢了。

时间: 2024-10-06 08:24:18

利用Jekyll在GitHub Pages上部署博客的相关文章

利用Octopress在github pages上搭建个人博客

利用Octopress在github pages上搭建个人博客 SEP 29TH, 2013 在GitHub Pages上用Octopress搭建博客,需要安装ruby环境.git环境等.本人在Fedora下成功搭建Octopress,这里把主要步骤和遇到的问题做一个记录. 在搭建的过程中发现yum安装的ruby与rake在管理octopress博客的时候会引起冲突,要使用rvm的方式安装ruby和rake:另外rvm一般用curl一段脚本来安装的话,网址有所变化,原来的教程中的网址要"去掉一个

hexo+github搭建个人免费博客

最近在淘宝逛到一个卖盗版书的店铺,真的是便宜的不要不要的,哈哈. 网上hexo+github的博客教程太多了,我今天就讲讲一下实现小细节和思路吧,都是github上面的issue 看看我搭建的hexo主题的博客,哈哈 开始旅程了 创建一个github站点 可以参考鸿洋大神的如何利用github打造博客专属域名,这篇博文看下来,你就会拥有像我 这样MRwangqi.github.io的链接,在仓库下面放个index.html,就能访问到页面了. 安装node环境 可以参考我的文章weex初体验,这

利用ASP.NET MVC+Bootstrap搭建个人博客之praise.js点赞特效插件(二)_实用技巧

在上篇文章给大家介绍了利用ASP.NET MVC和Bootstrap快速搭建响应式个人博客站(一).接下来给大家介绍如果做个点赞插件,一起通过本文学习吧! 1. 为啥要做这个点赞插件?    praise.js是一款小巧的jQuery点赞插件,使用简便,效果美观. 在做个人博客时遇到了文章点赞问题.联想到各大社交网络中的点赞特效:手势放大.红心放大等等,很酷很炫.但是并没有现成的好用的插件,于是就打算自己做一个类似的点赞插件,放上自己喜欢的点赞图标.PS:小站的图标均来自阿里妈妈旗下的那个ico

世界上最好博客的47个博客技巧

博客|技巧  Meg Hourihan (www.megnut.com) ·频繁的更新,好的作品,以及个性 - 这些因素的配合是非常关键的的.如果你不能定期的更新(不一定是每天,但要有一固定的计划),博客就难于建立影响和访问量. ·人们如果发现了作品的价值,他们会原谅你的拼写错误. 但如果你不能保持作品的水平,访问量就会下降. ·不用为谁在阅读而担心, 只写你所感兴趣的题材. 不要去取悦他人, 把精力集中在你认为有意思的东西上. ·设定范围. 考虑你所能舒适地分享多少关于你自己的东西, 你不必"

利用ASP.NET MVC+Bootstrap搭建个人博客之修复UEditor编辑时Bug(四)_实用技巧

我的个人博客站在使用百度富文本编辑器UEditor修改文章时,遇到了一些问题,(不知是bug,还是我没有配置好).但总算找到了解决方法,在此记录下来. 小站首页文章列表显示为(显示去除HTML标签后的前600个字符): 具体在www.zynblog.com 遇到的问题: 正常来讲,进入文章修改页,只需将UEditor对应的textarea的value设置为文章Content就行了: $('#editor').val('@Html.Raw(this.Model.Contents)'); 最开始我就

blog-如何在Linux虚拟主机上建立博客?

问题描述 如何在Linux虚拟主机上建立博客? 我购买了http://jp1.rpvhost.net/public/services/ ,的虚拟主机,想在他的虚拟主机上建立博客,建立类似http://whouz.com ,这样的博客,完全照抄,他同意的.我该怎么做? 解决方案 搭建一个Wordpress.

李伟举:我利用软文推广的八个博客渠道

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 我每天首发的的博客有两个:一个是用ZBLOG做的ASP的个人独立博客;一个是用WP做的PHP的企业独立博客.只要有时间我都会在这两个博客发文章,分享我学到的经验.其实我还有很多的博客,主要是转发这两个博客的文章,今天主要想和大家分享一下利用软文推广的几个博客渠道. 1.Wordpress博客 WordPress博客官网可以注册你的二级域名博客

在GitHub Pages上使用Pelican搭建博客的教程_python

Pelican 介绍 首先看看 Pelican 的一些主要特性:     Python实现,开放源码     输出静态页面,方便托管     支持主题,采用Jajin2模板引擎     支持代码语法高亮     支持reStructuredText.Markdown.AsciiDoc格式     支持Disqus评论     支持Atom和RSS输出 这些特性都是大爱,完全满足我对博客系统的基本需求,再配合免费无限制的GitHub Pages,一切近乎完美了.安装 Pelican 开始前请自行安

个人推广瞄上搜索 博客商业转型初现端倪

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 从名人到草根,博客自 登陆中国以来的发展速度无疑是令人瞠目的.伴随着博客用户.数量的日益增多,新一轮"眼球经济大战"由此引发.近一段时间以来,博客由娱乐化逐渐向商业化转型的趋势也越来越明显. 目前,博客商业转型已显现出了一些苗头,像体育明星刘翔生日当天开博后,仅半天时间访问量就超过了百万.还有一些娱乐明星个人博客的点击率也